Avatar billede gedekid Nybegynder
28. juli 2009 - 12:12 Der er 9 kommentarer og
1 løsning

AJAX nyheds fade

I forlængelse af mit spørgsmål her:

http://www.eksperten.dk/spm/882052/

så leder jeg efter noget jQuery der er i stand til at fade (ind/ud) de nyeste nyheder! Den skal eks. fade imellem 10 nyheder.
Der kommer en nyhed frem som man så kan klikke på og læse, ellers fader den ud og den næste i rækker skal så komme frem...

Håber nogen kan vøære behjælpelig...
Avatar billede gedekid Nybegynder
28. juli 2009 - 12:14 #1
Avatar billede Slettet bruger
28. juli 2009 - 13:22 #2
Her er lidt kode til en start:

var naesteNyhed;

function nyNyhed(){
    $('#nyheder').fadeOut(1000, visNyhed);
    //Ajax der sætter henter næster nyhed, og sætter naesteNyhed.
}

function visNyhed() {
    //Jeg er næsten sikker på et this kan bruges her. Ellers må du bruge en selector ($('#nyheder')).
    this.html(naesteNyhed).fadeIn(1000);
}
   
$(function(){
    //Kode der starter nyNyhed hver gang du ønsker (hvert tiende sekund).
    nyNyhed();
});

Det kan du bygge videre på.
Avatar billede gedekid Nybegynder
29. juli 2009 - 09:26 #3
Et dumt spørgsmål kommer lige her, men der er noget jeg har overset...

Jeg får en fejl når scriptet går igang med function visNyhed();

den fader ud og så stopper den...

Jeg har en div med id nyheder
Avatar billede gedekid Nybegynder
29. juli 2009 - 10:53 #4
Havde overset noget...! naesteNyhed var tom og derfor kan den jo selvfølgelig ikke hente den... Sætter jeg den til noget statisk, så kører det fint!

Mit spørgsmål er så nu, hvor naesteNyhed skal sættes mht. PHP sådan at nyhederne skifte imellem eks. de 10 nyeste?
Avatar billede Slettet bruger
29. juli 2009 - 15:43 #5
En (nogenlunde) simpel løsning, byg selv videre:

nyheder.php:
<?php
switch ($_GET['nyhed']) {
    case 1:
        echo "<h1>Nyhed 1</h1>\n<p>Masser af tekst</p>";
        break;
       
    case 2:
        echo "<h1>Nyhed 2</h1>\n<p>Masser af tekst</p>";
        break;
       
    //case 3, 4, 5...
   
    default:
        echo "<p class='error'>Der var en fejl i læsning af nyheder</p>";
}
?>

Nyheder.html:
<script type="text/javascript">
var naesteNyhed, nyhedNummer;
nyhedNummer = 0;

function hentNyhed() {
    //Henter ny nyhed.
    var xmlhttp;
    if (window.XMLHttpRequest){
        //Firefox, Opera og IE7+
        xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
        //IE6-
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        //Meget gamle browsere.
        naesteNyhed = "<p class='error'>Din browser understytter ikke XMLHTTP.</p>";
    }
    if (xmlhttp) {
        xmlhttp.onreadystatechange=function() {
            if(xmlhttp.readyState==4) {
                naesteNyhed = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","nyheder.php?nyhed=" + nyhedNummer,true);
        xmlhttp.send(null);
    }
}

function nyNyhed(){
    $('#nyheder').fadeOut(1000, visNyhed);
    //Udskift 10 med antal nyheder i php scriptet.
    if (nyhedNummer < 10) { nyhedNumer++; }
    else { nyhedNummer = 1; }
   
   
    //Ajax der sætter henter næster nyhed, og sætter naesteNyhed.
}

function visNyhed() {
    //Jeg er næsten sikker på et this kan bruges her. Ellers må du bruge en selector ($('#nyheder')).
    this.html(naesteNyhed).fadeIn(1000);
}
 
$(function(){
    //Kode der starter nyNyhed hver gang du ønsker (hvert tiende sekund).
    nyNyhed();
});
</script>

<div id="nyheder">
    <p class='error'>Din browser understytter ikke javascript</p>
</div>
Avatar billede gedekid Nybegynder
29. juli 2009 - 15:47 #6
Mange takker for hjælpen :)

Smider du et svar, så er der point?!
Avatar billede Slettet bruger
30. juli 2009 - 22:00 #7
Gerne.
Avatar billede gedekid Nybegynder
31. juli 2009 - 10:49 #8
Hov... hvorfor fik du ikke point?

Men tak for hjælpen...
Avatar billede Slettet bruger
31. juli 2009 - 16:35 #9
Jeg fik ikke point fordi du ikke havde udlovet nogle for spørgsmålet.
Avatar billede Slettet bruger
31. juli 2009 - 16:35 #10
Eller havde du?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester