Problem with a carousel

82 New Member

Hi

I have a carousel script. I want to load the carousel with a new set of pictures every time I press a button. The problem that I have that the script append the new pictures to the olds one and the next and previous buttons are added again and again. Please help meto solve the problem. The full html and javascript are attached for your conviniet.

HTML
-------

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

<META http-equiv="Content-Language" content="en-us">

<TITLE>DHTML Image Viewer</TITLE>

<script type="text/javascript" language="JavaScript" src="DHTMLImageViewer_v1.js"></script>

<script language="javascript" type="text/javascript">

function test(){

//window.location.reload();

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;";

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"

//imageList="";

imageList=document.getElementById("ID").value;

InitializePage(imageList)

}

</script>

<STYLE>

//body     {font-family: Tahoma; font-size: 10pt; color:white; background-color:white}

//a          { font-family: Tahoma; font-size: 10pt; text-decoration: none; color: white }

//a:link    { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration: none }

//a:hover { font-family: Tahoma; font-size: 10pt; color: gray; text-decoration: none }

</STYLE>

</HEAD>

<BODY>
 
<input name="test" id="ID" type="text" size="255">

<input name="test" id="test" type="button" onclick="test();" value="search">

</BODY>

</HTML>

Javascript

Expand|Select|Wrap|Line Numbers

 
// |||||||||||||||||||||||||||||||||||||||||||

// | Set Position, Dimensions And Color HERE  |

// |||||||||||||||||||||||||||||||||||||||||||
 
// Image Viewer Dimensions settings (pixels):

    var PagePositionLEFT        = 100;             // Set position of Image viewer from LEFT of page

    var PagePositionTOP            = 150;             // Set position of Image viewer from TOP of page
 
    var InterFaceWidth             = 546;             // Set [Overall] WIDTH |||| minimum length=300

    var ViewingAreaHeight        = 160;             // Set [Viewing area] HEIGHT |||| minimum length=10
 
    var OverALLBorder            = 'on';             // Set [Over All] Border 'on' or '' (blank) for off
 
// Image Viewer Colors [example: 'red' or '#FF0000']

    var OverALLBorderColor        = 'black';         // Set color of [Over All] Border
 
    var ControlsBGColor            = 'gray';         // Set color of [Control Area] Background |||| use '' = no color

    var ControlsFontColor        = 'white';         // Set color of [Control Area] Font
 
    var ViewAreaBGColor            = 'gray';        // Set color of [Viewing Area] Background |||| use '' = no color
 
    var ImageBorderColor        = 'white';         // Set color of [Image] Border
 
    var ButtonBGColor            = 'black';         // Set color of [Button] Background

    var ButtonFontColor            = 'white';         // Set color of [Button] Font

    var ButtonBorderColor        = 'white';         // Set color of [Button] border
 
// Image Alignment

    var ImageValignment        = 'middle';         // Set verticle alignment within viewer (options: top, bottom. middle)
 
// :::::::::::::::::::::::::

// ::: Testing var      ::::

// :::::::::::::::::::::::::
 
var ImageArray = new Array(100);

var manufacture = new Array(100);

var modelName = new Array(100);

var emptyList;

var imageList;

var isFirstLoad=0;

// :::::::::::::::::::::::::

// ::: Initialize Page ::::

// :::::::::::::::::::::::::

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;";

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"

//imageList="";

//window.onload=InitializePage;

//window.onload=InitializePage;
 
function InitializePage(imageList)

