Sliding Content

**ttmt** · Apr 7, 2011 09:51

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>

**AllanP** · Apr 8, 2011 22:37

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>

User Tag List

Thread: Sliding Content

Thread Tools

Display

Hybrid View

Sliding Content

Bookmarks

Bookmarks

Posting Permissions