Sliding Content

JavaScript
1

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.

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


<!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

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.

[HIGHLIGHT=“”]
<!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>