Avatar billede youghurt Nybegynder
21. august 2009 - 14:48 Der er 13 kommentarer og
1 løsning

Javascript eller jQuery <li> tekst rotation?

Hej Eksperter,

nu har jeg bøvlet med det her i nogen tid efterhånden.

Problem: jeg har fået en ven til at lave en "shoutbox" til min side, som er lavet i C#/asp.net.

Når man kigger på selve koden, så virker det meget overkommelig:


-----------------------------------------------------------------------------------------------------------------------------
    protected void Page_Load(object sender, EventArgs e)
    {
        int itemsToDisplay = 5;
        ltrShoutbox.Text = "<ul id=\"shoutboxUL\" class=\"Shoutbox_inside\">";

        int i = 0;

        Document[] docs = Document.GetChildrenForTree(145060);
       
        List<Document> glDocs = new List<Document>();

        foreach (Document doc in docs)
        {
            glDocs.Add(doc);
        }

        glDocs.Reverse();

        foreach (Document doc in glDocs)
        {
            i++;
            if (i <= itemsToDisplay)
            {
                ltrShoutbox.Text += "<li><span id=\"ShoutboxSender\">" + doc.getProperty("nameOfSender").Value.ToString() + "</span><br /><span id=\"ShoutboxDate\">" + umbraco.library.FormatDateTime(doc.CreateDateTime.ToString(),"dd/MM/yyyy kl. HH:mm") + "</span><br /><span id=\"ShoutboxSMS\">" + doc.getProperty("textWithoutMediaCode").Value.ToString() + "</span></li>";
            }
            else
            {
                break;
            }           
        }

        ltrShoutbox.Text += "</ul>";

-----------------------------------------------------------------------------------------------------------------------------

på hoved .aspx siden hvor shoutboxen skal vises, bliver dette skrevet ud i følgende marcro:

<?UMBRACO_MACRO macroAlias="listShoutboxMessagesALT" />

Mit problem er at jeg gerne vil have den til at spytte 1 tekst ud af gangen, fremfor de allesammen som den gør nu!

Jeg har været inde og kigge på jCarousel som bruger jQuery til at animere ting som netop denne. Så jeg kan fade mellem de forskellige tekster vha. auto-scroll.

Jeg har forsøgt at integrere jCarousel i mine dokumenter, da det virkede meget overskueligt ved at lave referencer til <ul>'ens class og id.
Men det virkede ikke.

Har i nogle forslag til en løsning? Hvis ikke med jCarousel så i det mindste en simpel javascript funktion der bare hopper imellem teksterne..?

Pointen er at få den til at smide 1 tekst ud, i stedet for alle sammen som den gør nu.


Håber i kan hjælpe mig?
På forhånd tak,

Youghurt.
Avatar billede olebole Juniormester
21. august 2009 - 23:09 #1
<ole>

Hvordan vil du have det 'spyttet ud'? I elementer eller som et JavaScript array - eller?

/mvh
</bole>
Avatar billede youghurt Nybegynder
22. august 2009 - 08:41 #2
Hej Ole,
jamen det er i og forsig ligegyldigt, bare de kommer ud 1 af gangen, og der så er en almindelig rotation pr. f.eks. 30 sek.

I mit hoved ville det være mest optimalt med noget javascript?
Avatar billede olebole Juniormester
22. august 2009 - 13:19 #3
Det er ikke ligemeget, hvad vi skriver. Jeg skriver f.eks. intet om rotation  =)
Avatar billede youghurt Nybegynder
22. august 2009 - 13:23 #4
Altså lige nu skriver den jo faktisk dem alle ud, som var det et array.. Og det skal den ikke.. Den skal vise 1 af gangen.

nr.1, skift, nr.2, skift, nr.3, skift, .... Osv.. :)
Avatar billede olebole Juniormester
22. august 2009 - 13:36 #5
Nej, den skriver en unordered list <ul> - som intet har med et array at gøre  =)

Jeg kan ikke rigtig finde ud af, om du blot vil have elementer skrevet ud et for et (i stedet for i en liste) - eller hvad
Avatar billede youghurt Nybegynder
22. august 2009 - 17:54 #6
He he, det kan godt være at jeg ikke kan forklare mig selv ordenligt? Men jeg vil have <li> elementer skrevet ud et for et.

Og for at det kan blive skrevet ud et for et, skal dette gerne ske med en rotation, så man i løbet af en given tidsramme, får f.eks. 20 elementer at se...

Hjalp det? :)
Avatar billede olebole Juniormester
22. august 2009 - 21:01 #7
Ja, nu tror jeg, jeg forstår, hvad det er, du har misforstået  =)

C#-koden skriver noget HTML ud i dit dokument, inden det forlader serveren. Hvis du i browserens menu vælger View->Source, kan du sikkert se noget i stil med:

<ul id="shoutboxUL" class="Shoutbox_inside">
    <li><span id="ShoutboxSender">OleBole</span><br />
        <span id="ShoutboxDate">27/07/2009 kl. 22:13</span><br />
        <span id="ShoutboxSMS">En eller anden tekst #1</span></li>
       
    <li><span id="ShoutboxSender">Youghurt</span><br />
        <span id="ShoutboxDate">27/07/2009 kl. 23:32</span><br />
        <span id="ShoutboxSMS">En eller anden tekst #2</span></li>
       
    <li><span id="ShoutboxSender">OleBole</span><br />
        <span id="ShoutboxDate">28/07/2009 kl. 10:44</span><br />
        <span id="ShoutboxSMS">En eller anden tekst #3</span></li>
</ul>

- hvilket i sig selv er noget vrøvl, da et elements ID skal være unik i dokumentet. Det er ikke tilfældet i den kode, dit script skriver ud.

