JavaScript - Continuous Image Scrolling

I'm building a website with scrolling images at the top, I managed to find some code which seemed to work fine but then when I uploaded it to the server there were suddenly huge gaps between the images.
www.s-remy.com/B/index.html

here's the code for the scrolling

Code:

<script type="text/javascript">
<!--
// ********** User Defining Area **********

data=[
["scroll1.png","",""],
["scroll3.png","",""]
// no comma at end of last index
]

imgPlaces=40 // number of images visible
imgWidth=50 // width of the images
imgHeight=81 // height of the images
imgSpacer=4 // space between the images

dir=0 // 0 = left, 1 = right

newWindow=0 // 0 = Open a new window for links 0 = no  1 = yes

// ********** End User Defining Area **********

moz=document.getElementById&&!document.all

step=1
timer=""
speed=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}

containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")

containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"

displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"

imgPos= -pic0.width

for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

if(dir==0){imgPos+=pic0.width+imgSpacer} // if left

initPos[i]=imgPos
if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
imgPos+=pic0.width+imgSpacer
}

if(nextPic==data.length){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}

scrollHIS3()
}

timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

nowDivPos[i]=parseInt(currentImage.style.left)

if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}

if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){

if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}

if(nextPic>data.length-1){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}

nextPic++

}
else{
currentImage.style.left=nowDivPos[i]+"px"
}

}
timer=setTimeout("scrollHIS3()",speed)

}

function stopHIS3(){
clearTimeout(timer)
}

function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
newin.focus()
}
}

// add onload="initHIS3()" to the opening BODY tag

// -->

I'm not very familiar with JavaScript so I can't find any issues with it. I've tried changing the imgspace value but it doesn't seem to work?

Hi,
I found the following code on a web site. It displays text as if it were being typed but it only does it once. I have been trying to use various functions to make the effect continuous, i.e. make the header appear as typing text, clear the text, again make the header appear as typing text, clear the text, and so on. I wish this to continue for as long as the web page is open. But I just can't get it to work. I wonder if anyone has any suggestions? I would be very grateful for all help.
[code]
<h2 id="fly">Header</h2>

<script type="text/javascript">

//Use "$" for linebreak
//By default, set to just grab the text from element with ID="fly"
message = document.getElementById("fly").innerHTML; // $ = taking a new line
distance = 50; // pixel(s)
speed = 200; // milliseconds

var txt="",
num=0,
num4=0,
flyofle="",
flyofwi="",
flyofto="",
fly=document.getElementById("fly");


function stfly()
{ for(i=0;i != message.length;i++)
{ if(message.charAt(i) != "$")
txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
else txt += "<br>";
}
fly.innerHTML = txt;
txt = "";
flyofle = fly.offsetLeft;
flyofwi = fly.offsetWidth;
flyofto = fly.offsetTop;
fly2b();
}

function fly2b()
{ if(num4 != message.length)
{ if(message.charAt(num4) != "$")
{ var then = document.getElementById("n" + num4);
then.style.left = flyofle - then.offsetLeft + flyofwi / 2;
then.style.top = flyofto - then.offsetTop + distance;
fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5);
}
num4++;
setTimeout("fly2b()", speed);
}
}

function fly3(target,lef2,num2,top2,num3)
{ if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1))
{ if(lef2 >= 0) lef2 -= num2;
else lef2 += num2 * -1;
if(Math.floor(lef2) != -1)
{ document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2);
}
else
{ document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2 + 1);
}
if(lef2 >= 0) top2 -= num3
else top2 += num3 * -1;
if(Math.floor(top2) != -1)
document.getElementById(target).style.top = Math.floor(top2);
else
document.getElementById(target).style.top = Math.floor(top2 + 1);
setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)
}
}
stfly()

</script>
[code]

I have searched for information on this but so far no luck.

site: http://www.brentpurton.com/TrueSteez

go to the product page

The problem:

I have a set of images that have hover scrolling. The idea is that when you click on the thumbnail image at the bottom in the hover scroll area, a swap image behaviour will change the picture on the shirt.

The real problem is that when I implement the swap image on the thumbnails and preveiw it. They no longer Hover Scroll, they just stay in 1 spot. They do however swap the image.

here is what happens:
http://www.brentpurton.com/TrueSteezSwap

Any Help is apreciated. Thanks in advance

Hi there,

I was wondering of there is any way to have a browser window scroll down when your mouse reaches the bottom of the page?

Any help would be much appreciated,

Thanks

Hello. I am in the process of making a basic game board using javascript. Just a table with a bunch of cells that are blank, soon to be colored. However, what I want to do is create my board and be able to scroll depending on where the mouse cursor is. For example, if it is 100px away from the right side of the screen, then move the board to the right. I am trying to use the information from: here

I can't seem to get it to work. I have checked firebug, set and checked breakpoints, but it never moves and I am not sure why. Could anyone please help? Thank you.

