login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Scroller in tabel of iframe

Offline Lyrix - 01/02/2011 10:38 (laatste wijziging 01/02/2011 11:00)
Avatar van LyrixNieuw lid Beste Masters!

Ik heb een script, deze scrolt een aantal plaatjes.
Graag zou ik deze in een iframe willen hebben zodat ik hem overal op me site kan plaatsen.
Nu wordt deze boven aan het scherm geplaatst.
De positie is wel te wijzigen maar in een iframe of tabel zou het gewoon stukken beter zijn.
Heeft iemand een idee hoe?

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2.  
  3. <head>
  4. <title>Scroller</title>
  5. <Script>
  6. ///////////////////
  7. //www.fortochka.com
  8. //Alexander Babichev 2006 Coopyright
  9. //This script is free for private use. Otherwise a $10 fee per a site is required.
  10. //the script can be modified but the copyright notice should be left unchanged.
  11. ///////////////////
  12.  
  13.  
  14. var pic = new Array()
  15.  
  16. function banner(name, width, link){
  17. 	this.name = name
  18. 	this.width = width
  19. 	this.link = link
  20.    }
  21.  
  22. pic[0] = new banner('http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg',102,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')
  23. pic[1] = new banner('http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg',102,'http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg')
  24. pic[2] = new banner('http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg',102,'http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg')
  25. pic[3] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg')
  26. pic[4] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg')
  27. pic[5] = new banner('http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg',102,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')
  28. pic[6] = new banner('http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg',102,'http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg')
  29. pic[7] = new banner('http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg',102,'http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg')
  30. pic[8] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg')
  31. pic[9] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg')
  32. pic[10] = new banner('http://www.sxc.hu/pic/s/r/re/remind/256228_sunflowers.jpg',102,'http://www.sxc.hu/pic/m/r/re/remind/256228_sunflowers.jpg')
  33. pic[11] = new banner('http://www.sxc.hu/pic/s/c/cl/claumart/289593_colors_of_the_countryside.jpg',102,'http://www.sxc.hu/pic/m/c/cl/claumart/289593_colors_of_the_countryside.jpg')
  34. pic[12] = new banner('http://www.sxc.hu/pic/s/w/wl/wlangusta/260792_rose_olsztyn.jpg',102,'http://www.sxc.hu/pic/m/w/wl/wlangusta/260792_rose_olsztyn.jpg')
  35. pic[13] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg')
  36. pic[14] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290447_roses_are_red.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290447_roses_are_red.jpg')
  37.  
  38. var speed = 50
  39.  
  40. var kk = pic.length
  41. var ii
  42. var hhh
  43. var nnn
  44. var myInterval
  45. var myPause
  46. var mode = 0
  47.  
  48.  
  49. var imgArray = new Array(kk)
  50. var myLeft = new Array(kk)
  51.  
  52. for (ii=0;ii<kk;ii++){
  53. imgArray[ii] = new Image()
  54. imgArray[ii].src = pic[ii].name
  55. imgArray[ii].width = pic[ii].width
  56.  
  57. 	hhh=0 
  58. 	for (nnn=0;nnn<ii;nnn++){
  59. 		hhh=hhh+pic[nnn].width
  60. 	}
  61. 	myLeft[ii] = hhh
  62. }
  63.  
  64. function ready(){
  65. 	for (ii=0;ii<kk;ii++){ 
  66. 		if (document.images[ii].complete == false){
  67. 			return false	
  68. 			break
  69. 		}
  70. 	}
  71. return true
  72. }
  73.  
  74.  
  75. function startScrolling(){
  76. 	if (ready() == true){		
  77. 		window.clearInterval(myPause)
  78. 		myInterval = setInterval("autoScroll()",speed)	
  79. 	}
  80. }	
  81.  
  82.  
  83. function autoScroll(){
  84. 	for (ii=0;ii<kk;ii++){
  85. 		myLeft[ii] = myLeft[ii] - 1
  86.  
  87. 	if (myLeft[ii] == -(pic[ii].width)){
  88. 		hhh = 0
  89. 		for (nnn=0;nnn<kk;nnn++){
  90. 			if (nnn!=ii){
  91. 				hhh = hhh + pic[nnn].width
  92. 			}			
  93. 		}
  94. 		myLeft[ii] =  hhh
  95. 	}
  96.  
  97.  
  98. 		document.images[ii].style.left = myLeft[ii]
  99. 	}
  100. 	mode = 1
  101. }
  102.  
  103. function stop(){
  104. 	if (mode == 1){
  105. 		window.clearInterval(myInterval)
  106. 	}
  107. 	if (mode == 0){
  108. 		window.clearInterval(myPause)
  109. 	}	
  110. }
  111.  
  112. function go(){
  113. 	if (mode == 1){
  114. 		myInterval = setInterval("autoScroll()",speed)
  115. 	}
  116. 	if (mode == 0){
  117. 		myPause = setInterval("startScrolling()",3000)
  118. 	}	
  119. }
  120.  
  121. myPause = setInterval("startScrolling()",3000)
  122. </Script>
  123.  
  124. <body bgcolor='#eeffff'>
  125. <Script>
  126. for (ii=0;ii<kk;ii++){
  127. document.write('<a href = ' + pic[ii].link + ' target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=75 style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
  128. }
  129. </Script>
  130. </body>
  131.  
  132. </html>

6 antwoorden

Gesponsorde links
Offline Emonk - 02/02/2011 19:46
Avatar van Emonk Lid nou, gewoon, deze pagina in scroller.html oid zetten, en dan aanroepen met <iframe src="scroller.html"></iframe>, of begrijp ik je nu verkeerd?
Bedankt door: Lyrix
Offline Hend - 02/02/2011 21:13
Avatar van Hend Lid Of een div met style="overflow:auto;"
(i)frames zijn namelijk ouderwets. Maar soms is het wel een makkelijke oplossing.
Met php kun je zorgen dat het op iedere pagina komt.
Bedankt door: Lyrix
Offline Lyrix - 03/02/2011 16:09
Avatar van Lyrix Nieuw lid Emok, nee dat heb je helemaal goed.
Ik heb jouw oplossing geprobeerd en het werkt! Tnx.

Hend, ik heb de iframe inderdaad in een php deel zitten zodat ie op iedere pagina zichtbaar is.
Ik wist niet dat iframes ouderwets zijn.
Wat is een betere oplossing?
Offline Emonk - 03/02/2011 16:47
Avatar van Emonk Lid Iframes zijn misschien ouderwets, ze werken prima, en daar gaat het om! Wat wel een nadeel is, is dat niet sommige versies van IE ze niet ondersteunen. Daarom werkt dit beter:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. echo '<div style="overflow:auto;">';
  3. include('scroller.html');
  4. echo '</div>';
  5. ?>
Offline Lyrix - 07/02/2011 12:31
Avatar van Lyrix Nieuw lid Emonk, ik heb jouw 2e oplossing ook geprobeerd. Waar ik de code ook plaats in me site, de scroller komt altijd links boven aan in me scherm.
Met de iframe niet, daar verschijnt de scroller in het frame op de plaats in mijn site waar ik het wil.
De 2e oplossing is dus niet gelijkwaardig als een iframe.
Offline TotempaaltJ - 07/02/2011 14:10
Avatar van TotempaaltJ PHP interesse
Lyrix schreef:
Emonk, ik heb jouw 2e oplossing ook geprobeerd. Waar ik de code ook plaats in me site, de scroller komt altijd links boven aan in me scherm.
Met de iframe niet, daar verschijnt de scroller in het frame op de plaats in mijn site waar ik het wil.
De 2e oplossing is dus niet gelijkwaardig als een iframe.

Dat is heel raar. Laat je CSS eens zien?

Overigens, als je code langer is dan 60 regels, zet het even in een [plaatscode] tag.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s