We Keep Coding

smoothState.js conflicting with other plugins

I have managed to implement the smoothState.js plugin on my website and it works nicely, but my other very simple jQuery plugin will not work, wich starts with:
$(document).ready()
I need to refresh the page in order for it to work again.
I've read the smoothState documentation and it says I should wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter — but I'm farely new to programming, so I'm asking for your help.
How can I make my jQuery plugins work with smoothState?

You need to wrap scripts that are initiated with $(document).ready() in a function, and then call that function when you need it.
For example, let’s say this is your current script:
$(document).ready(function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
});
It’ll work fine when the page loads as it’s wrapped in $(document).ready(function()), but as the page won’t be reloading when using Smoothstate, we need a way to call the snippet both when the page originally loads and when smoothstate loads content. To do this we’ll turn the above snippet in to a function like this:
(function($) {
$.fn.onPageLoad = function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
};
}(jQuery));
As you can see, we’ve swapped $(document).ready(function()) with the function wrapper, everything else stays the same.
So now we’ve got a function all we need to do is call it when the page loads and in Smoothstate.
To call it when a page loads all we need to do is this:
$(document).ready(function() {
$('body').onPageLoad();
});
And to trigger it in Smoothstate we need to call it in the InAfter callback like this:
onAfter: function($container) {
$container.onPageLoad();
}
And here's an example Smoothstate script showing where to put the onAfter callback:
$(function() {
var $page = $('#main');
var options = {
prefetch : true,
pageCacheSize: 4,
forms: 'form',
scroll: false,
onStart: {
duration: 1200,
render: function($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
$('html, body').scrollTop(0);
}
},
onAfter: function($container) {
$container.onPageLoad();
}
};
var smoothState = $('#main').smoothState(options).data('smoothState');
});
Happy to provide further assistance if needed.

Why Doesn't Modal FadeOut Slowly?

I inherited this modal/overlay/content close/empty method that works, but abruptly:
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
To fade out gradually, I modified the method like below, but elements are left behind and subsequent clicks don't open new modals loaded with content, only the overlay:
method.close = function () {
$modal.fadeOut('slow', function() {
$(this).hide();
});
$overlay.fadeOut('slow', function() {
$(this).hide();
});
$content.fadeOut('slow', function() {
$(this).empty();
});
$(window).unbind('resize.modal');
};
What am I missing?
UPDATE: The solution is a single nested callback, based on garryp's answer, like this:
method.close = function() {
$overlay.fadeOut('slow', function() {
$overlay.hide();
$content.empty();
});
$modal.hide();
$(window).unbind('resize.modal');
};

Hide is asynchronous; the calls you have in your original code do not block while the transition occurs, execution moves immediately to the next. You need to use callbacks, like this:
var me = $(this); //Added to ensure correct this context
$modal.fadeOut('slow', function () {
me.hide(function () {
$overlay.fadeOut('slow', function () {
me.hide(function () {
$content.fadeOut('slow', function () {
me.empty();
});
});
});
});
});
Assuming the rest of your code is correct this should ensure the transitions fire one after the next.