Anyway, så kan dit serverscript ikke skrive én besked ud ad gangen. Det kan kun skrive, mens dokumentet er på serveren - og er derfor nødt til at skrive alle beskederne ud.

Det, du skal finde ud af, er, hvordan jCarousel (eller en anden rotator) vil have skrevet HTML'en ud for at kunne skifte mellem beskederne. Så kan vi vise dig, hvordan C#-koden skal ændres
Avatar billede youghurt Nybegynder
23. august 2009 - 12:46 #8
Det er liiiiige præcis det jeg mener/vidste/ledte efter.. ;)

Og det er nemlig rigtigt at den skriver der sådan ud, og derved kommer problemet.

jCarousel benytter sig nemlig af at hver <li> har en specifik id. Og pga. måden mit scribt skriver elementerne ud, så kan der ikke sættes en specifik id på. Du kan godt, men så kommer ALLE <li>'erne til at have den samme id. Og derfor kan jeg ikke bruge jCarousel.

Derfor leder jeg tydeligvis efter en løsning hvorpå jeg kan få den til at skrive dette ud på en anerledes måde?

Kan du følge mig? :)
Avatar billede olebole Juniormester
23. august 2009 - 13:23 #9
Prøv:

    protected void Page_Load(object sender, EventArgs e)
    {
        int itemsToDisplay = 5;
        ltrShoutbox.Text = "<ul id=\"shoutboxUL\" class=\"Shoutbox_inside\">";

        int i = 0;

        Document[] docs = Document.GetChildrenForTree(145060);
       
        List<Document> glDocs = new List<Document>();

        foreach (Document doc in docs)
        {
            glDocs.Add(doc);
        }

        glDocs.Reverse();

        foreach (Document doc in glDocs)
        {
            i++;
            if (i <= itemsToDisplay)
            {
                ltrShoutbox.Text += "<li><span id=\"ShoutboxSender"+i+"\">" + doc.getProperty("nameOfSender").Value.ToString() + "</span><br /><span id=\"ShoutboxDate"+i+"\">" + umbraco.library.FormatDateTime(doc.CreateDateTime.ToString(),"dd/MM/yyyy kl. HH:mm") + "</span><br /><span id=\"ShoutboxSMS"+i+"\">" + doc.getProperty("textWithoutMediaCode").Value.ToString() + "</span></li>";
            }
            else
            {
                break;
            }           
        }

        ltrShoutbox.Text += "</ul>";

- så skulle du gerne få en kode à la:

<ul id="shoutboxUL" class="Shoutbox_inside">
    <li><span id="ShoutboxSender0">OleBole</span><br />
        <span id="ShoutboxDate0">27/07/2009 kl. 22:13</span><br />
        <span id="ShoutboxSMS0">En eller anden tekst #1</span></li>
       
    <li><span id="ShoutboxSender1">Youghurt</span><br />
        <span id="ShoutboxDate1">27/07/2009 kl. 23:32</span><br />
        <span id="ShoutboxSMS1">En eller anden tekst #2</span></li>
       
    <li><span id="ShoutboxSender2">OleBole</span><br />
        <span id="ShoutboxDate2">28/07/2009 kl. 10:44</span><br />
        <span id="ShoutboxSMS2">En eller anden tekst #3</span></li>
</ul>
Avatar billede olebole Juniormester
23. august 2009 - 13:29 #10
- njaaarrrr ... ID'erne starter nu ikke med 0, men med 1, men det burde nok ikke betyde noget, når du ved det.

Problemet er faktisk ikke, at jCarousel kræver unikke ID'er. HTML-standarden kræver unikke ID'er  ;o)

I øvrigt er jQuery ikke kompatibelt med XHTML. Det betyder ikke så meget, da W3C helt har opgivet XHTML og i stedet satser på HTML som fremtidens markup sprog:
    http://dengodekode.dk/xhtml
Avatar billede youghurt Nybegynder
23. august 2009 - 14:17 #11
Okay, prøver det lige af og så vender jeg tilbage.. :)
Avatar billede youghurt Nybegynder
24. august 2009 - 15:50 #12
Hej Ole, det virkede som du sagde... Lavede den dog om til følgende for at få <li>'erne til at være unikke, og ikke <span>'erne:

ltrShoutbox.Text += "<li class=\"jcarousel-item-" + i + "\"><span id=\"ShoutboxSender\">" + doc.getProperty("nameOfSender").Value.ToString() + "</span><br /><span id=\"ShoutboxDate\">" + umbraco.library.FormatDateTime(doc.CreateDateTime.ToString(), "dd/MM/yyyy kl. HH:mm") + "</span><br /><span id=\"ShoutboxSMS\">" + doc.getProperty("textWithoutMediaCode").Value.ToString() + "</span></li>";

Og det virker fint. Får dette skrevet ud:

<div id="Shoutbox_inside"><ul id="mycarousel" class="jcarousel jcarousel-skin-tango"><li class="jcarousel-item-1">

Nu er problemet så bare at jeg ikke kan få jCarousel til at virke, overhovedet. Men det må være et andet problem.

Smid et svar så du kan få dine point.. :)
Avatar billede olebole Juniormester
24. august 2009 - 21:10 #13
Prøv lige at se eksemplet her - og hvad der skrives ud:
    http://sorgalla.com/projects/jcarousel/#Getting-Started

Jeg gider ikke læse dokumentationen igennem, men jeg er ret sikker på, du i det mindste skal have dette start-tag:
    <ul class="jcarousel-list">
Avatar billede youghurt Nybegynder
25. august 2009 - 09:39 #14
Hej Ole,

ja den er jeg med på.. Tror problemet ligger et helt andet sted..
Umbraco er sku ikke lige det letteste i verden at finde ud af desværre... :/

Men igen tak for hjælpen.

Mvh Youghurt.
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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