Solved

Jscript sleep function - hide div for a minute and display again

Posted on 2011-02-19
6
656 Views
Last Modified: 2012-06-27
Hi,
I trying to write a jscript function which would be called from a button inside a div
let say there is <div = 'iframe-div> which button insdie </div>'
<div id = 'waiting-div'> </div>

What I want the function to do is to onClick= 'display waiting-div for 1minute and hide 'iframe-div''
after one minute - hide waiting-div and display iframe-di

It would be great if some one could help me out with it.

Thanks
 
0
Comment
Question by:SameerMirza
  • 3
  • 2
6 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 400 total points
ID: 34933758

Are you looking for something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26833634.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

var timer;

jQuery(document).ready( function () {

  $("#show-me").hide();
  $("#hide-me").hide();

  $("#click-me").click( function() {
    $("#show-me").show();
    $("#hide-me").hide();
    timer = setInterval( decrement, 99 );
    $("#countdown").text( "6.0" );
  });

});

function decrement() {
  var countdown = $("#countdown");
  var remaining = parseFloat( countdown.text() ) - 0.1;
  if ( remaining > 0 ) {
    countdown.text( remaining.toFixed(1) );
  } else {
    clearTimeout( timer );
    countdown.text( "expired" );
    $("#show-me").hide();
    $("#hide-me").show();
  }
}

</script>
</head>
<body>

<div>Timer: <span id="countdown"></span></div>

<input id="click-me" type="button" value="Click Me" /> 

<div id="show-me" style="background-color: #0f0">Show</div>
<div id="hide-me" style="background-color: #f00">Hide</div>

</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 34933881
please confirm the iframe and the parent page have same domain and protocol
0
 

Author Comment

by:SameerMirza
ID: 34933978
Sory proculopsis, I can only test it in an hour
Leakim971, yes it is on same page ( if i understand your quedtion?)
Iframe location could be anything
Basically its not realy about iframes
Its about two divs
In one there is iframe - the page we have thd button in is not in parent page but iframe locatiom/src
I think when you have ifeame in div in parent, it all becomes part of parent page?
So the control -> doc.getelement.. Etc should work
Only problem is how would u say
doc.getelementById('iframe-div').display = 'hidden'
.........('wait-div').display = 'block'

Wait 60 sec

Display divs other way around

My problem is that i dont know how say wait...
Sleep
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 34934004
I think @Proculopsis answer you correctly.

basically a sleep is :



function beginning() {
   // do something
   // do something
   // do something
   setTimeout("afterTheSleep()", 5000); // sleeping 5 seconds
}

function afterTheSleep() {
   // do something
   // do something
   // do something
}

Open in new window

0
 

Author Closing Comment

by:SameerMirza
ID: 34942859
thanks.
0
 

Author Comment

by:SameerMirza
ID: 34943155
sorry guys its not working when calling from a different page
basically if I put a button in another page, call it in Iframe, onClick the function doesnt run
Get the error message 'object expacted'

Doesn't it become a part of the same page when you call a page in iframe?
shouldnt the controls work that way?
I have tried both ways i.e from different website/domain and local dir.
It would be ideal if you could provide any assistance in this regards
thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now