{

// Call the ajax function that return a string with all models found in the searc
 
// Install Image Viewer HTML file name holder Input element

FirstDIV=document.createElement('DIV')

document.body.appendChild(FirstDIV)

FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+

"<DIV id='interface'>" + 

"    <DIV id='ViewingArea'>" + 

"    <TABLE border='0' cellpadding='2'>" + 

"        <TR  id='ImageContainer'>" + 

"        </TR>" + 

"    </TABLE>" + 

"    </DIV>" + 

"    <DIV id='controls'>" + 

"        <DIV id='Verbiage'>" + 

"        </DIV>" + 

"        <DIV id='ScrollLeft'>" + 

"            <INPUT onclick='moveLeft()' type='button' value='Previous' id='previous'>" + 

"        </DIV>" + 

"        <DIV id='ScrollRight'>" + 

"            <INPUT onclick='moveRight()' type='button' value='Next' id='next'>" + 

"        </DIV>" + 

"    </DIV>" + 

"</DIV>"

if (imageList != "") {

    var splitarray = imageList.split(";");

        for (i=0;i < splitarray.length;i++) {

            var splitarray1 = splitarray[i].split(":");

            TDElement=document.createElement("TD");

TDElement.innerHTML="<IMG border='0' width=\"100\" height=\"100\" src='Thumbnails/"+splitarray1[0]+"'><br>"+splitarray1[1]+"<br>"+splitarray1[2]+"</IMG>" ;

            document.getElementById('ImageContainer').appendChild(TDElement) ;

        emptyList=0;

        }

} else {

emptyList=1;

}
 
SElement=document.getElementById('Verbiage')

SElement.innerHTML='<br><font size=2> Use arrows to scroll Models | Click on the Model picture for details</font>'

setStyles();

setIDs();

attachEventhandlers();

if (emptyList == 1) 

alert("No Models found,Please try another search.");

}
 
function setStyles()

{

// set Image Scroller DIVs width Dimensions and position type

document.getElementById('interface').style.position="absolute";

document.getElementById('interface').style.width=InterFaceWidth+"px";

document.getElementById('interface').style.overflow="hidden";
 
DIVCol=document.getElementById('interface').getElementsByTagName('DIV');

if (DIVCol!=null)

    {for (p=0; p<DIVCol.length; p++)

        {

        DIVCol.item(p).style.position="absolute";

        DIVCol.item(p).style.width=InterFaceWidth+"px";

        if(DIVCol.item(p).id=="ScrollRight")

            {

            DIVCol.item(p).style.width=InterFaceWidth-40+"px";

            DIVCol.item(p).style.textAlign="right";

            }

        }

    }
 
document.getElementById('ScrollLeft').style.width=40+"px";

document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
 
// set z-index

document.getElementById('interface').style.zIndex=1;

document.getElementById('ViewingArea').style.zIndex=2;

document.getElementById('controls').style.zIndex=2;

document.getElementById('Verbiage').style.zIndex=5;

document.getElementById('ScrollLeft').style.zIndex=4;

document.getElementById('ScrollRight').style.zIndex=4;
 
// set positions (left)

document.getElementById('ViewingArea').style.left=0+"px";

document.getElementById('controls').style.left=0+"px";

document.getElementById('ScrollLeft').style.left=2+"px";

document.getElementById('ScrollRight').style.left=38+"px";

document.getElementById('Verbiage').style.left=40+"px";
 
// set positions (top)

document.getElementById('ViewingArea').style.top=0+"px";

document.getElementById('ScrollLeft').style.top=5+"px";

document.getElementById('ScrollRight').style.top=5+"px";

document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";
 
// set Image Scroller DIVs height Dimensions

document.getElementById('controls').style.height=35+"px";

document.getElementById('Verbiage').style.height=35+"px";

document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";

document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";
 
// Set Viewer Page position

document.getElementById('interface').style.left= PagePositionLEFT+"px";

document.getElementById('interface').style.top= PagePositionTOP+"px";
 
// text alignment for controller text

document.getElementById('Verbiage').style.textAlign='center';
 
// image Viewer Color Scheme

document.getElementById('controls').style.backgroundColor=ControlsBGColor;

document.getElementById('Verbiage').style.color=ControlsFontColor;

document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
 
if(OverALLBorder=='on'){

document.getElementById('interface').style.borderStyle='solid';

document.getElementById('interface').style.borderWidth="1px";

document.getElementById('interface').style.borderColor=OverALLBorderColor;}
 
// Image Styles

IMGCol=document.getElementById('interface').getElementsByTagName('IMG');

if (IMGCol!=null)

    {for (im=0; im<IMGCol.length; im++)

        {

        IMGCol.item(im).style.borderStyle='solid';

        IMGCol.item(im).style.borderWidth="1px";

        IMGCol.item(im).style.borderColor=ImageBorderColor;

        }

    }
 
// Button Styles

BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');

if (BTNCol!=null)

    {for (p=0; p<BTNCol.length; p++)

        {

        BTNCol.item(p).style.borderStyle='solid';

        BTNCol.item(p).style.borderWidth="1px";

        BTNCol.item(p).style.backgroundColor=ButtonBGColor;

        BTNCol.item(p).style.color=ButtonFontColor;

        BTNCol.item(p).style.borderColor=ButtonBorderColor;

        }

    }
 
// Table Cell Styles

TDCol=document.getElementById('interface').getElementsByTagName('TD');

if (TDCol!=null)

    {for (td=0; td<TDCol.length; td++)

        {TDCol.item(td).style.verticalAlign=ImageValignment;}}

}
 
