Following is my js code which works fine when i add new values or give enter space etc. Basically the following code calls a function after 5 seconds after the last key is pressed to save textarea values. The issue I am facing is the function does not make any call if i use editor to change the content within itself like bold the text, underline etc without pressing any key on the editor. Kindly let me know how can I modify the following code so it gets trigger on last change after 5 seconds?
CKEDITOR.replace( 'editor1', {
on: {
instanceReady: function() {
},
key: function() {
onautosave(); // Function which makes call after 5 seconds to save values
}
}
});
function onautosave(){
if(autosave_timer)
clearTimeout(autosave_timer);
autosave_timer = setTimeout(save, 5000);
}
Try using the on change event, that might work better for you:
CKEDITOR.replace('editor1', {
on: {
instanceReady: function() { },
change: function() {
onautosave(); // Function which makes call after 5 seconds to save values
}
}
});
function onautosave() {
if (autosave_timer) {
clearTimeout(autosave_timer);
}
autosave_timer = setTimeout(save, 5000);
}
Related
Im using ContentTools and everything works as expected when using the standard Ignition. However when I instead of using the Blue button add my own to Start editing/Save and Discard changes the Editor is unable to reactivate. This means that the user can Edit, then Save once. All subsequent attempts at reactivation fail silently.
Init code:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.save();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.revert();
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});
Instead of using the save() and revert() methods directly I recommend you use stop(true) for save and stop(false) for cancel/revert.
The save and revert methods don't stop the editor (for example save(true) can be used to auto-save content while the user continues to edit). Using stop should allow you to restart the editor, e.g:
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('.editable', 'id');
ContentTools.IMAGE_UPLOADER = imageUploader;
$('#btnStartEdit').click(function() {
editor.start();
$(this).hide();
$('#btnSaveChanges').fadeIn();
$('#btnDiscardChanges').fadeIn();
});
$('#btnSaveChanges').click(function() {
editor.stop(true);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
$('#btnDiscardChanges').click(function() {
editor.stop(false);
$('#btnStartEdit').fadeIn();
$('#btnSaveChanges').fadeOut();
$('#btnDiscardChanges').fadeOut();
});
ContentTools.EditorApp.get()._ignition.unmount();
});
I have this jquery code, working 100%.
This is executing on every page load, when i import my js file in the html.
My question, how can i make use of this code, only when the element is present, or call it directly from the element itself? I have similiar functions, but, on html's that dont have specific elements, javascript execution halts. Sometimes because the html elements dont exist on that specific html file.
/**
* Message Box Display
*/
$(document).ready(function() {
$("#Message-Box" ).slideDown("slow", function() {
$("#Message-Box").addClass('Show');
setTimeout(function(){
$('#Message-Box').addClass('Hide');
}, 5000);
});
});
try something like this
$(document).ready(function() {
var msgbx = $("#Message-Box");
if (msgbx.length) {
msgbx.slideDown("slow", function() {
msgbx.addClass('Show');
setTimeout(function() {
msgbx.addClass('Hide');
}, 5000);
});
}
});
The function halting my script was this one:
/**
* Background-Audio
*/
$(document).ready(function() {
var audioTrack = document.getElementById("Background-Audio");
if(audioTrack)
{
audioTrack.volume = 0.05;
audioTrack.play();
}
});
I have implemented on a website a picture gallery that does not allow (it seems) the auto sliding. So at the moment I have to push on a button to see the next picture. My purpose is to catch the function that allows to move to the next picture and to set a timeout to go to the next picture automatically.
How can I get the JS function name using Google Chrome developer tools?
Thank you
UPDATE
This is the Gallery script: http://tympanus.net/Development/ScatteredPolaroidsGallery/
I would like to implement auto sliding on it
source for code proposal from: https://github.com/codrops/ScatteredPolaroidsGallery/issues/4
(function() {
function autoSliding(timeout) {
var self = this;
clearTimeout(self.timeOut);
self.timeOut = setTimeout(function() {
self._navigate('next');
}, timeout);
}
new Photostack( document.getElementById( 'photostack-1' ), {
afterShowPhoto: function(context) {
autoSliding.call(context, 3000)
},
afterNavigate: function(context) {
autoSliding.call(context, 3000)
}
});
new Photostack( document.getElementById( 'photostack-2' ), {
afterShowPhoto: function(context) {
autoSliding.call(context, 3000)
},
afterNavigate: function(context) {
autoSliding.call(context, 3000)
}
});
}())
This should do the work
$('.navigate-next').click();
Or for auto scroll
setInterval(function(){$('.navigate-next').click();},1000);
Change 1000 for whatever you wish
If you are allowed to use jquery in your code, then, you can use $._data() method.
syntax is $._data($("selector of the element")[0], "events")
This will return an Object of all events bounded to that element. Then get the click event and call the handler attribute of the click event.
The problem is that when i use the toggle function without any options i.e default options the 'is(':visible')' on the item returns me the correct state.
However when i use toggle("slow"), it reveals incorrect state and always shows the item operated upon by the toggle as visible false. Of course i am checking that inside the callback function so as to be sure that the animation is complete.
please look at the below code
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
jQuery(this).next('div').toggle("slow", "swing", callback);
});
});
});
function callback () {
if (jQuery(this).next('div').is(':visible')) {
alert('visible--' + jQuery(this).next('div').is(':visible'));
jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}
However the same works perfectly fine when not using the "slow" option with toggle.
Update 2:
Check this out here http://jsfiddle.net/tariquasar/7xt7D/2/
Any pointers...
Update 1: This is the fiddle http://jsfiddle.net/tariquasar/7xt7D/
The context this is not extended to the callback function too. You could try doing this. I have updated the jsfiddle (click here). Ill paste the same here.
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
console.log(this);
jQuery(this).next('div').toggle("slow","swing",callback(this));
});
});
});
function callback (that) {
setTimeout( function () {
console.log(jQuery(that).next('div').is(':visible'));
if (jQuery(that).next('div').is(':visible')) {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}, 1000);
}
I have added a SetTimeout to get the result you wanted. The callback function is called after the animation completes. Yes. But not after the CSS changes to display:none. CSS change happens a few millisecs later.
However the same works perfectly fine when not using the "slow" option with toggle.
I'm not really sure about how you got it working with options other than slow
I have a link:
Here's my link
This is not a normal clickable link, it's coded in jQuery like this:
$("#link").hover(function(e) {
e.preventDefault();
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
})
So after hovering unclickable link there's change of #tv's margin and opacity.
Is there any way of making this work only after the user hovers the link area with pointer for more than two seconds?
Because now everything happens in real time.
I know there's delay(), but it doesn't work because it just delays the animation and in this case I don't want any action if the pointer is over for less than two seconds.
Possible without a loop?
What you're after is called hoverIntent.
var animateTimeout;
$("#link").hover(function() {
if (animateTimeout != null) {
clearTimeout(animateTimeout);
}
animateTimeout = setTimeout(animate, 2000);
}, function() {
clearTimeout(animateTimeout);
});
function animate() {
//do animation
}
You just need a setTimeout() to delay the code, along with a clearTimeout() to clear it if the user leaves the link within 2 seconds.
Example: http://jsfiddle.net/mNWEq/2/
$("#link").hover(function(e) {
e.preventDefault();
$.data(this).timeout = setTimeout(function() {
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
}, 2000);
}, function(e) {
clearTimeout($.data(this,'timeout'));
});