469,315 Members | 1,577 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,315 developers. It's quick & easy.

Problem with a carousel

82
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
  1. <HTML>
  2. <HEAD>
  3. <META http-equiv="Content-Language" content="en-us">
  4. <TITLE>DHTML Image Viewer</TITLE>
  5. <script type="text/javascript" language="JavaScript" src="DHTMLImageViewer_v1.js"></script>
  6. <script language="javascript" type="text/javascript">
  7. function test(){
  8. //window.location.reload();
  9. //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;";
  10. //imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"
  11. //imageList="";
  12. imageList=document.getElementById("ID").value;
  13. InitializePage(imageList)
  14. }
  15. </script>
  16. <STYLE>
  17. //body     {font-family: Tahoma; font-size: 10pt; color:white; background-color:white}
  18. //a          { font-family: Tahoma; font-size: 10pt; text-decoration: none; color: white }
  19. //a:link    { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration: none }
  20. //a:hover { font-family: Tahoma; font-size: 10pt; color: gray; text-decoration: none }
  21. </STYLE>
  22. </HEAD>
  23. <BODY>
  24.  
  25. <input name="test" id="ID" type="text" size="255">
  26. <input name="test" id="test" type="button" onclick="test();" value="search">
  27. </BODY>
  28. </HTML>
  29.  


Javascript

