Avatar billede tofferman Nybegynder
09. oktober 2006 - 21:29 Der er 8 kommentarer og
1 løsning

Undgå scrolling ved ændring af <div>

Hej.

Jeg har et lille problem med et javascript. Jeg har en lille TV-guide på http://toflo.dk/tv/ , og den virker stort set fint.

Jeg har lavet et lille script som gør, at når man klikker på en udsendelse kommer beskrivelsen til syne. Det virker faktisk også fint.

Problemet er, at hvis man har scrollet nedad på siden, og klikker på en udsendelse, så ryger man op i toppen af siden igen.

Scriptet virker, men jeg ville gerne undgå at man kommer op i toppen af siden igen (faktisk er det hamrende irriterende).

Scriptet ser sådan ud:

<script language="JavaScript">
function vis_proginfo(id,tid,titel) {
        if(document.getElementById(id).style.visibility=="hidden")
        {document.getElementById(id).style.visibility="visible";
        document.getElementById(id).style.fontSize="0.6em";
        document.getElementById(id).style.maxHeight="100px";
        document.getElementById(titel).style.color="#ffff00";
        document.getElementById(titel).style.fontWeight="bold";
        document.getElementById(tid).style.color="#ffff00";
        document.getElementById(tid).style.fontWeight="bold";}
        else
        {document.getElementById(id).style.visibility="hidden";
        document.getElementById(id).style.fontSize="0em";
        document.getElementById(id).style.maxHeight="0px";
        document.getElementById(titel).style.color="000000";
        document.getElementById(titel).style.fontWeight="normal";
        document.getElementById(tid).style.color="000000";
        document.getElementById(tid).style.fontWeight="normal";
       
        }
}
</script>
Avatar billede cpufan Juniormester
09. oktober 2006 - 21:35 #1
hvordan kalder du scriptet?

det er det går galt
Avatar billede tofferman Nybegynder
09. oktober 2006 - 21:40 #2
<div class="linietabel1">
               
                <div class="celle1tabel" style="width: 80px">
                    <p id="tid152626" style="text-align: left"><a  onClick="vis_proginfo('p152626','tid152626','titel152626')"title="Klik på link for mere info&#x000D;&#x000A;Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde....." href="#">21:00-22:00</a></p>
                    <div style="font-size: 5px; width: 42px; background-color: #2222ff"></div>
                </div>
                <div class="celle2tabel" style="width: 200px; text-align: left; float: left">
                    <p id="titel152626"><a onClick="vis_proginfo('p152626','tid152626','titel152626')" title="Klik på link for mere info&#x000D;&#x000A;Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde..." href="#">Nynne</a></p>
                    <p id="p152626" style="font-size: 0px; visibility: hidden; max-height: 0px;">Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde...</p>
                </div>
            </div>
Avatar billede tofferman Nybegynder
09. oktober 2006 - 21:41 #3
Hmm. Det blev søreme ikke så overskueligt.
Avatar billede keysersoze Ekspert
09. oktober 2006 - 21:42 #4
det er din # i href der gør det - en af flere muligheder er at skifte din # ud med;

java script:void(0);
Avatar billede cpufan Juniormester
09. oktober 2006 - 21:47 #5
<a onClick="vis_proginfo('p152626','tid152626','titel152626')" title="Klik på link for mere info&#x000D;&#x000A;Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde..." href="#">Nynne</a>

ændres til

<span onClick="vis_proginfo('p152626','tid152626','titel152626')" title="Klik på link for mere info&#x000D;&#x000A;Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde..." >Nynne</span>

eller som keysersoze siger
Avatar billede tofferman Nybegynder
09. oktober 2006 - 21:47 #6
Det virkede!

Mange tak :-)
Avatar billede cpufan Juniormester
09. oktober 2006 - 21:48 #7
skal have en cursorstyle på for at vises som link:

<span style="cursor:hand" onClick="vis_proginfo('p152626','tid152626','titel152626')" title="Klik på link for mere info&#x000D;&#x000A;Dansk komedieserie. Er endelig blevet overbevist om at være endt på forkert hylde..." >Nynne</span>
Avatar billede olebole Juniormester
10. oktober 2006 - 12:50 #8
<ole>

Der er ingen grund til at bruge JavaScript pseudo-protokollen (kønt er det jo ikke ligefrem :) ... du returnerer blot false i event-handler'en, hvilket bevarer lidt mere logik i koden:
    <a href="#" onclick="DinFunktion();return false">LINK</a>

- og at bruge et span som link sælger jo også ud af semantikken  ;o)

/mvh
</bole>
Avatar billede keysersoze Ekspert
10. oktober 2006 - 13:02 #9
skrev også "én af mange" ;)

Læste på et tidspunkt en undersøgelse blandt js-folk omkring hvilken metode, der var den mest effektive i netop denne forbindelse, og dengang "vandt" void(0). Det er dog noget tid siden så der kan være sket meget - og desværre kan jeg ikke engang huske hvad problemer med false kunne være.
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

IT-JOB

Netcompany A/S

Network Engineer

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Sektionschef til Enterprise Arkitektur i Forsvaret på Østerbro

IT-Universitetet i København

CIO