Continu wisselend tekstvak op website

Status
Niet open voor verdere reacties.
FataMorgana

FataMorgana

Gebruiker
Lid geworden
15 jan 2004
Berichten
222
Heel veel gezocht maar kan niet vinden wat ik zoek.

Wat ik heb zijn honderden citaten.
Deze wil ik op mijn website roulerend in beeld laten komen, liefst in random volgorde.
Kan zoiets?

Het doel is een bestaande radiowebsite te verbouwen.
Die website wordt momenteel al gevuld door informatie op mijn lokale server (MySQL) dus misschien kan ik op tabel-niveau het een en ander doen.
Naast de standaard informatie van gespeelde en spelende tracks, wil ik een slideshow van foto's tonen met daaronder in een 'vakje' de citaten. De slideshow kom ik wel uit maar ik heb even geen idee hoe ik die honderden citaten roulerend in beeld kan brengen.

Ik beschik over de software Dreamweaver CS3.
 
Zijn dit random citaten of zijn ze gekoppeld aan bepaalde tracks?
 
Berkery zei:
Zijn dit random citaten of zijn ze gekoppeld aan bepaalde tracks?
Klik om te vergroten...

Nee zo ingewikkeld wil ik het niet maken. Gewoon random.
Dat verhaal van die radio had ik er beter niet bij kunnen vertellen, dat schept verwarring, alsof ik het verband wil laten hebben.
Excuus daarvoor.
 
Heel veel gezocht maar kan niet vinden wat ik zoek.
Klik om te vergroten...
Ik heb niet veel gezocht even gegoogled op "random text scroller javascript"
Heb dit gevonden en in een pagina geplaatst aan U om uw citaten in te vullen, of misschien is het dat nog niet wat je zoekt in ieder geval suc6:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function rotateEvery(sec)
{
	var Quotation=new Array()

	// QUOTATIONS
	Quotation[0] = 'First quotation';
	Quotation[1] = 'Second quotation';
	Quotation[2] = 'Third quotation';
	Quotation[3] = 'Fourth quotation';
	Quotation[4] = 'Fiveth quotation';
	Quotation[5] = 'Sixth quotation';
	Quotation[6] = 'You can add <b>as many</b> quotations <b>as you like</b>';

	var which = Math.round(Math.random()*(Quotation.length - 1));
	document.getElementById('textrotator').innerHTML = Quotation[which];
	
	setTimeout('rotateEvery('+sec+')', sec*1000);
}
</script>
<style type="text/css">
<!--
body {
	background-color: #666;
	color: #F00;
}
#textrotator {
	height: auto;
	width: 150px;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #FFF;
}
-->
</style>
</head>
<body onload="rotateEvery(1)">
<div id="textrotator"><!--Quotations will be displayed here--></div>

</body>
</html>
Mvg
Defietser
 
Inderdaad, zoek eens op 'random quote javascript', als het inderdaad om honderden citaten gaat zou ik het wel in een extern .js bestand zetten.

Het lijkt me in ieder geval niet nodig om dit in MySQL te doen.
 
Dank hiervoor!
Ik had al even gezocht op javascript want had het vermoeden dat er zoiets moest bestaan.
Maar ik geloof dat ik heb gezocht op "random tekst" of zoiets... Dom van mij het niet in het engels te proberen. :o

Ik ga hiermee het komend weekend eens aan de slag om uit te proberen of dit handig is.

Zal zeker een apart bestandje worden want ik zie me op de pagina zelf nog geen honderden teksten zetten.
De pagina waarop het komt is php en daarop worden al verschillende externe php bestandjes ingelezen.
Misschien maak ik er wel een apart php-bestand van; moet even kijken hoe dit het beste gaat uitpakken.

De volgende pagina ga ik dus helemaal verbouwen:
Fata Morgana Internetradio
Met in het centrum een slideshow van random foto's en daaronder een tekstvak met random citaten.
Ik heb niet veel verstand van php en javascript maar ik denk dat ik er wel uit ga komen.

Nogmaals dank!
 
De voortgang is dat ik het wel aan de praat krijg maar ik kan er geen extern .js script van maken.
Ik heb een andere gevonden:

