asked on

sliding a div horizontal

Hello, I have a div that when I do onmouseover an image, it moves left or right.
When it arrives to left position, it stops, but I dont know how to do to stop my div when its moving to the right and this div is finished. What can I do?
Thanks a lot.

Jordi.

This is the javascript that I have:

<SCRIPT LANGUAGE="JavaScript">

function verScroll(dir, spd, loop) {
loop = true;
direction = "right";
speed = 10;
scrolltimer = null;
if (document.layers) {
var page = eval(document.contentLayer);
}
else {
if (document.getElementById) {
var page= eval("document.getElementById('contentLayer').style");
}
else {
if (document.all) {
var page = eval(document.all.contentLayer.style);
}
}
}
direction = dir;
speed = parseInt(spd);
var x_pos = parseInt(page.left);
      if (loop == true) {
            if (direction == "left") {
            page.left = (x_pos - (speed));
            } else {
                  if (direction == "right" && x_pos < 123) {
                  page.left = (x_pos + (speed));
                  } else {

                  page.left = 123;

                  }
      }
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}
function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}
// End -->
</script>

amit_g

Please provide a working sample including HTML. This function has errors and will not work.

jbadia

ASKER

ok, here you are:

thanks a lot.

<?php require_once('Connections/uklook.php');
include "Connections/session.php";
include "Connections/newsession.php"; ?>
<?php
mysql_select_db($database_uklook, $uklook);
$query_Recordset1 = "SELECT * FROM marca";
$Recordset1 = mysql_query($query_Recordset1, $uklook) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);

?>
<head>
<title>titulo</title>

<script type="text/JavaScript">
var lastObj=null;
function swapImage(obj,strSrc)
{
if(!obj.getAttribute("src2"))obj.setAttribute("src2",obj.src);
obj.src=strSrc;
obj.onclick=function()
{
if(lastObj && lastObj!=this)
{
lastObj.onmouseout=new Function("swapImgRestore(this)");
swapImgRestore(lastObj);
}
this.onmouseout=null;
lastObj=this;
}
}
function swapImgRestore(obj)
{
obj.src=obj.getAttribute("src2");
}
</script>
<SCRIPT LANGUAGE="JavaScript">

function verScroll(dir, spd, loop) {
loop = true;
direction = "right";
speed = 10;
scrolltimer = null;
if (document.layers) {
var page = eval(document.contentLayer);
}
else {
if (document.getElementById) {
var page= eval("document.getElementById('contentLayer').style");
}
else {
if (document.all) {
var page = eval(document.all.contentLayer.style);
}
}
}
direction = dir;
speed = parseInt(spd);
var x_pos = parseInt(page.left);
      if (loop == true) {
            if (direction == "left") {
            page.left = (x_pos - (speed));
            } else {
                  if (direction == "right" && x_pos < 123) {
                  page.left = (x_pos + (speed));
                  } else {

                  page.left = 123;

                  }
      }
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}
function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}
// End -->
</script>

</head>

<body>
<div id="Layer1">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="#D81F2A"></td>
</tr>
</table>
</div>
<div id="Layer2">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="#D81F2A"></td>
</tr>
</table>
</div>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="252" height="89"><div align="left"><img src="images/logo.gif" width="240" height="89"></div></td>
<td width="40"> </td>
<td width="527"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="532" height="89" align="right">
<param name="movie" value="swf/menu%20800x600.swf">
<param name="quality" value="high">
<embed src="swf/menu%20800x600.swf" width="532" height="89" align="right" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
</table>

<div id="contentLayer" style="position:absolute; width:300px; z-index:1; left: 123px; top: 91px">
<table width="" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="#D81F2A"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="row"><table height="80" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<?php $i =1;
      do { ?>
<td valign="top" onMouseOver="turnOn('home<?php echo $i; ?>');" onMouseOut="turnOff('home<?php echo $i; ?>');"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" valign="top"><div align="center"><img src="imatges/fletxaOff.gif" name="home<?php echo $i; ?>" width="15" height="11" class="imgTrans" id="home<?php echo $i; ?>"/></div></td>
</tr>
<tr>
<td height="1" bgcolor="#D81F2A"></td>
</tr>
</table>
<a href="mig.php?marca=<?php echo $row_Recordset1['marca_id']; ?>" target="mig"></a>
<table width="100%" height="55" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><a href="mig.php?marca=<?php echo $row_Recordset1['marca_id']; ?>" target="mig"><img src="imatges/separador.gif" width="5" height="11" border="0" /></a><a href="mig.php?marca=<?php echo $row_Recordset1['marca_id']; ?>" target="mig"><img src="imatges/<?php echo $row_Recordset1['marca']; ?>" alt="<?php echo $row_Recordset1['marcaOver']; ?>" name="Image1" border="0" id="Image1" onMouseOver="swapImage(this, 'imatges/<?php echo $row_Recordset1['marcaOver']; ?>')" onMouseOut="swapImgRestore(this)" /><img src="imatges/separador.gif" width="5" height="11" border="0" /></a></td>
</tr>
</table>
</div></td>
<?php $i++; } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</tr>

</table></th>
</tr>
</table>
</div>
<div id="content" style="position:absolute; width:208px; z-index:3; left: -86px; top: 90px; height: 83px;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th bgcolor="#FFFFFF" scope="row"><div align="right"><a href="#" class="Estilo1" onMouseOver="verScroll('left','1','true')" onMouseOut="stopScroll()"><img src="imatges/fletxa-izq.gif" width="14" height="20" border="0" /></a></div></th>
</tr>
</table>
</div>
<div id="layer" style="position:absolute; width:208px; z-index:3; left: 892px; top: 90px; height: 84px;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th bgcolor="#FFFFFF" scope="row"><div align="left"><span class="Estilo1"><a href="#" onMouseOver="verScroll('right','1','true')" onMouseOut="stopScroll()"><img src="imatges/fletxa-dreta.gif" width="14" height="20" border="0" /></a></span></div></th>
</tr>
</table>
</div>
</body>
</html>

bruno

please provide the generated source code, the source from View Source in the browser without the PHP.

ASKER CERTIFIED SOLUTION

amit_g

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jbadia

ASKER

NICE JOB, THANK YOU VERY MUCH. IT GOES RIGHT.

JORDI