www.webdeveloper.com
Results 1 to 3 of 3

Thread: Sliding Content

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    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.


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


    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
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    so you want just the red to show and when they hover over the link it changes from the red tot he green by scolling the image upward?

    have you thought about applying this image as a background to the element "one", then using Jquery to alter the background position of the image via it's css property? -
    http://www.w3schools.com/css/pr_background-position.asp

  3. #3
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    I think this may be of some help, very simliar idea - http://snook.ca/archives/javascript/...ge-animations/

    as matter of fact he's got an example of what you want to do on the demo

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles