|
JavaScript - Seconds Countdown To Show Div
Hello,
I found this code, written by Philip M on another thread of this forum: Code: <div id = "adsdiv">This ad will close in
<span id = "closingtimer">31</span>
seconds
</div>
<script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var seconds = 31;
function display() {
seconds --;
if (seconds < 1) {
closeMyAd();
}
else {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()", 1000);
}
}
display();
</script>
I need to reverse the script to show a div after 30 seconds, not to hide it. Can you please help me? Thank you. Similar TutorialsThis is the script to hide the div (adsdiv) Its working on all browser except IE Code: <script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var milisec=0
var seconds=30
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
if( seconds > 0 ) {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()",100) ;
}else{
closeMyAd() ;
}
}
if( document.getElementById( "closingtimer" ) )
display() ;
</script>
how long are these numbers? Code: setImageInterval("ad1", 1000, 3);
I know 3 is the max, but the 1000 = how many seconds? Thanks -Tim I need to develop this feature for a charity site displays a number that counts up 1 every 15 seconds. This is to show how many times a kid is abused in this country. I've been researching this and haven't been able to find anything helpful yet. I figured this piece of code was a good start: function doSomething() { setTimeout('doSomething()',15000); } Hey guys..... I'm wondering how you go about getting a script to run every 30 seconds for example? Thanks a lot! Hi I am creating an animation based on Sam Dunn's tutorial 'Animate Curtains Opening with jQuery' ( http://buildinternet.com/2009/07/ani...g-with-jquery/ ). What i need to do is create a 2 second delay in the curtains opening in order to give enough time for an iframe, thats behind the curtains, to load it's content. Here is Sam's script : ----------------------------------------------------------------- <!-- Animate a Curtain Opening with jQuery index.html By Sam Dunn 2009 Build Internet! www.buildinternet.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Animate a Curtain Opening with jQuery | Build Internet</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script> <style type="text/css"> *{ margin:0; padding:0; } body { text-align: center; background: #4f3722 url('images/darkcurtain.jpg') repeat-x; } img{ border: none; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 150px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; } </style> </head> <body> <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> <img class="logo" src="images/buildinter.png"/> <a class="rope" href="#"> <img src="images/rope.png"/> </a> </body> </html> ----------------------------------------------------------------- Any help will be greatly appreciated. Thanks. Jet. Can someone help me to modify this JS to close if user is no longer hovering over child link after 5 seconds? Code: $(document).ready(function () {
$('#menuHolder ul li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
if ($(this).parent().attr('class').indexOf('clicked') != -1) {
$(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
}
else {
$(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
})
$('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
});
});
</script>
I have a welcome message on my site and would like to automatically hide it after several seconds. I can't find anything usable after searching over the internet. Can anyone help? Thanks in advance. Trying to setup a cookie read/write in JS. Page 1 sets the JS cookie using Flash. Page 2 reads the JS cookie from Flash. I have this working. The problem is that I need the cookie to expire in a matter of seconds. This is my code for creating the cookie and expiration: Code: function setCookie(name, value)
{
var today=new Date;
today.setTime(today.getTime()+3000);
document.cookie = name+"="+value; +"; expires="+today.toGMTString();
//alert(name + " "+value);
alert("Value is: "+value+"\n Expires in: "+today);
}
The problem isn't that cookie isn't there. I just can't seem to get it to expire. Please help. Hi people, I'm building an online psychological experiment in which I need to display an image for 5 seconds on the screen. Does anyone has a simple script for that? I found some script that does image rotation but its not exactly what I am looking for. First, the rotation of the images doesn't stop and second I don't need something so elaborate. This is the script that I found. Code: <SCRIPT LANGUAGE="JavaScript">
<!--
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var rel="nofollow" target=0;
if (document.images.myImage)
rel="nofollow" target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
rel="nofollow" target=document.getElementById("myImage");
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 5000);
}
else
{
setTimeout("swapPicture()", 500);
}
}
}
setTimeout("swapPicture()", 5000);
//-->
</SCRIPT>
Thanks I want a code that changes text (of maybe a div) after 10 seconds. So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over. THANKS topic has been answered
know why does window.open take atlst 2-3 seconds, only to open even a simple blank page? in my code, i load a page on window.open and increament a counter . but it takes 2-3 seconds and in meantime user is closing new opened window, so counter val is not correct. i cannt stop user from closing new window when it is loading, which is long given what it is doing-- see sample here from Microsoft site - simple window open taking 2-3 secs.. looks to be long. http://samples.msdn.microsoft.com/wo...ew/wind_02.htm thank in advance Hi, I've built a sorting table for what will (hopefully) be a leaderboard for Forza 4. I have the table sorted properly and my current script (within the table) adds up all three T columns and brings the total to 72.001 as expected, woot! Where I'm stuck is converting the 72.001 to 1 minute 12.001 seconds (1:12.001) and I need to have it include the thousandths since the game gives that information. Once I get the JS going for the top row I can copy down Any advice on converting this is greatly appreciated and I Bolded the JS I'm referring to: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Forza Motorsport 4 FRS Leaderboard</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="sortable.js"></script>
<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}
table thead {
cursor: pointer;
}
table thead tr,
table tfoot tr {
background: #c0c0c0;
}
table tbody tr {
background: #f0f0f0;
}
td, th {
border: 1px solid white;
}
</style>
</head>
<body>
<table cellspacing="3" cellpadding="4" class="" id="myTable">
<thead>
<tr>
<th class="c1">DRIVER</th>
<th class="c2">1</th>
<th class="c2">2</th>
<th class="c2">3</th>
<th class="c6">TOTAL</th>
<th class="c5">DIVISION</th>
<th class="c7">CONTROLLER</th>
</tr>
</thead>
<tbody>
<tr id="SubTable1" class="r1">
<td class="c1">Driver Name 1</td>
<td class="c2">12.000</td>
<td class="c2">24.000</td>
<td class="c2">36.001</td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('SubTable1').getElementsByTagName('td');
var totalTime = 0.000;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'c2') {
totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
}
}
document.getElementById('SubTable1').innerHTML += totalTime;
</script>
<td class="c5">1</td>
<td class="c7">Wheel</td>
</tr>
<tr class="r2">
<td class="c1">Driver Name 2</th>
<td class="c2">12.100</th>
<td class="c3">24.100</th>
<td class="c4">36.100</th>
<td class="c6">00.000</th>
<td class="c5">2</th>
<td class="c7">Gamepad</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 3</th>
<td class="c2">12.200</th>
<td class="c3">24.200</th>
<td class="c4">36.200</th>
<td class="c6">00.000</th>
<td class="c5">3</th>
<td class="c7">Wheel</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 4</th>
<td class="c2">12.300</th>
<td class="c3">24.300</th>
<td class="c4">36.300</th>
<td class="c6">00.000</th>
<td class="c5">4</th>
<td class="c7">Gamepad</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 5</th>
<td class="c2">12.400</th>
<td class="c3">24.400</th>
<td class="c4">36.400</th>
<td class="c6">00.000</th>
<td class="c5">5</th>
<td class="c7">Wheel</th>
</tr>
</tbody>
</table>
<script type="text/javascript">
var t = new SortableTable(document.getElementById('myTable'), 100);
</script>
</body>
</html>
Oh, and any help on centering the result in the cell (72.001) would be excellent too, thank you. Jerome Hello and thank you for you help, we have a problem in our currently built website, in chrome+firefox the website works great but in IE 7+8+9 the javascript stops working after few seconds or after several commands a user do in the website. the url is : http://www.triver.co.il if any one know what can be the issue it will be great thank you ! Changing Seconds to Hours in Timer Code: <script type="text/javascript">
// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) {
this.this_current_time = this_current_time;
this.this_start_time = this_start_time;
this.this_end_time = this_end_time;
this.this_time_difference = this_time_difference;
this.GetCurrentTime = GetCurrentTime;
this.StartTiming = StartTiming;
this.EndTiming = EndTiming;
}
//Get current time from date timestamp
function GetCurrentTime() {
var my_current_timestamp;
my_current_timestamp = new Date(); //stamp current date & time
return my_current_timestamp.getTime();
}
//Stamp current time as start time and reset display textbox
function StartTiming() {
this.this_start_time = GetCurrentTime(); //stamp current time
document.TimeDisplayForm.TimeDisplayBox.value = 0; //init textbox display to zero
}
//Stamp current time as stop time, compute elapsed time difference and display in textbox
function EndTiming() {
this.this_end_time = GetCurrentTime(); //stamp current time
this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference; //set elapsed time in display box
}
var time_object = new timestamp_class(0, 0, 0, 0); //create new time object and initialize it
//-->
</script>
<form>
<input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
</form>
<form>
<input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
</form>
<form name="TimeDisplayForm">
Elapsed time:
<input type="text" name="TimeDisplayBox" size="6">
seconds
</form>
Hello.. I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button. What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously. How can I obtain this? Whether if it's created in JavaScript or jQuery doesn't matter, I use both... Thanks Hey. I'm working on a simple slideshow made with jQuery, and i need some help now. What i'm trying to do now, is to make it change image every X second. I know how to change image, but i'm kind of stuck trying to find out how to make it "do something" every Xth second... i hope you understand what i mean. Here's an example: (obviously not working..) Code: function slideSwitch() {
//change image...
}
setInterval(slideSwitch, 5000); //make the function slideSwitch execute every 5th second.
If anyone could help me out here, i'd really appreciate it! Also, is there any "else if" function in jQuery? Like in for example PHP, you can use "if", "else if" and "else".. like this: Code: if(){
}else if(){
}else {
}
So is there any function like that? I googled it, and i found out i have to use some kind of plugin for it to work? How do i use it? Thanks in advance, -Nike Hi, I'm trying to adapt a script I found online for a timer that goes in my webpage. The timer counts from 30 seconds down to 0. I've adapted it so that when it reaches 0 it goes back up to 30, but I was wondering how can I make it so that after a certain number of loops through the timer, it executes some other (non-JS) code instead of just doing the timer forever? I've introduced a variable t to try to do this, but when I put in if(t>1) {break} at the bottom, the timer doesn't work properly anymore (it doesn't display a number in the box). Thanks a lot for any help . <script> <!-- // var t=0 var milisec=0 var seconds=30 document.counter.d2.value='30' function display(){ if (milisec<=0){ milisec=9 seconds-=1 } if (seconds<=-1){ milisec=0 seconds=30 t+=1 } else milisec-=1 document.counter.d2.value=seconds+"."+milisec setTimeout("display()",100) } display() --> </script> Hi, I would need your helpful with a code for playing a music or video after 5 seconds launched page. I need a code to say under <body> </body> like autoplay. Regards Bob |
|||||||