I am trying to apply a solution described here: Prevent body from scrolling on mouswheel, but not the texarea to textareas which are editable by CKEditor.
I tried to add the following code to the bottom of config.js and styles.js
$( document ).ready(function() {
debugger;
$('.cke_editable')
.bind('mousewheel', function(event, delta) {
if (this.scrollHeight && this.scrollHeight <= $(this).height() + $(this).scrollTop() && delta < 0){
event.preventDefault()
} else if($(this).scrollTop()===0 && delta > 0){
event.preventDefault()
}
});
});
But the scrolling doesn't change and I think the code doesn't run at all (e.g. it doesn't break on debugger).
I've no clue about the other solution (wrapping content inside <body> tag), looks like some hacking would be necessary to apply to CKEditor.
[Edit]
After including code from the accepted answer and after further experimenting with CKEditor on my Drupal site, this is the code that finally works:
CKEDITOR.on('instanceReady', function(ev) {
var $iframe = jQuery('.cke').find('iframe');
$iframe
.bind('mousewheel', function(event, delta) {
if (this.scrollHeight && this.scrollHeight <= jQuery(this).height() + jQuery(this).scrollTop() && delta < 0){
event.preventDefault()
} else if(jQuery(this).scrollTop()===0 && delta > 0){
event.preventDefault()
}
});
});
It still has one problem, after changing edit mode to "Source" and then back to wysiwyg, the binding is lost. It probably needs re-binding on yet another CKEditor event. I tried CKEDITOR.on('mode', function(ev) {... following this post, but it didn't fire. If I find a solution I'll update.
By the way, here is my CKEditor fiddle with this problem: http://jsfiddle.net/67v3rwfo/
[Edit 2]
I noticed that the fiddle works only in Chrome. In Firefox and IE it scrolls the window anyway, even without changing to "Source".
Are you sure that .cke_editable exists during the document ready event? I'm guessing that even though CKE init is quite fast they only appear after .ready. Try something like this
CKEDITOR.on('instanceReady', function(ev) {
alert("InstanceReady");
// $('.cke_editable')... here
});
$(document).ready(function() {
alert(1);
});
Using alert makes sure that the code does get hit, even if the debugger is somehow derping out on you. If you never see the alert(1); it is very likely that some javascript is actually broken, because that code is unrelated to CKEditor. Check your Developer console for messages during page loading.
Edit 10.9.2014
Not sure if this helps with the underlying issue, but to target the .cke_editable element(s) in an iframe, this seems to work:
var iframeDocument = $('.cke').find('iframe').contents();
var editable = $(iframeDocument).find('.cke_editable');
// editable is like [<body contenteditable="true" …>…</body>]
Related
I have the new invisible recaptcha working fine, but it puts the badge in bottom left or right corner. You can override this with "data-badge='inline'" and that pulls it into the form. Google is extremely vague on how to actually move it. You cannot hide it as google will not validate your form anymore. Soo...
THE ISSUE is I cannot seem to move it anywhere else on the page. I want to move it to the bottom of the page inside a div I created. Has anyone successfully done this? I tried appendTo but that does not work.
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
Any help would be great!!!
Thank you.
If you want to comply with Google Terms, then you can use a timer to detect the badge and then move it down at the bottom. You have to set the badge property to inline. jQuery appendTo worked for me:
Recaptcha code
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : '<your_site_key>',
'callback' : onSubmit,
'badge': 'inline'
});
};
The code to setup a timer to check and move grecaptcha-badge element
jQuery(function($) {
var checkTimer = setInterval(function() {
if($('.grecaptcha-badge').length > 0) {
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
clearInterval(checkTimer);
}
}, 50);
});
Please check my live example here (http://zikro.gr/dbg/google/recaptcha/). You can see that the badge goes at the bottom inside #g-badge-newlocation element and that it works because when you hit submit, recaptcha triggers the callback function which logs the word "success~".
I have some kind of problem with twitter-bootstrap and firefox.
I have a button and a dropdown menu with an input text. If I right click on the input ( for right-click + Paste for example), firefox closes the dropdown. And that quite boring.
Is there any solution for prevent that behaviour ?
Thanks !
As an immediate stop-gap workaround you can use something along the following lines to prevent the click event from propagating when the click event is a right-click
JS
$(document).on('click', function(e) {
e.button === 2 && e.stopImmediatePropagation()
})
This would need to be placed between jQuery loading and Bootstrap loading.
Plunk
However, this is a rather blunt approach and you'd probably be better off doing something more subtle if possible.
Update
One way to circumvent this issue in a more targeted manner is to disable the original event listener and replace it with one that checks for right-clicks first.
JS
// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
return el.namespace === 'data-api.dropdown' && el.selector === undefined
})[0].handler;
// disable the old listener
$(document)
.off('click.data-api.dropdown', _clearMenus)
.on('click.data-api.dropdown', function (e) {
// call the handler only when not right-click
e.button === 2 || _clearMenus()
})
Unlike the previous example, this code would need to run after Bootstrap has loaded.
Plunk
For Bootstrap 3 you have to update the namespace to bs.data-api.dropdown.
JS
// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
return el.namespace === 'bs.data-api.dropdown' && el.selector === undefined
})[0].handler;
// disable the old listener
$(document)
.off('click.data-api.dropdown', _clearMenus)
.on('click.data-api.dropdown', function (e) {
// call the handler only when not right-click
e.button === 2 || _clearMenus()
})
Plunk
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
I want to hide a div when clicking somewhere else in the page. For this, I have:
$(document.body).observe('click', function(e){
if(e.target.id != 'myDiv') {
$('myDiv').hide();
}
});
Works fine, the only problem is that inside this div I have other elements, and clicking them also closes #myDiv. I want it so that clicking anything inside this div won't trigger the hiding. After searching around, I found the answer here on how to do this with jQuery: https://stackoverflow.com/a/12222263/548524. However, I can't seem to get this working in Prototype, and obviously has() is not valid here.
Any help is much appreciated!
document.observe('click', function(event) {
if (!event.findElement('#myDiv')) {
$('myDiv').hide();
}
});
You don't need $(document.body) - there is already document-wide observe
There is a method to find element from event
Use the 'up' function:
$(document.body).observe('click', function(e){
if(e.target.id != 'myDiv' && !$(e.target.id).up('#myDiv')) {
$('myDiv').hide();
}
});
Ok, so i have two ways to perform div refresh
$('#player').load('/videos/index');
in my rails app. One is through link
next
other is through shortcut of that button. And they work fine, until i discovered, that if I refresh player twice in a row through the link, and then through the shortcut, it loads div twicely. If i refresh through the link three times in a row, than through the shortcut, than it's loading div three times. And so on..
So, i've started to trying configure binds (as I assumed, that was the reason), but there were mo result.
Here is my messed up in binds shortcut part of application.js
$(document).ready(function(){;
$(document).bind('keydown', 'space', function() {
$('#player').unbind('load');
$('#player').load('/videos/index');
$(document).unbind();
});
});
I tried to click on link through the shortcut, but the same result, so I've assume, the problem is in load. Any suggestions would help.
The best way to avoid a double refresh, is having an state flag, indicating if it can load again, or if it's loading:
$(document).ready(function() {
var loading = false;
function reloadDiv() {
if(!loading) {
loading = true;
$('#player').load('/videos/index', null, function() { loading = false; });
}
}
$('#nextb').click(reloadDiv);
$(document).bind('keydown', 'space', reloadDiv);
});
Good luck!