We Keep Coding

document.getElementById("st").click(); not working

I want to click a button automatically on every page refresh.But when i have the window.location.reload function the button click is not happening.I am really confused on this one.What to do to get a button clicked automatically on page refresh?
window.setTimeout(function () {
window.location.reload();
repeat();
}, 2000);
function repeat(){
document.getElementById("st").click();
}

window.setTimeout(function () { repeat();
window.location.reload();
}, 2000);
Call repeat before reload function.

This is working!
document.getElementById("st").onclick = function() {
alert('Clicked');
};
window.setTimeout(function() {
window.location.reload();
repeat();
}, 2000);
function repeat() {
document.getElementById("st").click();
}
<div id="st">Div</div>

Hide bootstrap tooltip after three seconds

In a bootstrap 3.5 based web site, we are going to change an input text tooltip when a button is clicked show it and remove tooltip in three seconds.
<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>
//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function () {
//Change tooltip text
$("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');
//remove tooltipe after 3 sec
setTimeout(function () {
$(this).tooltip('destroy');
}, 3000)
})
http://jsfiddle.net/red4w2re/
The problem is that the tooltip is not destroyed and keep showing. If I change the $(this).tooltip('destroy'); to $("[title!='']").tooltip('destroy'); it will work, but it is not correct as it will remove all other tool tips.
Any Comments?

Because the context of this changes in the setTimeout, save a copy of this to a new variable and use that instead:
$("#changeBtn").click(function () {
var _this = this;
setTimeout(function () {
$(_this).tooltip('destroy');
}, 3000)
})
There's some invaluable information on scope and context here.

In the setTimeout, this is not your tooltip, so you have to save it in a variable before:
$("#changeBtn").click(function () {
// Save tooltip
var myTooltip = $("#sample").attr('title', 'New Tip!');
//Change tooltip text
myTooltip.tooltip('fixTitle').tooltip('show');
//remove tooltipe after 3 sec
setTimeout(function () {
myTooltip.tooltip('destroy');
}, 3000)
});
Working example

try this
//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function() {
//Change tooltip text
$("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');
//remove tooltipe after 3 sec
setTimeout(function() {
$("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('hide');
}, 3000)
})
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>

See my fix. As you can see, the problem was with usage of this keyword:
$("[title!='']").tooltip();
$("#changeBtn").click(function () {
$("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');
setTimeout(function () {
$("[title!='']").tooltip('destroy');
}, 3000)
})

I think thas's better to use:
$(function ()
{
let tooltipTarget = $('[data-toggle="tooltip"]');
$(tooltipTarget).tooltip({delay: { "show": 100, "hide": 300 }});
let timeoutHandler = null;
$(tooltipTarget).on('show.bs.tooltip', function () {
let that = this;
clearTimeout(timeoutHandler);
timeoutHandler = setTimeout(function () {
$(that).tooltip('hide');
}, 3000);
});
});

JQuery .slideUp() after time OR mouseleave

I got an element that is slided down by JQuery using .slideDown() method
$('#dropdown_shopping_cart').slideDown(800);
Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().
So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.
JS
setTimeout(function () {
$('#dropdown_shopping_cart').css('display', 'none');
}, 6000);
_______________________________________________________
CSS
#dropdown_shopping_cart:hover {
display: block!important;
}
Now i want to add the .slideUp() to this.

Check this:
var myVar;
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
$("#dropdown_shopping_cart").hover(
function() {
clearTimeout(myVar);
},
function() {
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
}
);
By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically

You can clear the timeout on mouseenter and reset it on mouseleave like this:
var hide_div_to;
function hideDiv(){
hide_div_to = setTimeout(function () {
$('#dropdown_shopping_cart').slideUp(800);
}, 6000);
}
$('#dropdown_shopping_cart').slideDown(800,hideDiv());
$('#dropdown_shopping_cart').mouseenter(function(){
clearTimeout(hide_div_to);
});
$('#dropdown_shopping_cart').mouseleave(function(){
hideDiv();
});
Here is a working JSFiddle
UPDATE
If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:
$('#dropdown_shopping_cart').slideDown(800);
setTimeout(function () {
if(!$('#dropdown_shopping_cart').is(':hover')){
$('#dropdown_shopping_cart').slideUp(800);
}
else{
$('#dropdown_shopping_cart').mouseleave(function(){
$('#dropdown_shopping_cart').slideUp(800);
});
}
}, 3000);
And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.

Id suggest you work with mouseover and a class:
$('#dropdown_shopping_cart').hover(function(){
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
},
function() {
var myVar = setTimeout(function() {
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$('#dropdown_shopping_cart').slideUp()
}
}, 6000);
})
And than in your setTimeout Function you add:

demo: http://jsfiddle.net/yo5gnvy3/7/
$('#dropdown_shopping_cart').hide().slideDown(800, function () {
var events = $._data($(this)[0], "events") || {};
if (events.mouseover === undefined) {
$(this).delay(1000).slideUp()
}
});

How to detect whether mouseout is true or not?

I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});

var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/

$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});

http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});

Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO

Reload when setTimeout function finishes

I want to reload window after a this custom function finishes:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
}, 3000);
//window.location.reload();
});
</script>
Is there a way I can add the reload to the setTimeout function so it doesn't run until the timeout is over?

reload needs to be inside your function:
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
window.location.reload();
}, 3000);
});
If you want to conceptually separate the work from the reload, you can do something like this:
$(document).ready(function(){
setTimeout(function () {
doWork();
window.location.reload();
}, 3000);
function doWork() {
$('#order_form').dolPopupHide({});
}
});
Or, to be even more general:
function reloadAfterExec(fn)
return function() {
fn();
window.location.reload();
}
}
$(document).ready(function(){
setTimeout( reloadAfterExec(function() {
$('#order_form').dolPopupHide({});
}), 3000);
});