Heres my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style>
            #land {
                table-layout: fixed;
                width: 2500px;
                height: 2500px;
            }
            #land td {
                width: 25px;
                height: 25px;
                border: 1px solid black;
                empty-cells:show;
            }

            #land tr {
                height: 25px;
            }
        </style>
        <script type="text/javascript" src="World/world.js"></script>
        <script type="text/javascript" src="mapscrolling.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body id="mainBody">
        <div id="mainDiv">
        </div>
        <script type="text/javascript" >
            new CursorDivScroll( 'mainDiv', 20, 20 ); // HERES THE REFERENCE!
            
            var i, j;
    body = document.getElementById("mainDiv");

    land = document.createElement("table");
    land.setAttribute("id", "land");
    land.setAttribute("cellspacing", "0");
    land.style.border = "1";

    for(i = 0; i < 100; ++i)
    {
        var row = document.createElement("tr");
        for(j = 0; j < 100; ++j)
        {
            var cell = document.createElement("td");
            cell.appendChild(document.createElement("div")) // tried &nsbd; but didn't work
            row.appendChild(cell);
        }
        land.appendChild(row);
    }

    body.appendChild(land);
        </script>
        
    </body>
</html>

Hi,

I'm looking to create a div which contains a list of news items which can be vertically scrolled through by hovering near the top or the bottom of the div. It will then automatically start scrolling through the content. The nearer to the bottom of the div they position their mouse, the faster the scrolling is.

Is this something which is possible, and if so how can I do this?

Thanks
Curt

+++


is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work.


also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser?

thanks!!!

+++

Hi evey one

I have a problem with javascript . For example I have a link , something like this :<a href="#" title="" class="rating like" onclick="MakeRequestpos()">hi!</a>

When I click on it , the page will scroll up and it's bother me . for example , I scroll the page down and When I click on the link , it'll scroll up .

How can I solve it ?

thanks

I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas?

Thanks in advance

This is what i need to do:

I have a single <DIV> </DIV> for rendering dynamic HTML content. it already has a scrollbar in it when it overflows with text.

I want to be able to prevent the user from selecting text on the DIV, and at the same time, when they click on the DIV and drag the mouse up or down , the HTML document will be scrolled proportionally to the dragging.

i would also like to Hide the Scrollbar (not disable it).


any suggestions?

This is my first javascript code ever and I need a bit of help. :[
Also, forgive the goofy styling for the nested divs; I couldn't figure out how to get them to align horizontally without wrapping =\.

Essentially, I want the links to gradually scroll the containing div to the specified element's position. I wrote this in a roundabout manner for the sake of learning but I'll clean it up once I can get the function to work which... simply will not. Help?

Code:

<html>
<head><title></title>

<script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

  var i = scroll_clipper.pageXOffset;
  function moveToGreen() {
    while (i<slide2.offsetLeft) {
      i++;
      scroll_clipper.pageXOffset++;
      setTimeout('moveToGreen()',100);
      }
  }
	
</script>

</head>
<body>

<a href="javascript:moveToGreen()">Green</a>
<div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" 

id="slide2"></div>

</div> 

</body>
</html>

Hi,

I have the following scrolling table where I do not want the table headers to scroll. I want only the data inside <td></td> to scroll. For some reason that is not happening. Can someone help ? Really appreciate that.

Regards, sbguy

[CODE]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var div, scrollTop, scrollID, direction, imgDirection, scrollID1;

window.onload = function() {
div1 = document.getElementById("div1");
scrollTop = div1.scrollTop;
};
function scrollOnImage() {
if (imgDirection ==1 ) {
if (scrollTop != 0)
scrollTop--;
}
else if (imgDirection == 2) {
if (scrollTop != (div1.scrollHeight - 300))
scrollTop++;
}
div1.scrollTop = scrollTop;
scrollID1 = setTimeout("scrollOnImage()", 10);

}
</script>

</head>
<body>
<br />
<div style="border: solid 1px red; float: left; height:300px; max-height:300px; width:200px; overflow: hidden;" >
<table>
<tr>
<th style="height:20px;"><input type="image" src="images/LGbtn_off.png" alt="img1" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /></th>
<th>1A</th>
<th ><input type="image" src="images/RRbtn_off.png" alt="img2" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" /></th>
</tr>
<tr>
<td colspan="3" style="height:280px; max-height:280px;">
<div id="div1">
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1234</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1235</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1236</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div style="border: solid 1px red; float: left">
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /><br /><br />
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" />
</div>
</body>
</html>
[CODE]

hey guys

i have graphic on the right side of the screen that is not in view and i am scrolling it to the left. Is there away to remove the bottom scrollbar permanently through using a mask or something. if i have an item scrolling from the left the scroll bar does not show, but on the right it does. an help be appreciated.

I need a marquee code that displays images in a continuous vertical cycle.