jquery drop in image onload

tpeck · 10-31-2011, 09:09 AM

I hope I'm correct to post this query here.

I have a simple jquery drop in image slice of code. How can I make it work such that the "show" part will occur a few seconds after the page is displayed i.e. an onload similar to a SetTimeout function?

Code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
      $("#hide").click(function(){
         $(".target").hide( "drop", 
                     {direction: "up"}, 1000 );
      });
      $("#show").click(function(){
         $(".target").show( "drop", 
                      {direction: "down"}, 1000 );
      });
   });
   </script>
</head>

<body>
   <p>Click on any of the buttons</p>
   <button id="hide"> Hide </button>
   <button id="show"> Show</button> 
   <div class="target">
      <img src="../images/image.gif" alt="jQuery" />
   </div>
</body>
</html>

tpeck · 10-31-2011, 11:58 PM

I've almost got this right. It now hides on page load and then comes into view, and will fade away on closing the window.

But how to get it to do this with content underneath (like a normal popup?).

Code:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
 // hides as soon as the DOM is ready
  $("#show").hide();
 // shows on page loading  
         $(".target").show( "drop", 
                      {direction: "down"}, 1000 );
 // hides on clicking the link  
  $("#hide").click(function(){
         $(".target").hide( "drop", 
                     {direction: "up"}, 1000 );
      });
  });
</script>

DanInMa · 11-01-2011, 03:09 PM

You mean so it will be "over ' the top of regular content? you coudl position .target fixed or absolute with css

tpeck · 11-02-2011, 03:24 AM

OK, I can now get the thing to overlap the page contents and when I click on the "popup" it disappears, but how to invoke the fade in ("#show") on page load?

It now looks like this:

Code:

<html>

<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
  $("#hide").click(function(){
         $(".target").hide( "drop", 
                     {direction: "up"}, 1000 );
      });

  $("#show").click(function(){
         $(".target").show( "drop", 
                      {direction: "down"}, 1000 );
      });

   });
   </script>
<style>
#content {
  position:absolute;top:0px;left:0px;
}
</style>
</head>

<body>
<div id="hide" style="position: absolute; left:100px; top:50px; z-index: 1" class="target">
	<img src="images/image.png" alt="jQuery" /> </div>
</div>
<div id="content">
	<img border="0" src="images/whatever.png" width="500" height="350"> </div>
</body>

</html>