I'm sorry, I'm very new to JS but I need it for work...
Can you just quickley tell me what is wrong with this script? I just want the div box to be visible every second time when someone loads the page...
<body onload="script();">
<script type="text/javascript">
var random = Math.floor(Math.random() * 2) + 1 ;
if (random<1) {
document.getElementById('ele').style.display = 'block';
};
</script>
<div style="display: none;" id="ele">Div-Box<br />
</div>
</body>
Cheers,
Till
Using random won't guarantee that the div will be shown every second time the page is loaded. To do that you need to keep track of how many times a user has opened the page. You can do this in localStorage.
<body>
<script>
var viewCount = localStorage.getItem('viewCount') || 1; // default to 1 the first time
if (viewCount % 2 === 0) { // if it's an even number
document.getElementById('ele').setAttribute('style', 'display: block');
}
</script>
</body>
Apart from your logic you are calling script() function on onload but it is not defined.
<body onload="script();">
<script type="text/javascript">
function script(){
var random = Math.floor(Math.random() * 2) + 1 ;
console.log(random);
if (random>1) {
document.getElementById('ele').style.display = 'block';
};
}
</script>
<div style="display: none;" id="ele">Div-Box<br />
</div>
</body>
Related
I'm trying to find the solution that how can i make a text appear on the page after 10 seconds of page load? example text..
I didn't do anything, because I think it's about javascript here...
Example : Something like this: http://postimg.org/image/duogy83zd/
Try below code, thats what you need :
<html>
<head>
<script>
window.onload = function(){
var theDelay = 10;
var timer = setTimeout("showText()",theDelay*1000)
}
function showText(){
document.getElementById("delayedText").style.visibility = "visible";
}
</script>
</head>
<body>
<div id="delayedText" style="visibility:hidden">
I didn't do anything, because I think it's about javascript here...
</div>
</body>
</html>
I am using below java script code to create slide show with images
img1.jpg, img1.jpg and img3.jpg.
But it is displaying just img1.jpg in the output. Please tell the problem.
<html>
<style>
#slideshow{width:310;height:210;border-style:solid;}
#slideshow>img{position:absolute;left:15;top:15}
</style>
<body>
<div id="slideshow">
<img id="imge" src="img1.jpg" height="200" width="300">
</div>
<script>
var count=2;
function mf()
{
document.getElementById("imge").src="img"+count+".jpg";
document.getElementById("imge").height="200";
document.getElementById("imge").width="300";
if(count<3)
count++;
else
count=1;
setTimeout("mf()",3000);
}
</script>
</body>
</html>
You need to start off your script afterwards, with mf();
<script>
var count=2;
// if your script is at the bottom of the page, you can move
// these three lines out here
var elem = document.getElementById("imge");
elem.height="200";
elem.width="300";
function mf() {
elem.src="img"+ (count + 1) +".jpg"; // add 1 to grab images 1 through 3
count = ((count + 1) % 3); // will loop from 0 to 2 and back again
setTimeout(mf,3000);
}
mf(); // kick off the first iteration of the slideshow
</script>
I have many div tags.
I am trying to display only one tag at a time for 10 seconds.
That is, when div1 is being displayed, div2,div3..divn must be hidden, after 10 seconds div2 has to be displayed for 10 seconds and other div tags has to be hidden and so on.
Its a kind of cyclic manner.
Kindly help.
Check out the sample html here:
<html>
<head>
......
.......
</head>
<body>
<div id="div1">
........
......
</div>
<div id="div2">
........
......
</div>
..
..
<div id="divn">
........
......
</div>
</body>
</html>
Regards,
abk
This should work: http://jsfiddle.net/Z5uMV/
var current = 1;
function cycle() {
$('#div' + current).fadeOut(function() {
current++;
if(current > 10) current = 1;
$('#div' + current).fadeIn(function() {
setTimeout(cycle, 10000);
}
});
}
cycle(); // start it
You can use setInterval
Live Demo
var myVar=setInterval(function(){myTimer()},1000);
var index=1;
totalDivs = $('[id^=div]').length;
$('[id^=div]').hide();
function myTimer()
{
$('[id^=div]').hide();
$('#div'+ index++).show();
if(index > totalDivs)
index = 0;
}
i have this code and would like to have an animated gif to disappear after 3 seconds. i learned that i need to add window.onload=loadingGif(); to ensure the 'loadingGif' function is fired when the page loads. i stll have the problem that this code is not working how it should do. i would like to know what is going wrong with that? thanks.
i´m sorry i posted the wrong code. it must be:
<body>
<script type="text/javascript">
var counter = 3;
function downcount() {
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 ) {
document.getElementById('loading').style.display = 'none';
document.getElementById('msg').style.display = 'block';
} else {
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
</script>
<div id="loading">
<img src="loading/loading40.gif"/>
</div>
<div id="msg" style="display:none">
<?PHP echo $_SESSION['msg'];?>
</div>
Close the img tag.
Also, where's digit? If that doesn't exist then you'll be getting JS errors.
You're doing three 1s setTimeout to wait for 3 seconds? Here is a simpler solution, right out of my head...
window.onload = setTimeout(removeImg, 3000)
var removeImg = function() {
document.getElementById('loading').style.display = 'none'
document.getElementById('msg').style.display = 'block'
}
I'm trying to cycle through 10 numbers (1 - 9) on the screen every second. Sort of like the green matrix code from the movie..
here is my code, I cant for the life of me figure out what I'm doing wrong, I've tried many other things but this seems the most correct to me:
<html>
<head>
<script type="text/javascript">
function numberScroll(){
n = setInterval("Math.floor(Math.random()*11",100);
setInterval("document.getElementById('txt').innerHTML=n",100);
}
</script>
</head>
<body onLoad="numberScroll()">
<div id="txt"></div>
</body>
</html>
You should never pass a string to setInterval/setTimeout.
Use a function instead:
setInterval(function() {
var n = Math.floor(Math.random() * 11);
document.getElementById('txt').innerHTML = n;
}, 100);
http://jsfiddle.net/ThiefMaster/Tmqbk/
setInterval(function(){document.getElementById('txt').innerHTML=Math.floor(Math.random()*11)},100);