By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,806 Members | 1,343 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,806 IT Pros & Developers. It's quick & easy.

Help withHorizontal Image Scroller

P: 2
Hi,

I'm trying to get a horizontal scroller to work. But while it works on its own, when inserted in my code, the images appear on top of each other and doesnt scroll?

Does anyone have a script I could try to get this to work?
Feb 23 '07 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 1,892
Hi,

I'm trying to get a horizontal scroller to work. But while it works on its own, when inserted in my code, the images appear on top of each other and doesnt scroll?

Does anyone have a script I could try to get this to work?
Post the code that isn't working.

Aric
Feb 23 '07 #2

P: 2
Hi I'm copied the code below.
note that the code for the scroller js and styles were taken from dynamic drive and works when on its own. but not in my script for some reason. thanks.

Expand|Select|Wrap|Line Numbers
  1. <head>
  2.  
  3. <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
  4. <script type="text/javascript" src="motiongallery.js">
  5. </script>
  6. </head>
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div class="scroller" id="scroller"></div>
  3.    <div id="motioncontainer" style="position:relative;overflow:h;">
  4. <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
  5. <div class="scroller" id="scroller"></div>
  6.    <div id="motioncontainer" style="position:relative;overflow:auto;">
  7. <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
  8. <nobr id="trueContainer"><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg"" border=1><img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1> <img src="C:\Documents and Settings\tsinclair\My Documents\My Pictures\AWWP_0026.jpg" border=1></nobr>
  9.  
  10. </div>
  11. </div>
  12. </div>
  13. </body></html>
the css file has the styles for the motioncontainers

Expand|Select|Wrap|Line Numbers
  1. /* Gallery Styles */
  2.  
  3. #motioncontainer {
  4. /*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
  5. width: 100%; /* Set to gallery width, in px or percentage */
  6. height: 100px; /* Set to gallery height */
  7. }
  8.  
  9. #motioncontainer a img {
  10. border: 1px solid #cccccc; /* Set image border color */
  11. }
  12.  
  13. #motioncontainer a:hover img {
  14. border: 1px solid navy; /* Set image border hover color */
  15. }
  16.  
  17. #statusdiv {
  18. background-color: lightyellow;
  19. border: 1px solid gray;
  20. padding: 2px;
  21. position: absolute; /* Stop Editing Gallery Styles */
  22. left: 0px;
  23. visibility: hidden;
  24. }
  25.  
  26. #motioncontainer a:hover {
  27. color: red; /* Dummy definition to overcome IE bug */
  28. }
  29. /* End Gallery Styles */
and the javascript for the scroller

Expand|Select|Wrap|Line Numbers
  1.  //1) Set width of the "neutral" area in the center of the gallery.
  2. var restarea=6;
  3.  //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
  4. var maxspeed=7;
  5.  //3) Set to maximum width for gallery - must be less than the actual length of the image train.
  6. var maxwidth=1000;
  7.  //4) Set to 1 for left start, 0 for right, 2 for center.
  8. var startpos=0;
  9.  //5) Set message to show at end of gallery. Enter "" to disable message.
  10. var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';
  11.  
  12. function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
  13. var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
  14. var actualHeight=typeof optHeight!="undefined" ? optHeight : "100px" //set 500px to  default height
  15. var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
  16. window.open(path,"", winattributes)
  17. }
  18.  
  19. ////NO NEED TO EDIT BELOW THIS LINE////////////
  20.  
  21. var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;
  22.  
  23. function ietruebody(){
  24. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
  25. }
  26.  
  27. function creatediv(){
  28. statusdiv=document.createElement("div")
  29. statusdiv.setAttribute("id","statusdiv")
  30. document.body.appendChild(statusdiv)
  31. statusdiv=document.getElementById("statusdiv")
  32. statusdiv.innerHTML=endofgallerymsg
  33. }
  34.  
  35. function positiondiv(){
  36. var mainobjoffset=getposOffset(crossmain, "left"),
  37. menuheight=parseInt(crossmain.offsetHeight),
  38. mainobjoffsetH=getposOffset(crossmain, "top");
  39. statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
  40. statusdiv.style.top=menuheight+mainobjoffsetH+"px";
  41. }
  42.  
  43. function showhidediv(what){
  44. if (endofgallerymsg!="") {
  45. positiondiv();
  46. statusdiv.style.visibility=what;
  47. }
  48. }
  49.  
  50. function getposOffset(what, offsettype){
  51. var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
  52. var parentEl=what.offsetParent;
  53. while (parentEl!=null){
  54. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  55. parentEl=parentEl.offsetParent;
  56. }
  57. return totaloffset;
  58. }
  59.  
  60.  
  61. function moveleft(){
  62. if (loadedyes){
  63. movestate="left";
  64. if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
  65. cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
  66. showhidediv("hidden");
  67. }
  68. else
  69. showhidediv("visible");
  70. }
  71. lefttime=setTimeout("moveleft()",10);
  72. }
  73.  
  74. function moveright(){
  75. if (loadedyes){
  76. movestate="right";
  77. if (iedom&&parseInt(cross_scroll.style.left)<0){
  78. cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
  79. showhidediv("hidden");
  80. }
  81. else
  82. showhidediv("visible");
  83. }
  84. righttime=setTimeout("moveright()",10);
  85. }
  86.  
  87. function motionengine(e){
  88. var mainobjoffset=getposOffset(crossmain, "left"),
  89. dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
  90. dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
  91. curposy=window.event? event.clientX : e.clientX? e.clientX: "";
  92. curposy-=mainobjoffset-dsocx;
  93. var leftbound=(menuwidth-restarea)/2;
  94. var rightbound=(menuwidth+restarea)/2;
  95. if (curposy>rightbound){
  96. scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
  97. clearTimeout(righttime);
  98. if (movestate!="left") moveleft();
  99. }
  100. else if (curposy<leftbound){
  101. scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
  102. clearTimeout(lefttime);
  103. if (movestate!="right") moveright();
  104. }
  105. else
  106. scrollspeed=0;
  107. }
  108.  
  109. function contains_ns6(a, b) {
  110. if (b!==null)
  111. while (b.parentNode)
  112. if ((b = b.parentNode) == a)
  113. return true;
  114. return false;
  115. }
  116.  
  117. function stopmotion(e){
  118. if (!window.opera||(window.opera&&e.relatedTarget!==null))
  119. if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
  120. clearTimeout(lefttime);
  121. clearTimeout(righttime);
  122. movestate="";
  123. }
  124. }
  125.  
  126. function fillup(){
  127. if (iedom){
  128. crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
  129. if(typeof crossmain.style.maxWidth!=='undefined')
  130. crossmain.style.maxWidth=maxwidth+'px';
  131. menuwidth=crossmain.offsetWidth;
  132. cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
  133. actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
  134. if (startpos)
  135. cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
  136. crossmain.onmousemove=function(e){
  137. motionengine(e);
  138. }
  139.  
  140. crossmain.onmouseout=function(e){
  141. stopmotion(e);
  142. showhidediv("hidden");
  143. }
  144. }
  145. loadedyes=1
  146. if (endofgallerymsg!=""){
  147. creatediv();
  148. positiondiv();
  149. }
  150. if (document.body.filters)
  151. onresize()
  152. }
  153. window.onload=fillup;
  154.  
  155. onresize=function(){
  156. if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
  157. motioncontainer.style.width="0";
  158. motioncontainer.style.width="";
  159. motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
  160. }
  161. menuwidth=crossmain.offsetWidth;
  162. cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
  163. }
Feb 23 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.