Firstly, you do not need $(this).hide(). JQuery fadeOut automatically set display: none at the end of fading animation (read more: http://api.jquery.com/fadeout/).
That mean, in your case $content element will also have display: none after fadeOut animation. I expect you forgot to add $content.show() in modal open method.

JavaScript failing on page postback

I have got this script to give effects to buttons which i have, it fails after the page is posted back, i have also put the code in a pageLoad method yet it still does not function. any idea how i can go about making this script run once the page has loaded.
$(document).ready(function () {
/*preloader for image loading bar*/
jQuery(function ($) {
function preLoad() {
//alert("script running");
$("#divQuestionMatrix").addClass("hidden");
}
function loaded() {
$("#divQuestionMatrix").removeClass("hidden");
$('div#preLoader').css({ display: 'none' }).remove();
}
preLoad();
window.onload = loaded;
});
/* End of preloader*/
$("#btnPrevious").click(function (e) {
$("#navigation").val("previous");
}
);
$("#btnNext").click(function (e) {
$("#navigation").val("next");
}
);
/* $(".qmatrix").click(function () {
//get id of button
alert($(this).attr('id'));
$("#navigation").val($(this).attr('id'));
}
);*/
$(".qmatrix").hover(function (e) {
//get id of button
//alert($(this).attr('id'));
//get src of image before hover
var origimage = $(this).attr('src');
// alert(origimage);
//$(this).attr({ src: 'images/questionMatrix/100' + $(this).attr('id') + '.png' });
$(this).stop().animate({ "opacity": "0.1" }, "fast")
},
function () {
// $(this).attr({ src: '' + origimage.toString() + '' });
$(this).stop().animate({ "opacity": "1" }, "fast");
}
);

The document.ready event is fired once the page has finished loading.
Inside the handler for the ready event, you're then using the ready event shortcut (passing a function directly to the global jQuery function (which is the same as the global $ function btw) to add another handler function for the ready event.
Inside this second ready handler you're then trying to assign the loaded function to window.onload, which would have already fired by this point.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Put this Latest Jquery Library Just just above to your document.ready() function and try to run your program.

load() function issue on preloader

I've an issue with jQuerys .load() and would to ask for some help. I'm using load for firing a function after the site is loaded. I'm using a small image-preloading script
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'img/about_1.gif',
'img/contact_1.png',
// and much more images
]);
and some pictures in the body who don't need to be preloaded.
What I am trying to achieve is, to fire a function after the site has been completely loaded. Like this:
$(document).ready(function() {
$(window).load(function () {
console.log("all loaded");
$('#curtain').animate({top: '-=1000px'}, 'slow', 'linear', function() { $(this).remove(); });
$('#loading').animate({top: '-=1000px'}, 'slow', 'linear', function() { $(this).remove(); });
});
});
unfortunately it does fire before the whole page is loaded. Is there something I have to know about .load() and why it does not work?
Thanks

jQuery Tools Overlay with preload delay

I'm using the Overlay plugin from jQuery Tools: http://flowplayer.org/tools/overlay/index.html to display a full size image when a link is clicked, but the overlay is displayed immediately and shows the image loading.
I'd like to change this behavior and wait until the image is loaded before launching the overlay. The Overlay plugin has an onBeforeLoad property to which a callback function can be attached. But, of course, the overlay display resumes as soon as this callback is executed, and will not wait for the image load event to be fired.
The plugin has a few API methods, but they don't seem very helpful for my purpose.
In my example below, the two lines I've commented out should give you an idea of what I thought might work, but doesn't.
Here's a simplified test case: http://jsfiddle.net/GlauberRocha/9jkU5/
Any idea?
var $trigger = $("#trigger"),
api;
$trigger.overlay({
fixed: true,
mask: {
color: "#000",
opacity: .8
},
onBeforeLoad: function() {
console.log("onBeforeLoad");
api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
//api.close(); // Temporarily "close" the overlay?
setTimeout(function() { // This will be replaced by the image load event
console.log("Waiting is over!");
//api.load(); // Load the overlay now?
}, 2000);
},
onLoad: function() {
console.log("onLoad");
}
});

Ok, I think I understand what you are wanting. To prevent the overlay from loading, you need to return false, but only if the image is not yet loaded. See if this JSFIDDLE helps:
var $trigger = $("#trigger"),
api;
var imageLoaded = false;
$trigger.overlay({
fixed: true,
mask: {
color: "#000",
opacity: .8
},
onBeforeLoad: function() {
console.log("onBeforeLoad");
api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
//api.close(); // Temporarily "close" the overlay?
if(!imageLoaded){
setTimeout(function() { // This will be replaced by the image load event
console.log("Waiting is over!");
api.load(); // Load the overlay now?
}, 2000);
imageLoaded = true;
return false;
}
},
onLoad: function() {
console.log("onLoad");
}
});

I've modified my code. This version seems to work (see http://jsfiddle.net/GlauberRocha/rwtvK/). The main difference comes from the way the API method is called ($trigger.overlay().load() vs $trigger.data("overlay").load()). This inconsistency is present in the jQuery Tools docs and examples.
$(function () {
var $trigger = $("#trigger");
$trigger.overlay({
fixed: true,
mask: {
color: "#000",
opacity: .4
},
onBeforeLoad: function () {
if (typeof this.init === "undefined") {
this.init = true;
setTimeout(function () { // This will be replaced by the image load event handler
console.log("OK, let's show it!");
$trigger.overlay().load(); // Load the overlay
}, 5000);
console.log("Not now!");
return false;
}
}
});
});