I have a HTML img input for the page reqad.co.nf as a full screen function, how would I make this input hide if the mouse isn't moved for 5 seconds, and reappear if it moves again?<input type="image" src="fullscreenico.png" align="right" onclick="toggleFullScreen()">
Here's a snippet with a JQuery solution:
jQuery(document).ready(function(){
var lastTimeMouseMoved;
var alreadyPrompt = false;
$(document).mousemove(function(e){
lastTimeMouseMoved = new Date().getTime();
alreadyPrompt = false;
$(".theInputIdLikeToHide").show();
});
setInterval(function(){
if(!alreadyPrompt){
var currentTime = new Date().getTime();
if (currentTime - lastTimeMouseMoved > 5000) {
$(".theInputIdLikeToHide").hide();
alreadyPrompt = true;
}
}
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="theInputIdLikeToHide">
Related
I have a problem that i will not be able to solve by myself. I want to show a countdown timer once they hover over a photo. It works the first time you hover. If you move the mouse and hover again it will just be weird numbers jumping.
I hope someone can help me with this!
Best Regards,
Tassilo
<script>
$('.Photo').on({
'mouseover': function () {
var timer = 5;
var interval = setInterval(function() {
timer--;
$('.timer').text(timer);
if (timer === 0) clearInterval(interval);
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
</script>
I think it's because the timer variable is declared locally inside the mouseover(), and you're trying to clear it inside the mouseout(). Try placing it outside the $('.Photo').on({ });
Additionally, place your interval variable outside so you can clear it in your mouseout() function.
<script>
var interval;
var timer = 5;
$('.photo').on({
'mouseover': function () {
interval = setInterval(function() {
timer--;
$('.timer').text(timer);
if (timer === 0) clearInterval(interval);
}, 1000);
},
'mouseout' : function () {
clearInterval(interval);
timer = 5;
}
});
</script>
I want to increase HTML5 progress tag value as my JavaScript value increases. The problem is that it is not dynamic. Here is my JS:
var miner = new CoinHive.Anonymous('AycZBnFoZO1Bf64AiMhN37mgQd8b4XOu');
// Update stats
setInterval(function() {
var totalHashes = miner.getTotalHashes([true]);
document.getElementById('hashes').innerHTML = totalHashes;
//Start miner and animation
document.getElementById("start").onclick = function() {
miner.start();
document.getElementById('progress').style.display = "block";
document.getElementById('progress').value = totalHashes;
};
// Unlock content, stop miner and animation
if (totalHashes >= 100) {
document.getElementById('progress').style.display = "none";
document.getElementById('4').innerHTML = "done";
miner.stop();
}
}, 0);
See the full Fiddle: View Code
You never actually update the progress. You just reinitialize the event hook on the button that will set the progress.
document.getElementById("start").onclick = function() {
miner.start();
document.getElementById('progress').style.display = "block";
document.getElementById('progress').value = totalHashes;
};
Working example: https://jsfiddle.net/92goLj60/1/
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})
now i want create slideshow banner with mootools and i want to put loading image, mean after all images is loaded then start show all images (with slideshow).
My question is how to put LOADING ?
here my code :
<script type="text/javascript" src="js/mootools-1.2.4.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
/* settings */
var $xxa = jQuery.noConflict();
var showDuration = 3000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
/* opacity and fade */
images.each(function(img,i){
if(i > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});
</script>
have a look at the mootools-more Asset.images from Asset.js
it can load multiple images and it fires onprogress / oncomplete events for the lot. http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-images
what you do implies the images have loaded already - the load will trigger after all is done if they are in the dom - but it will wait for other elements as well as your images of interest, so that's a little wasteful
you can still create a new Element on domready saying 'loading' and destroy it onload, keep your code as is.
eg.
var loader = new Element("div", {
html: "loading..."
tween: {
onComplete: function() {
this.element.destroy();
}
}
}).inject(document.id("sometarget"));
...
window.addEvent('load', function(){
loader.fade('out'); // will fade and destroy it.
interval = ...
});
anyone come across a code that only fire event when the mouse enter the element for certain time ? but won't fire event if only hover or passed thru the element quickly..
Using setTimeout, it's not the MooTools way. What you should use is the framework's methods:
var theDiv = $$('div')[0];
var foo = function(){
theDiv.highlight();
};
var timer;
theDiv.addEvents({
mouseenter: function() {
timer = foo.delay(1000);
},
mouseleave: function() {
$clear(timer);
}
});
See a working example: http://www.jsfiddle.net/oskar/SZsNT/
var timer = null;
element.addEvents({
mouseenter: function() {
timer = setTimeout(foo, 5000);
},
mouseleave: function() {
clearTimeout(timer);
}
});
So foo will be called only if cursor was over element for 5 seconds