<script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'First quotation';
Quotation[1] = 'Second quotation';
Quotation[2] = 'Third quotation';
Quotation[3] = 'Fourth quotation';
Quotation[4] = 'Fiveth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add <b>as many</b> quotations <b>as you like</b>';

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+sec+')', sec*1000);
}
</script>
</head>
<body onload="rotateEvery(1)">
<div id="textrotator"><!--Quotations will be displayed here--></div>
Klik om te vergroten...

Deze werkt prima binnen de pagina.
Als ik het in een extern citaten.js bestand zet, en op de plaats in de website het aanroep:
<script type="text/javascript" src="citaten.js"></script>
Klik om te vergroten...
dan werkt het niet.
Ik heb ergens gelezen dat het precies hetzelfde zou moeten werken maar in het externe script moet ik dan de <script... start en eind weghalen.
Maar in geen enkel geval werkt het.

Ik zou het er toch graag uithalen want met honderden citaten wordt de pagina veel te onoverzichtelijk!
 
Zet je het wel op de juiste plaats? De aanroep vindt namelijk plaats in de "body"-tag:
HTML: 
<body onload="rotateEvery(1)">
Je zal het externe script dus moeten aanroepen voor de body (dus tussen <head> en </head>).

[edit]Ik heb het net getest en dit klopt niet. Het lijkt ook te werken als het externe js-bestand later wordt aangeroepen.[/edit]
 
Laatst bewerkt:
Dit stond niet omschreven waar ik dat verhaal vandaan heb.
Maar ik heb nu tussen de <head> tags geplaatst:
<script type="text/javascript" src="citaten.js"></script>
Klik om te vergroten...

Op de plek waar ik de citaten wil hebben heb ik geplaatst:
<div id="textrotator"><!--Quotations will be displayed here--></div>
Klik om te vergroten...

En het citaten.js ziet er nu als volgt uit:
<!-- <script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'Het denken van de beginneling ziet veel mogelijkheden, het denken van de deskundige weinig. <em>Shunryu Suzuki</em>';
Quotation[1] = 'Denk aan het heden. Denk aan je leven, dat van minuut tot minuut verdergaat. De ene minuut volgt op de andere, het is dus mogelijk te leven zoals jij leeft, aangezien je leeft. <em>Alain Frans</em>';
Quotation[2] = 'Alles valt te overleven, behalve de dood. <em>Oscar Wilde</em>';
Quotation[3] = 'Terreur bestaat voor het grootste deel slechts uit nutteloze wreedheden gepleegd door bange mensen om zichzelf gerust te stellen. <em>Friedrich Engels</em>';
Quotation[4] = 'Fiveth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add <b>as many</b> quotations <b>as you like</b>';


var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+sec+')', sec*5000);
Klik om te vergroten...

De fout die ik krijg:
Bericht: Object wordt verwacht
Regel: 126
Teken: 1
Code: 0
URI: http://mijnwebserver/test2/playing.php
Klik om te vergroten...

Regel 126:
<body class="thrColLiqHdr" onload="rotateEvery(1)">
Klik om te vergroten...
 
Ik heb het zelf even uitgeprobeerd en bij mij werkt het als de bestanden er zo uit zien:

citaten.js
[js]function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'Het denken van de beginneling ziet veel mogelijkheden, het denken van de deskundige weinig. <em>Shunryu Suzuki</em>';
Quotation[1] = 'Denk aan het heden. Denk aan je leven, dat van minuut tot minuut verdergaat. De ene minuut volgt op de andere, het is dus mogelijk te leven zoals jij leeft, aangezien je leeft. <em>Alain Frans</em>';
Quotation[2] = 'Alles valt te overleven, behalve de dood. <em>Oscar Wilde</em>';
Quotation[3] = 'Terreur bestaat voor het grootste deel slechts uit nutteloze wreedheden gepleegd door bange mensen om zichzelf gerust te stellen. <em>Friedrich Engels</em>';
Quotation[4] = 'Fiveth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add <b>as many</b> quotations <b>as you like</b>';


var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+sec+')', sec*5000);
}[/js]

Het html-bestand dat ik gebruikte om te testen:
HTML: 
<html>
<head>
</head>
<body onload="rotateEvery(1)">
<script type="text/javascript" src="citaten.js">
</script>
<div id="textrotator"><!--Quotations will be displayed here--></div>  
</body>
</html>

Ik kwam er ook achter dat de opmerking die ik eerder plaatste (over de plaats van de aanroep van het js-bestand) niet klopt.
 
