oneindig afwisselend een reeks tags weergeven

Status
Niet open voor verdere reacties.
S

sharethewisdom

Gebruiker
Lid geworden
25 dec 2008
Berichten
6
hallo,
Eerst en vooral wens ik iedereen prettige feesten toe! Ik stelde mijn probleem reeds eerder in het engels:

I created this website http://webs.hogent.be/bart_deroy/ on which I used a great deal of (one particular) SMIL presentation method inside my html, to simply alter texts and at times also images and other elements. Yet only Internet Explorer 5.5+ can run SMIL presentations inside HTML files. :confused:
I know it wasn't smart to seize on this solution as such, without doubting about a possible risk for problems in other browsers nor bearing the actual purpose of those SMIL things in mind. Worse still it was very stupid. (frustrating) But now I'm learning and I started all over a few times, to produce order out of my own chaos. My knowledge of javascript is very small, I appreciate anyone's help most when he/she could give me full examples, so that i have something to start with.

SMIL Tutorial: http://www.w3schools.com/smil/smil_html.asp

aim: to replace little bits of text of the SMIL method with bits of text of a javascript method in order to conform to all browsers

I would like to replace this:
Code: 
<t:seq repeatCount="indefinite">
<tag class="t" dur="3s">Welkompagina</tag>
<tag class="t" dur="3s">Welcome page</tag>
<tag class="t" dur="3s">Accueil</tag>
</t:seq>

with something like this:
Code: 
[begin script: the repeat count must always be indefinite, any tags found in between here and the end should all be timed out in accordance with the duration given here (dur="3s" or equally)]
<tag>Welkompagina</tag> 
<tag>Welcome page</tag>
<tag>Accueil</tag>
[end script: all elements are enclosed within this part and the beginning]

In this example, each tag should display for 3 seconds whilst the others are unvisible, so that the tags alter, and the alignment does not necessarily need to be css-outlined in order to let the elements preserve their same logical place.

alvast bedankt, commentaar op de website, al dan niet bekeken met IE 5.5 of later, is ook zeker welkom :cool:
Bart
 
Dat kan met javascript. Je kunt iets als dit doen. maar je mag er nooit op vertrouwen dat Javascript werkt ;)

Code: 
var html_array =
[
  "<tag>Welkompagina</tag>",
  "<tag>Welcome page</tag>",
  "<tag>Accueil</tag>"
];

var durations = 
[
  3000,
  3000,
  3000
];

var container = document.getElementById("div_container");
var current_index = 0;
container.innerHTML = html_array[current_index];
window.setTimeout(next_html, durations[current_index]);

function next_html()
{
  current_index = (current_index + 1) % html_array.length;
  container.innerHTML = html_array[current_index];
  window.setTimeout(next_html, durations[current_index]);  
}

En ergens een div in je html met id "div_container".

Niet getest, maar het gaat om het idee :thumb:



/edit2:

Nu wel getest, dit werkt:
HTML: 
<html>
<head>
<title>aap</title>
</head>
<body>

<div id="div_container">aap</div>

<script type="text/javascript">

var html_array =
[
  "<p>Welkompagina</p>",
  "<p>Welcome page</p>",
  "<p>Accueil</p>"
];

var durations = 
[
  3000,
  3000,
  3000
];

var container = document.getElementById("div_container");
var current_index = 0;
container.innerHTML = html_array[current_index];
window.setTimeout(next_html, durations[current_index]);

function next_html()
{
  current_index = (current_index + 1) % html_array.length;
  container.innerHTML = html_array[current_index];
  window.setTimeout(next_html, durations[current_index]);  
}

</script>


</body>
</html>
 
Laatst bewerkt:
ja, je hoeft alleen de html_array aan te passen. Wat er in staat is gewoon html, dus je kunt alles gebruiken wat je wilt:

Code: 
var html_array =
[
  "<img src='plaatje1.gif' alt='tekst' />",
  "<img src='plaatje2.gif' alt='tekst' />",
  "<img src='plaatje3.gif' alt='tekst' />"
];

Je kunt ook het src attribuut veranderen met Javascript, maar voor geanimeerde gif plaatjes gaat dat fout in Internet Explorer (ze spelen niet meer nadat het src attribuut is geweizigd). Overigens, als je plaatjes wilt afwisselen kan dat ook simpelweg met een geanimeerd gif plaatje.

Maar, als je dit gebruikt moet je wel opletten dat je geen dubbele quotes gebruikt in de html, of je moet ze escapen. Het kan zoals hierboven, of met dubbele quotes ge-escaped:

Code: 
var html_array =
[
  "<img src=\"plaatje1.gif\" alt=\"tekst\" />",
  "<img src=\"plaatje2.gif\" alt=\"tekst\" />",
  "<img src=\"plaatje3.gif\" alt=\"tekst\" />"
];
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan