We Keep Coding

show bootstrap tooltip on load and auto hide after few seconds

<a title="show on load" data-toggle="tooltip">Hello world</a>
$('a').tooltip('show');
this is showing tooltip on page load, but how to hide it after few seconds?
I tried something like this,
$('a').tooltip({
'delay': { show: 'show', hide: 3000 }
});
jsfiddle

The delay actually affects the delay of the tooltip displaying by the selected trigger method, which by default is hover. You would need to set the trigger as manual, then you can trigger it on the page load and set a timeout that will hide in later. Something like this should work:
$('p').tooltip({
trigger: 'manual'
});
$(document).ready(function() {
$('p').tooltip('show');
setTimeout(function(){ $('p').tooltip('hide'); }, 3000);
});
See the docs here for more info: http://getbootstrap.com/javascript/#tooltips

Thanks to Chip Dean.
Or use this:
$(document).ready(function(){
$('p').tooltip().mouseover();
setTimeout(function(){ $('p').tooltip('hide'); }, 3000);
});
data-toggle
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip().mouseover();
setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
});
or
// $(window).load(function(){ // deprecated in 1.8 - removed 3.0.
$(window).on("load", function(){
$('[data-toggle="tooltip"]').tooltip().mouseover();
setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
});
**
Show on scroll
$(document).ready(function(){
$(window).on("scroll", function(){
$('[data-toggle="tooltip"]').tooltip().mouseover();
setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
});
});

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.

Adding a delay to to a form scroller

I am using http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/ to build a form - I want a delay before the page scrolls down after the click event.
I've been trying to achieve this using setTimeout but have been struggling.
For example I thought this would work:
// show next field
setTimeout(function() {
this.ctrlContinue.addEventListener( 'click', function() {
self._nextField();
} );
}, 1000);
You can see the full code at https://github.com/codrops/FullscreenForm/blob/master/js/fullscreenForm.js
Thanks

This should work, you should set timeout after click event not before.
this.ctrlContinue.addEventListener( 'click', function() {
setTimeout(function() {
self._nextField();
}, 1000);
});

Using stop() with jquery to launch a function only one time

I don't understand the use of stop() element in jquery.
In this example, i try to open a div when the user launch the myfunction function (for example by clicking on a trigger)
But if you click several time, #mydiv desapears anyway, without waiting 3 seconds, because it close 3 second after your first click.
function myfunction(hello)
{
$( "#mycontener" ).html( hello );
$( "#mydiv" ).stop( true, true ).slideDown( 250, function() {
setTimeout(function() {
$("#mydiv").slideUp( 250 );
}, 3000);
});
};
Is it clear enough ?
Thanks

You will need to clear the timeout to prevent it from happening on future calls. Something like this:
(function () {
var handle;
function myfunction(hello) {
clearTimeout(handle);
$("#mycontener").html(hello);
$("#mydiv").stop(true, true).slideDown(250, function () {
handle = setTimeout(function () {
$("#mydiv").slideUp(250);
}, 3000);
});
}
window.myfunction = myfunction;
})();

Problems with jQuery event chain in Safari

I'm building a simple photolog using jQuery, jflickrfeed and jQuery.Masonry - but I'm having some trouble getting the event chain right in Safari.
Here's some example code:
$(document).ready(function() {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
}, function(data) {
console.log("1st");
});
});
$(window).load(function() {
console.log("2nd");
$('#container').masonry({
singleMode: true
});
});
So, jflickrfeed pulls a photo from my flickr feed, wraps it in the template code and appends it inside #container, and repeats this until the limit is reached. After all photos are inserted, Masonry kicks in and arranges the divs.
This works beautifully in Chrome and Firefox, but not in Safari - where the .load event fires before all photos are finished loaded, thus breaking the layout.
I've updated the example to better show illustrate what I mean.
In Chrome/Firefox the console output is "1st, 2nd" while in Safari it is "2nd, 1st"
Any tips?

You can pass the load callback as the second parameter to "jflickrfeed" call and this will ensure that the "masonry" will be invoked only when the images from Flickr have been loaded.
here is a possible sample:
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
},
function () {
$('#container').masonry({
singleMode: true
});
});
Hope it helps.

I'm not sure how useful this will be, or if if will make any difference at all. But for a guess, if the issue is that #container is not available when $(window).load fires, you could try setting up a timer to repeatedly check for its existence, and when it is detected, set up masonry, then kill the timer:
$(window).load(function () {
var i = setInterval(function() {
if($("#container").length) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}},
20);
});

Solved it myself by adding a counter:
var counter = 0;
$(document).ready(function () {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>',
itemCallback: function () {
counter++;
}
});
});
$(window).load(function () {
var i = setInterval(function () {
if (counter = 20) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}
}, 20);
});
Ugly, but it works..