Problem with a carousel

**acoder** · Mar 20 '08, 10:40 AM

Instead of removing and appending, use replaceChild().

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

**raknin** · Mar 20 '08, 06:53 PM

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

Code:

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

Code:

// |||||||||||||||||||||||||||||||||||||||||||
// | 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?

**acoder** · Mar 20 '08, 09:01 PM

Originally posted by raknin

Can you suggest about good debugger for the javascript?

A useful tool is Firebug (Firefox extension).

**raknin** · Mar 20 '08, 10:10 PM

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]

Code:

// 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();
}

**acoder** · Mar 22 '08, 03:04 PM

Originally posted by raknin

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?

**raknin** · Mar 23 '08, 09:44 AM

Originally posted by acoder

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.

**acoder** · Mar 23 '08, 09:07 PM

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

Problem with a carousel

Problem with a carousel

Comment

Comment

Comment

Comment

Comment

Comment

Comment