// ::::::::::::::::::::::::

// ::: Event Handlers ::

// ::::::::::::::::::::::::
 
function onclickHandler(e)

{

// Browser compatibility code

    var targ;

    if (!e){var e = window.event;}
 
    if (e.target)

        {    targ = e.target;

            var xpos=(e.pageX); var ypos=(e.pageY);}
 
    else if (e.srcElement)

        {    var xpos=(event.x);    var ypos=(event.y);

            targ = e.srcElement;}
 
// Strip file name from image src

    var spath=targ.getAttribute('src');

    wholePathLength=spath.length;

    strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;

    ifm= spath.substring(strippedPathLength+1,wholePathLength);

// Store file name in holder for use by popup windoow

    document.getElementById('fileNameHolder').value=ifm;

// Open the window at location of thumbnail image

    var pos = "left="+xpos+",top="+ypos;

    window.open("imageViewerPopup.htm","imageWindow","width=18,height=18,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);

}
 
// Attach event handlers to all images within container

function attachEventhandlers()

{

ContainerElement=document.getElementById('ImageContainer')

TDCol=ContainerElement.getElementsByTagName('TD');
 
if (TDCol!=null)

    {for (l=0; l<TDCol.length; l++)

        {

        IMGCol=TDCol.item(l).getElementsByTagName("IMG");

        IMGCol.item(0).style.cursor="pointer"

        IMGCol.item(0).setAttribute('id',"Image"+l)

        IMGCol.item(0).onclick=onclickHandler;

        }

    }

}
 
// Set ID's for all table cells

function setIDs()

{

ContainerElement=document.getElementById('ImageContainer')

TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)

    {    for (i=0; i<TDCol.length; i++)

            {TDCol.item(i).setAttribute('id',i)}

    }

}
 
// :::::::::::::::::::::::::

// ::: Scroll Functions ::

// :::::::::::::::::::::::::
 
function moveLeft()

{

ContainerElement=document.getElementById("ImageContainer");

firstTD=document.getElementById("0");

dupfirstTD=firstTD.cloneNode(false)

dupfirstTD.innerHTML=firstTD.innerHTML

ContainerElement.removeChild(firstTD);

ContainerElement.appendChild(dupfirstTD);

setStyles; setIDs();attachEventhandlers();

}
 
function moveRight()

{

lastTD=document.getElementById(TDCol.length-1);

duplastTD=lastTD.cloneNode(false)

duplastTD.innerHTML=lastTD.innerHTML

firstTD=document.getElementById("0");

ContainerElement=document.getElementById("ImageContainer");

ContainerElement.insertBefore(duplastTD,firstTD);

ContainerElement.removeChild(lastTD);

setStyles; setIDs();attachEventhandlers();

}

Mar 18 '08 #1

Subscribe Reply

1926

acoder

16,027

Recognized Expert Moderator MVP

Instead of removing and appending, use replaceChild().

Also, IDs cannot be only numbers. Use a letter/underscore to begin an id.

Mar 20 '08 #2

raknin

New Member

Hi,

I tried to use what you suggest but I still have a problem, it does't do anything can you take a look at it. Please look at the moveLeft and moveRight function and tell what is wrong.

HTML

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

<META http-equiv="Content-Language" content="en-us">

<TITLE>Product viewer</TITLE>

<script type="text/javascript" language="JavaScript" src="serachResultView_v3.js"></script>

<script language="javascript" type="text/javascript">

var isFirstLoad=0;