Laatst bewerkt:
Aha, toch niet tussen de head-tags!
Inderdaad, nadat ik dit verplaatst heb werkt het wel.
Zo zijn we er toch samen uitgekomen! Bedankt!
 
Tussen de head tags werkt bij mij overigens ook:
HTML: 
<html>
<head>
<script type="text/javascript" src="citaten.js">
</script>
</head>
<body onload="rotateEvery(1)">
<div id="textrotator"><!--Quotations will be displayed here--></div>  
</body>
</html>

Maar mooi dat het nu werkt.
 
Overgens kan je van dit
[JS]setTimeout('rotateEvery('+sec+')', sec*5000);
[/JS]
Klik om te vergroten...
beter zoiets maken:[JS]setTimeout(function(tijd)
{
return funtion()
{
rotateEvery(tijd);
}
}(sec), sec * 5000);[/JS]:thumb:
 
Vegras zei:
Overgens kan je van ditbeter zoiets maken:[JS]setTimeout(function(tijd)
{
return funtion()
{
rotateEvery(tijd);
}
}(sec), sec * 5000);[/JS]:thumb:
Klik om te vergroten...

Minus het kleine typfoutje op regel 3 (funtion > function)
 
Lol...
Afgezien van de typefout, wat doet deze aanpassing t.o.v. het vorige werkende script?
 
Ik meende dat het was omdat je geen string als argument mag geven, maar er een functie gegeven moet worden.

Nu ik het echter op de site van het w3c heb nagekeken blijkt dat het wel een string hoort te zijn... Dan is het nut hiervan mij ook niet helemaal duidelijk...
 
Toch nog een klein vraagje over het bovenstaande script wat ik nu gebruik om random citaten te laten zijn op mijn site.

Sommige citaten zijn heel kort.
Andere heel lang.
Voel je 'm al?
Zou er mogelijk een andere tijd per citaat ingesteld kunnen worden?
Ik probeer nu een mooi gemiddelde in te stellen maar hele lange citaten moeten dan wel heel snel gelezen worden.
En alles instellen op die paar hele lange, maakt dat het weer veel te lang blijft staan.

Als er een ander javascript bestaat wat dit doet, is het ook goed.
Ik wacht expres met het invoeren van alle citaten tot ik zeker weet dat dit script het blijft.
 
Na de vakantie ben ik er weer mee aan de slag gegaan want ik wil het 'in productie' op 1 september.

Afgezien van mijn laatste vraag heb ik nog een aanvullende vraag.

Omdat sommige citaten erg lang zijn en een regelindeling het duidelijker maakt, wil ik eigenlijk binnen sommige citaten een 'new line' forceren. Maar wat ik ook probeer: niets werkt.
Op diverse sites heb ik gevonden dat je dit met het + argument moet doen maar dit werkt niet.
Elders lees ik iets over \n maar ook dit heeft geen effect.

Mijn script ziet er momenteel zo uit, met op enkele de newline argumenten geprobeerd:

<!-- <script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'Het denken van de beginneling ziet veel mogelijkheden, het denken van de deskundige weinig. <em>Shunryu Suzuki</em>';
Quotation[1] = 'Denk aan het heden. Denk aan je leven, dat van minuut tot minuut verdergaat. De ene minuut volgt op de andere, het is dus mogelijk te leven zoals jij leeft, aangezien je leeft. <em>Alain Frans</em>';
=> knip gemaakt
Quotation[26] = 'De Weg tot het Doen is het Zijn.'+'\n'+'<em> Lao-Tse</em>';
Quotation[27] = 'Het oog waarmee ik God zie, is hetzelfde oog als waarmee God mij ziet. <em>Meester Eckhart</em>';
Quotation[28] = 'De mensen zouden niet zozeer moeten letten op wat zij doen, als wel op wat zij zijn. <em>Meester Eckhart</em>';
Quotation[29] = 'Tegenwoordig kennen de mensen de prijs van alles en de waarde van niets. <em>Oscar Wilde</em>';
Quotation[30] = 'Anderen zeggen altijd hoe jij moet leven maar vergeten hoe ze zelf moeten leven. Geef elkaar de ruimte en wees vriendelijk voor elkaar. <em>Rien Schuurmans</em>';
Quotation[31] = 'Wil niet alles horen, zien en weten. Leef je leven zoals je leven moet en blijf bij jezelf. <em>Rien Schuurmans</em>';
Quotation[32] = 'Zeg altijd de waarheid, dan hoef je niets te onthouden. Alleen maar een iets te blijven zeggen en dat is de waarheid. <em>Rien Schuurmans</em>';
Quotation[33] = 'Wees positief in het denken naar alles en iedereen. Dan komt de uitstraling van positiviteit weer bij jezelf terug. <em>Rien Schuurmans</em>';
Quotation[34] = 'Ik weet niet wat de sleutel naar het succes is, maar de sleutel naar de mislukking is proberen het een ieder naar de zin te maken. <em>Bill Cosby</em>';
Quotation[35] = 'Als je christen bent, word een beter christen, \n als je moslim bent, word een betere moslim, \n als je hindoe bent, word een betere hindoe, \n als je boeddhist bent, word een betere boeddhist. \n Verwerkelijk je ware, innerlijke Zelf. <em>Sai Baba</em>';
Quotation[36] = 'De Weg tot het Doen is het Zijn.'+'\n'+'<em> Lao-Tse</em>';

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+sec+')', sec*24000);
}
Klik om te vergroten...

