jQuery meldingen terug laten komen

Door Peter Flos op 27-09-2014 22:00

951 views

Het volgende script is om meldingen weer te laten geven:
(Het is een simulatie-game, waarbij je meldingen van de Reddingsbrigade, KNRM of Ambulance moet oplossen. Dit is de inhoud van de fixed balk onderaan in het scherm, waarop de meldingen om en om worden getoont).


<script>
function nextMsg() {
                    $('#Meldingen-Tekst').html(messages.pop()).fadeIn(1000).delay(2500).fadeOut(1000, nextMsg);
                    };
                    // list of messages to display
                    var messages = [
<?php
$Count = mysqli_num_rows(mysqli_query($con,"SELECT * FROM MeldingenActief WHERE UserID = '$User->ID' AND Gestard='0' ORDER BY ID DESC"));
if($Count == '0'){
?>
                                            "Geen meldingen op dit moment"
<?php
}
else{
$SelectMeldingen = mysqli_query($con,"SELECT * FROM MeldingenActief WHERE UserID = '$User->ID' AND Gestard='0' ORDER BY ID DESC");
while($Row = $SelectMeldingen->fetch_object()){
?>
                                            "<a href='melding.php?ID=<?php echo $Row->ID; ?>'><span class='label label-warning' style='color:black;'>NIEUWE MELDING! <?php echo $Row->Tijd; ?> - <?php echo $Row->Naam; ?></span></a>",
<?php
}
}
?>
                                        ].reverse();
                    // initially hide the message
                    $('#Meldingen-Tekst').hide();
                    // start animation
                    nextMsg();
</script>

Nu wil ik, dat zodra de laatste melding is geweest, er weer terug wordt gegaan naar de 1e melding. Dus stel, het ziet er zo uit:

Melding 1
Melding 2
Melding 3

Na melding 3 blijft melding 3 komen, 1 en 2 niet, omdat 3 de laatste is. Ik wil dat 1 en 2 weer komen, daarna 3, dus het gehele proces opnieuw wordt uitgevoerd. Iemand enig idee hoe ik dit doe?

Frank Nietbelangrijk

27-09-2014 22:47

[code]
<script>
var messages = ["bericht1", "bericht2", "bericht3"];
var i = 0;

$( document ).ready(function() {
MessageBar();
});

function MessageBar()
{
$("#message").html(messages[i]);

if(++i == messages.length)
i = 0;

setTimeout(MessageBar,3000);
}
</script>

<div id="message">geen meldingen</div>
[code]

Peter Flos

28-09-2014 10:47

Werkt goed, alleen het was:

Melding 1, FadeOut, FadeIn Melding 2
Nu is het:
Melding 1, Melding 2 (Zit geen fade tussen).

Hoe kan ik dan dat er weer een fade komt, zoals de volgende regel uit het oude script:


$('#Meldingen-Tekst').html(messages.pop()).fadeIn(1000).delay(2500).fadeOut(1000, nextMsg);

Frank Nietbelangrijk

28-09-2014 12:00

javascript:


var messages = $(".messages");
var i = -1;

$( document ).ready(function() {
  MessageBar();
});

function MessageBar() {
  messages.eq(++i % messages.length)
  .fadeIn(1500)
  .delay(4000)
  .fadeOut(1000, MessageBar);
}

css:


.messages {
  display:none;
}

html:


<div class="messages">Bericht 1</div>
<div class="messages">2e bericht</div>
<div class="messages">Laatste bericht</div>

Peter Flos

28-09-2014 12:10

Top Frank, bedankt!

Frank Nietbelangrijk

28-09-2014 12:28

Even uitbreiding op mijn vorige voorbeeld:


var messages = ["bericht1", "bericht2", "bericht3"];
var i = -1;

$( document ).ready(function() {
  MessageBar();
});

function MessageBar()
{
  if(++i == messages.length)
    i = 0;
  
   $("#message")
    .fadeIn(1500)
    .html(messages[i])
    .delay(4000)    
    .fadeOut(1000, MessageBar);
}

<div id="message">geen meldingen</div>

Peter Flos

28-09-2014 12:30

Is er ook nog een welke je "Beter" vind qua scripting, of qua andere punten?

Reageren

Inloggen om te reageren