Expand|Select|Wrap|Line Numbers
  1. // |||||||||||||||||||||||||||||||||||||||||||
  2. // | Set Position, Dimensions And Color HERE  |
  3. // |||||||||||||||||||||||||||||||||||||||||||
  4.  
  5. // Image Viewer Dimensions settings (pixels):
  6.     var PagePositionLEFT        = 100;             // Set position of Image viewer from LEFT of page
  7.     var PagePositionTOP            = 150;             // Set position of Image viewer from TOP of page
  8.  
  9.     var InterFaceWidth             = 546;             // Set [Overall] WIDTH |||| minimum length=300
  10.     var ViewingAreaHeight        = 160;             // Set [Viewing area] HEIGHT |||| minimum length=10
  11.  
  12.     var OverALLBorder            = 'on';             // Set [Over All] Border 'on' or '' (blank) for off
  13.  
  14. // Image Viewer Colors [example: 'red' or '#FF0000']
  15.     var OverALLBorderColor        = 'black';         // Set color of [Over All] Border
  16.  
  17.     var ControlsBGColor            = 'gray';         // Set color of [Control Area] Background |||| use '' = no color
  18.     var ControlsFontColor        = 'white';         // Set color of [Control Area] Font
  19.  
  20.     var ViewAreaBGColor            = 'gray';        // Set color of [Viewing Area] Background |||| use '' = no color
  21.  
  22.     var ImageBorderColor        = 'white';         // Set color of [Image] Border
  23.  
  24.     var ButtonBGColor            = 'black';         // Set color of [Button] Background
  25.     var ButtonFontColor            = 'white';         // Set color of [Button] Font
  26.     var ButtonBorderColor        = 'white';         // Set color of [Button] border
  27.  
  28. // Image Alignment
  29.     var ImageValignment        = 'middle';         // Set verticle alignment within viewer (options: top, bottom. middle)
  30.  
  31. // :::::::::::::::::::::::::
  32. // ::: Testing var      ::::
  33. // :::::::::::::::::::::::::
  34.  
  35. var ImageArray = new Array(100);
  36. var manufacture = new Array(100);
  37. var modelName = new Array(100);
  38. var emptyList;
  39. var imageList;
  40. var isFirstLoad=0;
  41. // :::::::::::::::::::::::::
  42. // ::: Initialize Page ::::
  43. // :::::::::::::::::::::::::
  44. //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;";
  45. //imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"
  46. //imageList="";
  47. //window.onload=InitializePage;
  48. //window.onload=InitializePage;
  49.  
  50. function InitializePage(imageList)
  51. {
  52. // Call the ajax function that return a string with all models found in the searc
  53.  
  54. // Install Image Viewer HTML file name holder Input element
  55. FirstDIV=document.createElement('DIV')
  56. document.body.appendChild(FirstDIV)
  57. FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
  58. "<DIV id='interface'>" + 
  59. "    <DIV id='ViewingArea'>" + 
  60. "    <TABLE border='0' cellpadding='2'>" + 
  61. "        <TR  id='ImageContainer'>" + 
  62. "        </TR>" + 
  63. "    </TABLE>" + 
  64. "    </DIV>" + 
  65. "    <DIV id='controls'>" + 
  66. "        <DIV id='Verbiage'>" + 
  67. "        </DIV>" + 
  68. "        <DIV id='ScrollLeft'>" + 
  69. "            <INPUT onclick='moveLeft()' type='button' value='Previous' id='previous'>" + 
  70. "        </DIV>" + 
  71. "        <DIV id='ScrollRight'>" + 
  72. "            <INPUT onclick='moveRight()' type='button' value='Next' id='next'>" + 
  73. "        </DIV>" + 
  74. "    </DIV>" + 
  75. "</DIV>"
  76. if (imageList != "") {
  77.     var splitarray = imageList.split(";");
  78.         for (i=0;i < splitarray.length;i++) {
  79.             var splitarray1 = splitarray[i].split(":");
  80.             TDElement=document.createElement("TD");
  81. TDElement.innerHTML="<IMG border='0' width=\"100\" height=\"100\" src='Thumbnails/"+splitarray1[0]+"'><br>"+splitarray1[1]+"<br>"+splitarray1[2]+"</IMG>" ;
  82.             document.getElementById('ImageContainer').appendChild(TDElement) ;
  83.         emptyList=0;
  84.         }
  85. } else {
  86. emptyList=1;
  87. }
  88.  
  89. SElement=document.getElementById('Verbiage')
  90. SElement.innerHTML='<br><font size=2> Use arrows to scroll Models | Click on the Model picture for details</font>'
  91. setStyles();
  92. setIDs();
  93. attachEventhandlers();
  94. if (emptyList == 1) 
  95. alert("No Models found,Please try another search.");
  96. }
  97.  
  98. function setStyles()
  99. {
  100. // set Image Scroller DIVs width Dimensions and position type
  101. document.getElementById('interface').style.position="absolute";
  102. document.getElementById('interface').style.width=InterFaceWidth+"px";
  103. document.getElementById('interface').style.overflow="hidden";
  104.  
  105. DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
  106. if (DIVCol!=null)
  107.     {for (p=0; p<DIVCol.length; p++)
  108.         {
  109.         DIVCol.item(p).style.position="absolute";
  110.         DIVCol.item(p).style.width=InterFaceWidth+"px";
  111.         if(DIVCol.item(p).id=="ScrollRight")
  112.             {
  113.             DIVCol.item(p).style.width=InterFaceWidth-40+"px";
  114.             DIVCol.item(p).style.textAlign="right";
  115.             }
  116.         }
  117.     }
  118.  
  119. document.getElementById('ScrollLeft').style.width=40+"px";
  120. document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
  121.  
  122. // set z-index
  123. document.getElementById('interface').style.zIndex=1;
  124. document.getElementById('ViewingArea').style.zIndex=2;
  125. document.getElementById('controls').style.zIndex=2;
  126. document.getElementById('Verbiage').style.zIndex=5;
  127. document.getElementById('ScrollLeft').style.zIndex=4;
  128. document.getElementById('ScrollRight').style.zIndex=4;
  129.  
  130.  
  131. // set positions (left)
  132. document.getElementById('ViewingArea').style.left=0+"px";
  133. document.getElementById('controls').style.left=0+"px";
  134. document.getElementById('ScrollLeft').style.left=2+"px";
  135. document.getElementById('ScrollRight').style.left=38+"px";
  136. document.getElementById('Verbiage').style.left=40+"px";
  137.  
  138. // set positions (top)
  139. document.getElementById('ViewingArea').style.top=0+"px";
  140. document.getElementById('ScrollLeft').style.top=5+"px";
  141. document.getElementById('ScrollRight').style.top=5+"px";
  142. document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";
  143.  
  144. // set Image Scroller DIVs height Dimensions
  145. document.getElementById('controls').style.height=35+"px";
  146. document.getElementById('Verbiage').style.height=35+"px";
  147. document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
  148. document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";
  149.  
  150. // Set Viewer Page position
  151. document.getElementById('interface').style.left= PagePositionLEFT+"px";
  152. document.getElementById('interface').style.top= PagePositionTOP+"px";
  153.  
  154. // text alignment for controller text
  155. document.getElementById('Verbiage').style.textAlign='center';
  156.  
  157. // image Viewer Color Scheme
  158. document.getElementById('controls').style.backgroundColor=ControlsBGColor;
  159. document.getElementById('Verbiage').style.color=ControlsFontColor;
  160. document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
  161.  
  162. if(OverALLBorder=='on'){
  163. document.getElementById('interface').style.borderStyle='solid';
  164. document.getElementById('interface').style.borderWidth="1px";
  165. document.getElementById('interface').style.borderColor=OverALLBorderColor;}
  166.  
  167. // Image Styles
  168. IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
  169. if (IMGCol!=null)
  170.     {for (im=0; im<IMGCol.length; im++)
  171.         {
  172.         IMGCol.item(im).style.borderStyle='solid';
  173.         IMGCol.item(im).style.borderWidth="1px";
  174.         IMGCol.item(im).style.borderColor=ImageBorderColor;
  175.         }
  176.     }
  177.  
  178. // Button Styles
  179. BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
  180. if (BTNCol!=null)
  181.     {for (p=0; p<BTNCol.length; p++)
  182.         {
  183.         BTNCol.item(p).style.borderStyle='solid';
  184.         BTNCol.item(p).style.borderWidth="1px";
  185.         BTNCol.item(p).style.backgroundColor=ButtonBGColor;
  186.         BTNCol.item(p).style.color=ButtonFontColor;
  187.         BTNCol.item(p).style.borderColor=ButtonBorderColor;
  188.         }
  189.     }
  190.  
  191. // Table Cell Styles
  192. TDCol=document.getElementById('interface').getElementsByTagName('TD');
  193. if (TDCol!=null)
  194.     {for (td=0; td<TDCol.length; td++)
  195.         {TDCol.item(td).style.verticalAlign=ImageValignment;}}
  196. }
  197.  
  198.  
  199. // ::::::::::::::::::::::::
  200. // ::: Event Handlers ::
  201. // ::::::::::::::::::::::::
  202.  
  203. function onclickHandler(e)
  204. {
  205. // Browser compatibility code
  206.     var targ;
  207.     if (!e){var e = window.event;}
  208.  
  209.     if (e.target)
  210.         {    targ = e.target;
  211.             var xpos=(e.pageX); var ypos=(e.pageY);}
  212.  
  213.     else if (e.srcElement)
  214.         {    var xpos=(event.x);    var ypos=(event.y);
  215.             targ = e.srcElement;}
  216.  
  217. // Strip file name from image src
  218.     var spath=targ.getAttribute('src');
  219.     wholePathLength=spath.length;
  220.     strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
  221.     ifm= spath.substring(strippedPathLength+1,wholePathLength);
  222. // Store file name in holder for use by popup windoow
  223.     document.getElementById('fileNameHolder').value=ifm;
  224. // Open the window at location of thumbnail image
  225.     var pos = "left="+xpos+",top="+ypos;
  226.     window.open("imageViewerPopup.htm","imageWindow","width=18,height=18,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);
  227. }
  228.  
  229. // Attach event handlers to all images within container
  230. function attachEventhandlers()
  231. {
  232. ContainerElement=document.getElementById('ImageContainer')
  233. TDCol=ContainerElement.getElementsByTagName('TD');
  234.  
  235. if (TDCol!=null)
  236.     {for (l=0; l<TDCol.length; l++)
  237.         {
  238.         IMGCol=TDCol.item(l).getElementsByTagName("IMG");
  239.         IMGCol.item(0).style.cursor="pointer"
  240.         IMGCol.item(0).setAttribute('id',"Image"+l)
  241.         IMGCol.item(0).onclick=onclickHandler;
  242.         }
  243.     }
  244. }
  245.  
  246. // Set ID's for all table cells
  247. function setIDs()
  248. {
  249. ContainerElement=document.getElementById('ImageContainer')
  250. TDCol=ContainerElement.getElementsByTagName('TD');
  251. if (TDCol!=null)
  252.     {    for (i=0; i<TDCol.length; i++)
  253.             {TDCol.item(i).setAttribute('id',i)}
  254.     }
  255. }
  256.  
  257. // :::::::::::::::::::::::::
  258. // ::: Scroll Functions ::
  259. // :::::::::::::::::::::::::
  260.  
  261. function moveLeft()
  262. {
  263. ContainerElement=document.getElementById("ImageContainer");
  264. firstTD=document.getElementById("0");
  265. dupfirstTD=firstTD.cloneNode(false)
  266. dupfirstTD.innerHTML=firstTD.innerHTML
  267. ContainerElement.removeChild(firstTD);
  268. ContainerElement.appendChild(dupfirstTD);
  269. setStyles; setIDs();attachEventhandlers();
  270. }
  271.  
  272. function moveRight()
  273. {
  274. lastTD=document.getElementById(TDCol.length-1);
  275. duplastTD=lastTD.cloneNode(false)
  276. duplastTD.innerHTML=lastTD.innerHTML
  277. firstTD=document.getElementById("0");
  278. ContainerElement=document.getElementById("ImageContainer");
  279. ContainerElement.insertBefore(duplastTD,firstTD);
  280. ContainerElement.removeChild(lastTD);
  281. setStyles; setIDs();attachEventhandlers();
  282. }
  283.  
  284.  
  285.  
Mar 18 '08 #1
7 1727
acoder
16,027 Expert Mod 8TB
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
82
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
  1. <HTML>
  2. <HEAD>
  3. <META http-equiv="Content-Language" content="en-us">
  4. <TITLE>Product viewer</TITLE>
  5. <script type="text/javascript" language="JavaScript" src="serachResultView_v3.js"></script>
  6. <script language="javascript" type="text/javascript">
  7. var isFirstLoad=0;
  8. function test(){
  9. imageList=document.getElementById("ID").value;
  10.     if (isFirstLoad) {
  11.         InitializePage(imageList);
  12.         isFirstLoad=1;
  13. }
  14. </script>
  15. </HEAD>
  16. <BODY>
  17.  
  18. <input name="test" id="ID" type="text" size="255">
  19. <input name="test" id="test" type="button" onclick="test();" value="search">
  20. </BODY>
  21. </HTML>
  22.  
javascript:

Expand|Select|Wrap|Line Numbers
  1.  
  2. // |||||||||||||||||||||||||||||||||||||||||||
  3. // | Set Position, Dimensions And Color HERE  |
  4. // |||||||||||||||||||||||||||||||||||||||||||
  5.  
  6. // Image Viewer Dimensions settings (pixels):
  7.     var PagePositionLEFT        = 100;             // Set position of Image viewer from LEFT of page
  8.     var PagePositionTOP            = 150;             // Set position of Image viewer from TOP of page
  9.  
  10.     var InterFaceWidth             = 546;             // Set [Overall] WIDTH |||| minimum length=300
  11.     var ViewingAreaHeight        = 160;             // Set [Viewing area] HEIGHT |||| minimum length=10
  12.  
  13.     var OverALLBorder            = 'on';             // Set [Over All] Border 'on' or '' (blank) for off
  14.  
  15. // Image Viewer Colors [example: 'red' or '#FF0000']
  16.     var OverALLBorderColor        = 'black';         // Set color of [Over All] Border
  17.  
  18.     var ControlsBGColor            = 'gray';         // Set color of [Control Area] Background |||| use '' = no color
  19.     var ControlsFontColor        = 'white';         // Set color of [Control Area] Font
  20.  
  21.     var ViewAreaBGColor            = 'gray';        // Set color of [Viewing Area] Background |||| use '' = no color
  22.  
  23.     var ImageBorderColor        = 'white';         // Set color of [Image] Border
  24.  
  25.     var ButtonBGColor            = 'black';         // Set color of [Button] Background
  26.     var ButtonFontColor            = 'white';         // Set color of [Button] Font
  27.     var ButtonBorderColor        = 'white';         // Set color of [Button] border
  28.  
  29. // Image Alignment
  30.     var ImageValignment        = 'middle';         // Set verticle alignment within viewer (options: top, bottom. middle)
  31.  
  32. // :::::::::::::::::::::::::
  33. // ::: Testing var      ::::
  34. // :::::::::::::::::::::::::
  35.  
  36. var ImageArray = new Array(100);
  37. var manufacture = new Array(100);
  38. var modelName = new Array(100);
  39. var TDElement = new Array(100);
  40. var emptyList;
  41. var imageList;
  42. var isFirstLoad=0;
  43. var last_number_of_elements=0;
  44. // The current location of the first element in the list,the list start from 0 position
  45. var current_location=0;
  46. // The max number of pictures that the user see
  47. var view_pic_number=5;
  48. // :::::::::::::::::::::::::
  49. // ::: Initialize Page ::::
  50. // :::::::::::::::::::::::::
  51. //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;";
  52. //imageList="MichaelFalatineBlueMetalHorse.jpg:vendor0:product0"
  53. //imageList="";
  54. //window.onload=InitializePage;
  55. //window.onload=InitializePage;
  56.  
  57. function InitializePage(imageList)
  58. {
  59. // Call the ajax function that return a string with all models found in the searc
  60.  
  61. // Install Image Viewer HTML file name holder Input element
  62.  
  63. FirstDIV=document.createElement('DIV')
  64. document.body.appendChild(FirstDIV)
  65. FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
  66. "<DIV id='interface'>" + 
  67. "    <DIV id='ViewingArea'>" + 
  68. "    <TABLE border='0' cellpadding='2'>" + 
  69. "        <TR  id='ImageContainer'>" + 
  70. "        </TR>" + 
  71. "    </TABLE>" + 
  72. "    </DIV>" + 
  73. "    <DIV id='controls'>" + 
  74. "        <DIV id='Verbiage'>" + 
  75. "        </DIV>" + 
  76. "        <DIV id='ScrollLeft'>" + 
  77. "            <INPUT onclick='moveLeft()' type='button' value='Previous' id='previous'>" + 
  78. "        </DIV>" + 
  79. "        <DIV id='ScrollRight'>" + 
  80. "            <INPUT onclick='moveRight()' type='button' value='Next' id='next'>" + 
  81. "        </DIV>" + 
  82. "    </DIV>" + 
  83. "</DIV>"
  84.  
  85. //clear the previous list
  86.  
  87. if (last_number_of_elements != 0 && isFirstLoad == 1 && imageList != "") {
  88.  for (var i=0; i<last_number_of_elements;i++) {
  89. //    alert(document.getElementById('ImageContainer').TDElement[i]);
  90.     document.getElementById('ImageContainer').removeChild(TDElement[i]);    
  91.     TDElement[i]="";  
  92.  }
  93. }
  94.  
  95. // Create the new  list
  96.  
  97. if (imageList != "") {
  98.     var splitarray = imageList.split(";");
  99.         last_number_of_elements=splitarray.length;
  100.         for (i=0;i < splitarray.length;i++) {
  101.             var splitarray1 = splitarray[i].split(":");
  102.             TDElement[i]=document.createElement("TD");
  103. TDElement[i].innerHTML="<IMG border='0' width=\"100\" height=\"100\" src='Thumbnails/"+splitarray1[0]+"'><br>"+splitarray1[1]+"<br>"+splitarray1[2]+"</IMG>" ;
  104.               document.getElementById('ImageContainer').appendChild(TDElement[i]) ;           
  105.         emptyList=0;
  106.         }
  107. } else {
  108.    emptyList=1;
  109.    alert("No Models found,Please try another search.");
  110. }
  111.  
  112. SElement=document.getElementById('Verbiage')
  113. SElement.innerHTML='<br><font size=2> Use arrows to scroll Models | Click on the Model picture for details</font>'
  114. setStyles();
  115. setIDs();
  116. attachEventhandlers();
  117. isFirstLoad=1;
  118. }
  119.  
  120. function setStyles()
  121. {
  122. // set Image Scroller DIVs width Dimensions and position type
  123. document.getElementById('interface').style.position="absolute";
  124. document.getElementById('interface').style.width=InterFaceWidth+"px";
  125. document.getElementById('interface').style.overflow="hidden";
  126.  
  127. DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
  128. if (DIVCol!=null)
  129.     {for (p=0; p<DIVCol.length; p++)
  130.         {
  131.         DIVCol.item(p).style.position="absolute";
  132.         DIVCol.item(p).style.width=InterFaceWidth+"px";
  133.         if(DIVCol.item(p).id=="ScrollRight")
  134.             {
  135.             DIVCol.item(p).style.width=InterFaceWidth-40+"px";
  136.             DIVCol.item(p).style.textAlign="right";
  137.             }
  138.         }
  139.     }
  140.  
  141. document.getElementById('ScrollLeft').style.width=40+"px";
  142. document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
  143.  
  144. // set z-index
  145. document.getElementById('interface').style.zIndex=1;
  146. document.getElementById('ViewingArea').style.zIndex=2;
  147. document.getElementById('controls').style.zIndex=2;
  148. document.getElementById('Verbiage').style.zIndex=5;
  149. document.getElementById('ScrollLeft').style.zIndex=4;
  150. document.getElementById('ScrollRight').style.zIndex=4;
  151.  
  152.  
  153. // set positions (left)
  154. document.getElementById('ViewingArea').style.left=0+"px";
  155. document.getElementById('controls').style.left=0+"px";
  156. document.getElementById('ScrollLeft').style.left=2+"px";
  157. document.getElementById('ScrollRight').style.left=38+"px";
  158. document.getElementById('Verbiage').style.left=40+"px";
  159.  
  160. // set positions (top)
  161. document.getElementById('ViewingArea').style.top=0+"px";
  162. document.getElementById('ScrollLeft').style.top=5+"px";
  163. document.getElementById('ScrollRight').style.top=5+"px";
  164. document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";
  165.  
  166. // set Image Scroller DIVs height Dimensions
  167. document.getElementById('controls').style.height=35+"px";
  168. document.getElementById('Verbiage').style.height=35+"px";
  169. document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
  170. document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";
  171.  
  172. // Set Viewer Page position
  173. document.getElementById('interface').style.left= PagePositionLEFT+"px";
  174. document.getElementById('interface').style.top= PagePositionTOP+"px";
  175.  
  176. // text alignment for controller text
  177. document.getElementById('Verbiage').style.textAlign='center';
  178.  
  179. // image Viewer Color Scheme
  180. document.getElementById('controls').style.backgroundColor=ControlsBGColor;
  181. document.getElementById('Verbiage').style.color=ControlsFontColor;
  182. document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
  183.  
  184. if(OverALLBorder=='on'){
  185. document.getElementById('interface').style.borderStyle='solid';
  186. document.getElementById('interface').style.borderWidth="1px";
  187. document.getElementById('interface').style.borderColor=OverALLBorderColor;}
  188.  
  189. // Image Styles
  190. IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
  191. if (IMGCol!=null)
  192.     {for (im=0; im<IMGCol.length; im++)
  193.         {
  194.         IMGCol.item(im).style.borderStyle='solid';
  195.         IMGCol.item(im).style.borderWidth="1px";
  196.         IMGCol.item(im).style.borderColor=ImageBorderColor;
  197.         }
  198.     }
  199.  
  200. // Button Styles
  201. BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
  202. if (BTNCol!=null)
  203.     {for (p=0; p<BTNCol.length; p++)
  204.         {
  205.         BTNCol.item(p).style.borderStyle='solid';
  206.         BTNCol.item(p).style.borderWidth="1px";
  207.         BTNCol.item(p).style.backgroundColor=ButtonBGColor;
  208.         BTNCol.item(p).style.color=ButtonFontColor;
  209.         BTNCol.item(p).style.borderColor=ButtonBorderColor;
  210.         }
  211.     }
  212.  
  213. // Table Cell Styles
  214. TDCol=document.getElementById('interface').getElementsByTagName('TD');
  215. if (TDCol!=null)
  216.     {for (td=0; td<TDCol.length; td++)
  217.         {TDCol.item(td).style.verticalAlign=ImageValignment;}}
  218. }
  219.  
  220.  
  221. // ::::::::::::::::::::::::
  222. // ::: Event Handlers ::
  223. // ::::::::::::::::::::::::
  224.  
  225. function onclickHandler(e)
  226. {
  227. // Browser compatibility code
  228.     var targ;
  229.     if (!e){var e = window.event;}
  230.  
  231.     if (e.target)
  232.         {    targ = e.target;
  233.             var xpos=(e.pageX); var ypos=(e.pageY);}
  234.  
  235.     else if (e.srcElement)
  236.         {    var xpos=(event.x);    var ypos=(event.y);
  237.             targ = e.srcElement;}
  238.  
  239. // Strip file name from image src
  240.     var spath=targ.getAttribute('src');
  241.     wholePathLength=spath.length;
  242.     strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
  243.     ifm= spath.substring(strippedPathLength+1,wholePathLength);
  244. // Store file name in holder for use by popup windoow
  245.     document.getElementById('fileNameHolder').value=ifm;
  246. // Open the window at location of thumbnail image
  247.     var pos = "left="+xpos+",top="+ypos;
  248.     window.open("imageViewerPopup.htm","imageWindow","width=18,height=18,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);
  249. }
  250.  
  251. // Attach event handlers to all images within container
  252. function attachEventhandlers()
  253. {
  254. ContainerElement=document.getElementById('ImageContainer')
  255. TDCol=ContainerElement.getElementsByTagName('TD');
  256.  
  257. if (TDCol!=null)
  258.     {for (l=0; l<TDCol.length; l++)
  259.         {
  260.         IMGCol=TDCol.item(l).getElementsByTagName("IMG");
  261.         IMGCol.item(0).style.cursor="pointer"
  262.         IMGCol.item(0).setAttribute('id',"Image"+l)
  263.         IMGCol.item(0).onclick=onclickHandler;
  264.         }
  265.     }
  266. }
  267.  
  268. // Set ID's for all table cells
  269. function setIDs()
  270. {
  271. ContainerElement=document.getElementById('ImageContainer')
  272. TDCol=ContainerElement.getElementsByTagName('TD');
  273. if (TDCol!=null)
  274.     {    for (i=0; i<TDCol.length; i++)
  275.             {TDCol.item(i).setAttribute('id',i)}
  276.     }
  277. }
  278.  
  279. // :::::::::::::::::::::::::
  280. // ::: Scroll Functions ::
  281. // :::::::::::::::::::::::::
  282.  
  283. function moveLeft()
  284. {
  285.     var ContainerElement=document.getElementById('ImageContainer');
  286.     var firstElement=ContainerElement.cloneNode(TDElement[0]);
  287.     for (i=1;i<=last_number_of_elements-2;i++) {      
  288.         ContainerElement.replaceChild(TDElement[i],TDElement[i-1]) ;
  289.     }
  290.     ContainerElement.replaceChild(firstElement,TDElement[last_number_of_elements-1]) ;
  291.  setStyles(); setIDs();attachEventhandlers();
  292. }
  293. function moveRight()
  294. {
  295.     var ContainerElement=document.getElementById('ImageContainer');
  296.     var lastElement=ContainerElement.cloneNode(TDElement[last_number_of_elements-1]);
  297.     for (i=0;i<=last_number_of_elements-2;i++) {      
  298.         ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;
  299.     }
  300.  ContainerElement.replaceChild(lastElement,TDElement[0]) ;
  301.  setStyles(); setIDs();attachEventhandlers();
  302. }
  303.  
  304.  

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 Expert Mod 8TB
Can you suggest about good debugger for the javascript?
A useful tool is Firebug (Firefox extension).
Mar 20 '08 #4
raknin
82
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
  1. // last_number_of_elements = is the number of the element in the list
  2. // The list come in the format: x:x:x;y:y:y; .....
  3. function moveRight()
  4. {
  5.       var ContainerElement=document.getElementById('ImageContainer');
  6.        for (i=0;i<=last_number_of_elements-2;i++) {
  7.          if (i==0) {
  8.            ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;
  9.          } else {
  10.           var shiftRight=ContainerElement.cloneNode(TDElement[i+1]);
  11.            ContainerElement.replaceChild(TDElement[i],TDElement[i+1]) ;  
  12.          }      
  13.        }
  14.      ContainerElement.replaceChild(shiftRight,TDElement[0]) ;
  15.      setStyles(); setIDs();attachEventhandlers();
  16. }
  17.  
  18.  
Mar 20 '08 #5
acoder
16,027 Expert Mod 8TB
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
82
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 Expert Mod 8TB
Glad it's working. Can you post the final working solution?
Mar 23 '08 #8

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
3 posts views Thread by zenzero | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.