login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > JavaScript

Scroller in tabel of iframe

Lyrix – 01/02/2011 10:38 (Laatst gewijzigd op 01/02/2011 11:00)
Offline offline




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

  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
Daisycon - Verdien geld met uw website

Emonk – 02/02/2011 19:46
Offline offline



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?

Hend – 02/02/2011 21:13
Offline offline



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.

Lyrix – 03/02/2011 16:09
Offline offline



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?

Emonk – 03/02/2011 16:47
Offline offline



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:

  1. <?php
  2. echo '<div style="overflow:auto;">';
  3. include('scroller.html');
  4. echo '</div>';
  5. ?>

Lyrix – 07/02/2011 12:31
Offline offline



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.

TotempaaltJ – 07/02/2011 14:10
Offline offline



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-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.075s