Twitter Bootstrap Tabs: Show on Hover, hide on onmouseout - javascript

I changed the bootstrab.js (just replaced click with hover):
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want the content-tab to close when you are not hovering over the tab or content.
How do i do this?

Update: something like the below
var timer;
$('tab_element').hover(
function(){ //hover
// clear timer first
clearTimeout(timer);
// then show the content
},
function(){ //unhovered, 1000 milliseconds
// set a timer to call the hide function
timer = setTimeout("hide_function", 1000);
}
);
$('content_tab_here').bind('mouseleave', function(){
// hide it, you can set a timer here too if you want
});
Here is the docs on timer http://www.w3schools.com/js/js_timing.asp
There are many options here but this will get you started, the jquery I used is old school so if you are using latest version of jquery you can change the code accordingly. I don't want to write out everything for you because then you won't be learning and I don't have that much time because I am at work. Good luck.

Related

Why my Bootstrap Modal loads incomplete after using clear Interval

Every 2 seconds I update a table on my page. This table has a Modal button that also contains information and therefore it is also updated every 2 seconds. The problem is that the info in the Modal doesn't load after using clear Interval. (No need to say that I do need to use clear Interval because Modal doesn't work with the table updating constantly). The code is as follow
var myTimer;
function startTimer() {
myTimer = setInterval(function () {
somefunction_to_updatetable();
}, 2000);
};
function stopTimer() {
clearInterval(myTimer);
};
$(document).on('show.bs.modal', '#idModal', function (e) {
stopTimer();
});
window.onload = function() {
startTimer();
};
In this code, when loading the page setInterval is defined with window.onload. It starts updating info in the table every 2 seconds. When I click the Modal button, stopTimer is read and setInterval is cleared. The Modal opens but the info is not there, only info that is not part of somefunction_to_updatetable() is present in the Modal... how can I fix this? I feel it is straightforward from where I am but I really cannot find a way

create custom event in javascript and trigger it

Here is my problem,i have one google ad that expand on click and return when hit close button..but according to changed conditions what i want is to show expand first and close automatically after certain time and when ever it expanded it should close after certain time..i have done this with jquery but it is refreshing the page for the first time can anyone one help..add is made by using google web designer
here is my jquery code i am sure it wont refresh page abut again it is doing it that's why I was thinking of making custom javascript event and trigger it (core javascript)
<script>
var $j = jQuery.noConflict();
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000);
// above function to clpse it first time after 10 second
(function(){
$j('.banner').click(function(){
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if(!cl_chk){
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000)
}
})
})()
//this function is for closeing that expando ad after its expanded
</script>
here is the url demo:
demo link asian paints ad
dont know if this can help
jQuery.noConflict() // no need to declare a global variable for jQuery ...
(function ($j) { // ... cause you can pass it here
// i like to declare things once and for all....
var closeAfter10 = function () {
setTimeout(function clo() {
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
}, 10000);
}
//this will attach the event and start the countdown when all contents on the page are loaded
$j(window).load(function() {
$j('.banner').click(function () {
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if (!cl_chk) {
closeAfter10(); // ... so i can use them this way ...
}
});
closeAfter10(); // ... here another use of that thing
);
})(jQuery);

Add a delay a jquery reveal popup

Live site- http://www.uposonghar.com/test/test_popup.html
Reveal popup js page- http://www.uposonghar.com/test/jquery.reveal.js
Due to a lot of code on js page maybe that is not a good option to post all js code here.
I want to add 10 second delay on that popup so if anyone click on link then popup will appears after 10 second. I tried JavaScript settimeout but doesn't work, due to low knowledge of jQuery i don't know how to do that with jquery.
Also popup doesn't appears if i click on on second time, only appears on when i click on first time.
setTimout solves that beautifully.
Try that...
var tmrReveal = null;
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
if (tmrReveal != null)
clearTimeout(tmrReveal);
tmrReveal = setTimeout(
function() {
$('#'+modalLocation).reveal($(this).data());
},10000);
});
Use setTimeout()
setTimeout(function() {
//code goes here
}, 10000);
$('#your-anchor-here').click(
function(){
setTimeout(
function(){
//popup logic here
},10000)
});

jQuery hide notification after x ms

I found this script for warning message here: http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
In the script it is set to hide the warning message after the click function
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
So I added Timeout function in the hopes of closing it after x ms, but the 'timer' so to speak starts running as soon as the page is loaded.
setTimeout(function(){hideAllMessages()},5000);
I want the timeout function to work every time the form is submitted and the drop message becomes visible (I am using a hidden iframe to submit the form and it is for stock, so repeated submits will be done on the same page).
I set up a Demo Here jsfiddle
You want to add it in your showMessage function like this:
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo
EDIT: As suggested by James Montagne in the comments, you can use clearTimeout() to prevent stocking timeouts if the user clicks around quickly.
Something like this (quick example, might not be production-ready):
var timeout = null;
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
if (timeout) clearTimeout(timeout);
timeout = setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo
Try to set the timeout after your animation is completed!
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500, function(){
setTimeout(function(){hideAllMessages()},5000);
});
});

how to stop jquery animation when my page is not active

I would like to stop my jquery animation when I open new tab in browser. Every time when I leave my page for a while and I come back after some time, my jquery slider goes crazy and it change slides like insane, because I didn't stop it. Do you have some solution?
In JavaScript:
window.addEventListener('focus', function() {
// code to start
});
window.addEventListener('blur', function() {
// code to stop
});
With jQUery:
$(window).bind('focus', function() {
// code to start
});
$(window).bind('blur', function() {
// code to stop
});
I read somewhere about this and it's called animation queue buildup. Instead of trying to stop animation when opening new tab, put stop() just before starting an animation.
This will ensure that previous animation is killed before continuing....
for example:
$('.some-selector').stop().slideUp();
Hope this helps...

Categories

Resources