function test(){

imageList=document.getElementById("ID").value;

    if (isFirstLoad) {

        InitializePage(imageList);

        isFirstLoad=1;

}

</script>

</HEAD>

<BODY>
 
<input name="test" id="ID" type="text" size="255">

<input name="test" id="test" type="button" onclick="test();" value="search">

</BODY>

</HTML>

javascript:

Expand|Select|Wrap|Line Numbers

  
// |||||||||||||||||||||||||||||||||||||||||||

// | Set Position, Dimensions And Color HERE  |

// |||||||||||||||||||||||||||||||||||||||||||
 
// Image Viewer Dimensions settings (pixels):

    var PagePositionLEFT        = 100;             // Set position of Image viewer from LEFT of page

    var PagePositionTOP            = 150;             // Set position of Image viewer from TOP of page
 
    var InterFaceWidth             = 546;             // Set [Overall] WIDTH |||| minimum length=300

    var ViewingAreaHeight        = 160;             // Set [Viewing area] HEIGHT |||| minimum length=10
 
    var OverALLBorder            = 'on';             // Set [Over All] Border 'on' or '' (blank) for off
 
// Image Viewer Colors [example: 'red' or '#FF0000']

    var OverALLBorderColor        = 'black';         // Set color of [Over All] Border
 
    var ControlsBGColor            = 'gray';         // Set color of [Control Area] Background |||| use '' = no color

    var ControlsFontColor        = 'white';         // Set color of [Control Area] Font
 
    var ViewAreaBGColor            = 'gray';        // Set color of [Viewing Area] Background |||| use '' = no color
 
    var ImageBorderColor        = 'white';         // Set color of [Image] Border
 
    var ButtonBGColor            = 'black';         // Set color of [Button] Background

    var ButtonFontColor            = 'white';         // Set color of [Button] Font

    var ButtonBorderColor        = 'white';         // Set color of [Button] border
 
// Image Alignment

    var ImageValignment        = 'middle';         // Set verticle alignment within viewer (options: top, bottom. middle)
 
// :::::::::::::::::::::::::

// ::: Testing var      ::::

// :::::::::::::::::::::::::
 
var ImageArray = new Array(100);

var manufacture = new Array(100);

var modelName = new Array(100);

var TDElement = new Array(100);

var emptyList;

var imageList;

var isFirstLoad=0;

var last_number_of_elements=0;

// The current location of the first element in the list,the list start from 0 position

var current_location=0;

// The max number of pictures that the user see

var view_pic_number=5;

// :::::::::::::::::::::::::

// ::: Initialize Page ::::

// :::::::::::::::::::::::::

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;MichaelFalatineBlueMetalHorse.jpg:vendor0:product0;MichaelFalatineColdCalmPeace.jpg:vendor1:product1;MichaelFalatineDecision.jpg:vendor2:product2;";

//imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"

//imageList="";

//window.onload=InitializePage;

//window.onload=InitializePage;
 
function InitializePage(imageList)

{

// Call the ajax function that return a string with all models found in the searc
 
// Install Image Viewer HTML file name holder Input element
 
FirstDIV=document.createElement('DIV')

document.body.appendChild(FirstDIV)

FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+

"<DIV id='interface'>" + 

"    <DIV id='ViewingArea'>" + 

"    <TABLE border='0' cellpadding='2'>" + 

"        <TR  id='ImageContainer'>" + 

"        </TR>" + 

"    </TABLE>" + 

"    </DIV>" + 

"    <DIV id='controls'>" + 

"        <DIV id='Verbiage'>" + 

"        </DIV>" + 

"        <DIV id='ScrollLeft'>" + 

"            <INPUT onclick='moveLeft()' type='button' value='Previous' id='previous'>" + 

"        </DIV>" + 

"        <DIV id='ScrollRight'>" + 

"            <INPUT onclick='moveRight()' type='button' value='Next' id='next'>" + 

"        </DIV>" + 

"    </DIV>" + 

"</DIV>"
 
//clear the previous list
 
if (last_number_of_elements != 0 && isFirstLoad == 1 && imageList != "") {

 for (var i=0; i<last_number_of_elements;i++) {

//    alert(document.getElementById('ImageContainer').TDElement[i]);

    document.getElementById('ImageContainer').removeChild(TDElement[i]);    

    TDElement[i]="";  

 }

}
 
// Create the new  list
 
if (imageList != "") {

    var splitarray = imageList.split(";");

        last_number_of_elements=splitarray.length;

        for (i=0;i < splitarray.length;i++) {

            var splitarray1 = splitarray[i].split(":");

            TDElement[i]=document.createElement("TD");

TDElement[i].innerHTML="<IMG border='0' width=\"100\" height=\"100\" src='Thumbnails/"+splitarray1[0]+"'><br>"+splitarray1[1]+"<br>"+splitarray1[2]+"</IMG>" ;

              document.getElementById('ImageContainer').appendChild(TDElement[i]) ;           

        emptyList=0;

        }

} else {

   emptyList=1;

   alert("No Models found,Please try another search.");

}
 
SElement=document.getElementById('Verbiage')

SElement.innerHTML='<br><font size=2> Use arrows to scroll Models | Click on the Model picture for details</font>'

setStyles();

setIDs();

attachEventhandlers();

isFirstLoad=1;

}
 
function setStyles()

{

// set Image Scroller DIVs width Dimensions and position type

document.getElementById('interface').style.position="absolute";

document.getElementById('interface').style.width=InterFaceWidth+"px";

document.getElementById('interface').style.overflow="hidden";
 
DIVCol=document.getElementById('interface').getElementsByTagName('DIV');

if (DIVCol!=null)

    {for (p=0; p<DIVCol.length; p++)

        {

        DIVCol.item(p).style.position="absolute";

        DIVCol.item(p).style.width=InterFaceWidth+"px";

        if(DIVCol.item(p).id=="ScrollRight")

            {

            DIVCol.item(p).style.width=InterFaceWidth-40+"px";

            DIVCol.item(p).style.textAlign="right";

            }

        }

    }
 
document.getElementById('ScrollLeft').style.width=40+"px";

document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
 
// set z-index

document.getElementById('interface').style.zIndex=1;

document.getElementById('ViewingArea').style.zIndex=2;

document.getElementById('controls').style.zIndex=2;

document.getElementById('Verbiage').style.zIndex=5;

document.getElementById('ScrollLeft').style.zIndex=4;

document.getElementById('ScrollRight').style.zIndex=4;
 
// set positions (left)

document.getElementById('ViewingArea').style.left=0+"px";

document.getElementById('controls').style.left=0+"px";

document.getElementById('ScrollLeft').style.left=2+"px";

document.getElementById('ScrollRight').style.left=38+"px";

document.getElementById('Verbiage').style.left=40+"px";
 
// set positions (top)

document.getElementById('ViewingArea').style.top=0+"px";

document.getElementById('ScrollLeft').style.top=5+"px";

document.getElementById('ScrollRight').style.top=5+"px";

document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";
 
// set Image Scroller DIVs height Dimensions

document.getElementById('controls').style.height=35+"px";

document.getElementById('Verbiage').style.height=35+"px";

document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";

document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";
 
// Set Viewer Page position

document.getElementById('interface').style.left= PagePositionLEFT+"px";

document.getElementById('interface').style.top= PagePositionTOP+"px";
 
// text alignment for controller text

document.getElementById('Verbiage').style.textAlign='center';
 
// image Viewer Color Scheme

document.getElementById('controls').style.backgroundColor=ControlsBGColor;

document.getElementById('Verbiage').style.color=ControlsFontColor;

document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
 
if(OverALLBorder=='on'){

document.getElementById('interface').style.borderStyle='solid';

document.getElementById('interface').style.borderWidth="1px";

document.getElementById('interface').style.borderColor=OverALLBorderColor;}
 
// Image Styles

IMGCol=document.getElementById('interface').getElementsByTagName('IMG');

if (IMGCol!=null)

    {for (im=0; im<IMGCol.length; im++)

        {

        IMGCol.item(im).style.borderStyle='solid';

        IMGCol.item(im).style.borderWidth="1px";

        IMGCol.item(im).style.borderColor=ImageBorderColor;

        }

    }
 
// Button Styles

BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');

if (BTNCol!=null)

    {for (p=0; p<BTNCol.length; p++)

        {

        BTNCol.item(p).style.borderStyle='solid';

        BTNCol.item(p).style.borderWidth="1px";

        BTNCol.item(p).style.backgroundColor=ButtonBGColor;

        BTNCol.item(p).style.color=ButtonFontColor;

        BTNCol.item(p).style.borderColor=ButtonBorderColor;

        }

    }
 
// Table Cell Styles

TDCol=document.getElementById('interface').getElementsByTagName('TD');

if (TDCol!=null)

    {for (td=0; td<TDCol.length; td++)

        {TDCol.item(td).style.verticalAlign=ImageValignment;}}

}
 
// ::::::::::::::::::::::::

// ::: Event Handlers ::

// ::::::::::::::::::::::::
 
function onclickHandler(e)

{

// Browser compatibility code

    var targ;

    if (!e){var e = window.event;}
 
    if (e.target)

        {    targ = e.target;

            var xpos=(e.pageX); var ypos=(e.pageY);}
 
    else if (e.srcElement)

        {    var xpos=(event.x);    var ypos=(event.y);

            targ = e.srcElement;}
 
// Strip file name from image src

    var spath=targ.getAttribute('src');

    wholePathLength=spath.length;

    strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;

    ifm= spath.substring(strippedPathLength+1,wholePathLength);

// Store file name in holder for use by popup windoow

    document.getElementById('fileNameHolder').value=ifm;

// Open the window at location of thumbnail image

    var pos = "left="+xpos+",top="+ypos;

    window.open("imageViewerPopup.htm","imageWindow","width=18,height=18,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);

}
 
// Attach event handlers to all images within container

function attachEventhandlers()

{

ContainerElement=document.getElementById('ImageContainer')

TDCol=ContainerElement.getElementsByTagName('TD');
 
if (TDCol!=null)

    {for (l=0; l<TDCol.length; l++)

        {

        IMGCol=TDCol.item(l).getElementsByTagName("IMG");

        IMGCol.item(0).style.cursor="pointer"

        IMGCol.item(0).setAttribute('id',"Image"+l)

        IMGCol.item(0).onclick=onclickHandler;

        }

    }

}
 
// Set ID's for all table cells

function setIDs()

{

ContainerElement=document.getElementById('ImageContainer')

TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)

    {    for (i=0; i<TDCol.length; i++)

            {TDCol.item(i).setAttribute('id',i)}

    }

}
 
// :::::::::::::::::::::::::

// ::: Scroll Functions ::

// :::::::::::::::::::::::::
 
function moveLeft()

{

    var ContainerElement=document.getElementById('ImageContainer');

    var firstElement=ContainerElement.cloneNode(TDElement[0]);

    for (i=1;i<=last_number_of_elements-2;i++) {      

        ContainerElement.replaceChild(TDElement[i],TDElement[i-1]) ;

    }

    ContainerElement.replaceChild(firstElement,TDElement[last_number_of_elements-1]) ;

 setStyles(); setIDs();attachEventhandlers();

}

function moveRight()

{

    var ContainerElement=document.getElementById('ImageContainer');

    var lastElement=ContainerElement.cloneNode(TDElement[last_number_of_elements-1]);

    for (i=0;i<=last_number_of_elements-2;i++) {      

        ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;

    }

 ContainerElement.replaceChild(lastElement,TDElement[0]) ;

 setStyles(); setIDs();attachEventhandlers();

}

Can you tell me what is wrong I can not find the problem.

Can you suggest about good debugger for the javascript?

Mar 20 '08 #3

acoder

16,027

Recognized Expert Moderator MVP

Can you suggest about good debugger for the javascript?

A useful tool is Firebug (Firefox extension).

Mar 20 '08 #4

raknin

New Member

Acoder,

I updated the moveright function but for some reason it give me an error that I don't understand from where it comes: The idea is to create a cyclic behaviour in which each time we make shift to right i.e

A[0]-> A[1] -> A[2] -> ... A[n-1] -> A[N]-> A[0]

Expand|Select|Wrap|Line Numbers

 
// last_number_of_elements = is the number of the element in the list

// The list come in the format: x:x:x;y:y:y; .....

function moveRight()

{

      var ContainerElement=document.getElementById('ImageContainer');

       for (i=0;i<=last_number_of_elements-2;i++) {

         if (i==0) {

           ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;

         } else {

          var shiftRight=ContainerElement.cloneNode(TDElement[i+1]);

           ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;  

         }      

       }

     ContainerElement.replaceChild(shiftRight,TDElement[0]) ;

     setStyles(); setIDs();attachEventhandlers();

}

Mar 20 '08 #5

acoder

16,027

Recognized Expert Moderator MVP

Acoder,

I updated the moveright function but for some reason it give me an error that I don't understand from where it comes:

What's the error message and on which line?

Mar 22 '08 #6

raknin

New Member

What's the error message and on which line?

Thanks, acoder you are the man. In the meanwhile I rewrite the code both the next and previous function and evrything is working fine now.

Mar 23 '08 #7

acoder

16,027

Recognized Expert Moderator MVP

Glad it's working. Can you post the final working solution?

Mar 23 '08 #8

Problem with a carousel

Similar topics