Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts

    jquery drop in image onload

    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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    You mean so it will be "over ' the top of regular content? you coudl position .target fixed or absolute with css

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •