SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Sliding Content

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliding Content

    Sliding Content

    Hi all

    I thought this would be easy but I'm stuck and I can't describe what's really simple so I've drawn a diagram to help.

    http://www.ttmt.org.uk/forum/10_slide/one.gif

    I have a div containing an image like 1 in the diagram

    I only want to show the top of the image like 2 in the diagram

    When I hover over the div I want the image to scroll up to show the bottom of the image like 3 in the diagram

    It seems really simple but I'm completely stuck, any help would be really appreciated.


    untitled


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	   width:700px;
    	 }
    	 ul{
    	   list-style:none;
    	 }
    	 
    	 
    	</style>
    </head>
    
    <body>
      <div id="wrap">
        <ul>
          <li><a href="#" id="one"><img src="img.gif" width="250" height="200"/></a></li>
          
        </ul>
      </div>
      
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
      <script>
        
        $('li').hover(function(){
          $(this).find('img').animate({top: + (-200) + 'px'},200);
        })
        return false;
        
      </script>
      
    </body>
    </html>

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This script will do it for you. The mouseover moves the image holder div up until it reaches the end of its travel. Mouseout sets the whole thing back to zero. The clip and overflow set the viewport size.

    I have attached the image so you can try it out.


    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Image Slider</title>
    <script type="text/javascript">
    <!--
    // global variables
    var currentTop=0, tOut=null, holderObj=null;
    var range= -145, step=50;  // range for this image which is 195px high
    // mouseover handler 
     function moveUp()
      { clearTimeout(tOut);
       // create slide
        currentTop=currentTop-10;
        currentTop=(currentTop<range)? range :currentTop;
       // if out of range end cycle 
        if(currentTop<=range){return; }
          // -----------
        holderObj.style.top=currentTop+"px"; 
       // repeat cycle  
        tOut=setTimeout(moveUp,step);
      }  
    // -------------  
    // mouseout handler 
     function moveDown()
      { clearTimeout(tOut);
       // revert to zero position
        currentTop=0;
        holderObj.style.top=currentTop+"px"; 
       }
    // initialise on page load
     window.onload=function()
      { holderObj=document.getElementById("holder");  
       // apply mouse handlers to image
        var elem=document.getElementById("targImg");
        elem.onmouseover=moveUp;
        elem.onmouseout=moveDown;
      }
    //-->
    </script>
    <style type="text/css">
    <!--
    body    { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
    #msg    { position:absolute; top:160px; left:70px; }
    #outer  { position:absolute; top:200px; left:100px; width:110px; height:50px; border:1px solid #000; overflow:hidden; clip:auto; cursor:pointer; }
    #holder { position:absolute; top:0px; left:4px;  }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="msg">
      Hover within rectangle to change, or outside to restart</div>
    <!-- end msg -->
    <div id="outer">
      <div id="holder">
        <img id="targImg" border="0" src="grad1.jpg" width="99" height="195"></div>
      <!-- end holder -->
    </div>
    <!-- end outer -->
     
    </body>
     
    </html>
    Attached Images Attached Images


Bookmarks

Posting Permissions

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