Scrolling Div Problem

Salchester · 07-24-2007, 11:03 AM

Heya,

I have the following code that scrolls text contained inside a div, but when I change the text to two images, the div only scrolls to the end of the first image, and doesn't display the second. Why is this?

Code:

<html>
<head><title></title>
<style>
.Pictures
{
  WIDTH: 71px;
  HEIGHT: 51px;
  MARGIN-LEFT: 12px;
  MARGIN-BOTTOM: 12px;
  BORDER: 2px solid RGB(255, 255, 255);
}

#clippedDiv
{
  POSITION: relative;
  WIDTH: 71px;
  HEIGHT: 51px;
  OVERFLOW: hidden;
}
</style>

<script language="JavaScript" type="text/javascript">
// Scroll code
var timeoutID; // global variable to hold the timer

function scrollDiv(inc,dir) { /* inc(rement) is positive or negative, direction is v(ertical) or h(orizontal) */

  if (timeoutID) clearTimeout(timeoutID); // make sure we do not start another timer
  var theDiv=document.getElementById('clippedDiv'); // get the hardcoded div
  if (theDiv) { // does it exist?
    if (dir == "v") theDiv.scrollTop+=inc; /* if vertical scroll increment the scrollTop to move down or up */
    else theDiv.scrollLeft+=inc; // else increment scrollLeft to move right or left
    timeoutID = setTimeout("scrollDiv(" + inc + ",'" + dir + "')", 20); // do it again in 20 miliseconds
  }
}

function stopScroll() { //
  if (timeoutID) clearTimeout(timeoutID); // if we have a timerID clear it
}
</script>
</head>
<body>
<div id="clippedDiv"><img class="Pictures" src="Images/1.bmp"><img class="Pictures"src="Images/2.bmp"></div>
<img "../../images/nav/tri-lft.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(-4, 'h');" onmouseout="stopScroll();">
<img "../../images/nav/tri-rt.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(4, 'h');" onmouseout="stopScroll();">
</body>
</html>

sde · 07-24-2007, 11:19 AM

look at the image tag of your second image. tell us what's wrong with it.

Salchester · 07-24-2007, 11:58 AM

SDE,

What you mean 2.bmp?

redhead · 07-24-2007, 12:35 PM

<img class="Pictures"src="Images/2.bmp">
Now do you see what is wrong, or should it be more specific ?
class="Pictures"src=
Now do you see what is wrong, or should it be more specific ?
="Pictures"s
Now do you see what is wrong, or should it be more specific ?
s"s
Now do you see it ?

Salchester · 07-24-2007, 12:45 PM

SDE,

OK, I have changed the code and put a space in, but the second image still doesn't get displayed, when I scroll to it using the right small image (tri-rt.gif).

It just scrolls to the end of the first image, and THAT'S IT.

Why is this?

Code:

<html>
<head><title></title>
<style>
.Pictures
{
  WIDTH: 71px;
  HEIGHT: 51px;
  MARGIN-LEFT: 12px;
  MARGIN-BOTTOM: 12px;
  BORDER: 2px solid RGB(255, 255, 255);
}

#clippedDiv
{
  POSITION: relative;
  WIDTH: 71px;
  HEIGHT: 51px;
  OVERFLOW: hidden;
}
</style>

<script language="JavaScript" type="text/javascript">
// Scroll code
var timeoutID; // global variable to hold the timer

function scrollDiv(inc,dir) { /* inc(rement) is positive or negative, direction is v(ertical) or h(orizontal) */

  if (timeoutID) clearTimeout(timeoutID); // make sure we do not start another timer
  var theDiv=document.getElementById('clippedDiv'); // get the hardcoded div
  if (theDiv) { // does it exist?
    if (dir == "v") theDiv.scrollTop+=inc; /* if vertical scroll increment the scrollTop to move down or up */
    else theDiv.scrollLeft+=inc; // else increment scrollLeft to move right or left
    timeoutID = setTimeout("scrollDiv(" + inc + ",'" + dir + "')", 20); // do it again in 20 miliseconds
  }
}

function stopScroll() { //
  if (timeoutID) clearTimeout(timeoutID); // if we have a timerID clear it
}
</script>
</head>
<body>
<div id="clippedDiv"><img class="Pictures" src="Images/1.bmp"><img class="Pictures" src="Images/2.bmp"></div>
<img "../../images/nav/tri-lft.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(-4, 'h');" onmouseout="stopScroll();">
<img "../../images/nav/tri-rt.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(4, 'h');" onmouseout="stopScroll();">
</body>
</html>

DJMaze · 07-25-2007, 01:38 PM

Quote:

Originally Posted by http://www.htmlgoodies.com/primers/html/article.php/3478181

Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or JPEG.

So change the images first