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
------- -
<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 -
// |||||||||||||||||||||||||||||||||||||||||||
-
// | 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();
-
}
-
-
-
7 1811
Instead of removing and appending, use replaceChild().
Also, IDs cannot be only numbers. Use a letter/underscore to begin an id.
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 -
<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 : -
-
// |||||||||||||||||||||||||||||||||||||||||||
-
// | 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?
Can you suggest about good debugger for the javascript?
A useful tool is Firebug (Firefox extension).
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] -
// 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,
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?
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.
Glad it's working. Can you post the final working solution?
Post your reply Sign in to post your reply or Sign up for a free account.
Similar topics
117 posts
views
Thread by Peter Olcott |
last post: by
|
28 posts
views
Thread by Jon Davis |
last post: by
|
6 posts
views
Thread by Ammar |
last post: by
| | | | | | | | | | | | | | | | |