Solved

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

Posted on 2011-02-19
6
678 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

685 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