Misschien werken die argumenten niet omdat er na 'Quotation' alleen maar tekst ingevoerd kan worden?
 
Op het punt waar je een nieuwe regel wilt laten beginnen, kun je in de quote gewoon <br /> toevoegen. Dan de tekst in de weergave daar naar de volgende regel moeten gaan...

[JS]
// QUOTATIONS
Quotation[0] = 'Het denken van de beginneling ziet veel mogelijkheden, het denken van de deskundige weinig. <em>Shunryu Suzuki</em>';
Quotation[1] = 'Denk aan het heden. Denk aan je leven, dat van minuut tot minuut verdergaat. De ene minuut volgt op de andere, het is dus mogelijk te leven zoals jij leeft, aangezien je leeft. <em>Alain Frans</em>';
=> knip gemaakt
Quotation[26] = 'De Weg tot het Doen is het Zijn.<br /><em> Lao-Tse</em>';
Quotation[27] = 'Het oog waarmee ik God zie, is hetzelfde oog als waarmee God mij ziet. <em>Meester Eckhart</em>';
Quotation[28] = 'De mensen zouden niet zozeer moeten letten op wat zij doen, als wel op wat zij zijn. <em>Meester Eckhart</em>';
Quotation[29] = 'Tegenwoordig kennen de mensen de prijs van alles en de waarde van niets. <em>Oscar Wilde</em>';
Quotation[30] = 'Anderen zeggen altijd hoe jij moet leven maar vergeten hoe ze zelf moeten leven. Geef elkaar de ruimte en wees vriendelijk voor elkaar. <em>Rien Schuurmans</em>';
Quotation[31] = 'Wil niet alles horen, zien en weten. Leef je leven zoals je leven moet en blijf bij jezelf. <em>Rien Schuurmans</em>';
Quotation[32] = 'Zeg altijd de waarheid, dan hoef je niets te onthouden. Alleen maar een iets te blijven zeggen en dat is de waarheid. <em>Rien Schuurmans</em>';
Quotation[33] = 'Wees positief in het denken naar alles en iedereen. Dan komt de uitstraling van positiviteit weer bij jezelf terug. <em>Rien Schuurmans</em>';
Quotation[34] = 'Ik weet niet wat de sleutel naar het succes is, maar de sleutel naar de mislukking is proberen het een ieder naar de zin te maken. <em>Bill Cosby</em>';
Quotation[35] = 'Als je christen bent, word een beter christen, <br /> als je moslim bent, word een betere moslim, <br /> als je hindoe bent, word een betere hindoe, <br /> als je boeddhist bent, word een betere boeddhist. <br /> Verwerkelijk je ware, innerlijke Zelf. <em>Sai Baba</em>';
Quotation[36] = 'De Weg tot het Doen is het Zijn.<br /><em> Lao-Tse</em>';
[/JS]
 
Zit ik me te pletter te zoeken naar javascript codes, moest ik het gewoon vinden in simpele html-tekstargumenten...
Ergens voelde ik al nattigheid... :o

Bedankt! Weer een stap verder!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan