Jeg vil gerne lave en bar i bunden af siden, som Facebook har det nu. Selve baren har jeg fået placeret. Du kan se hvordan, i slutningen af min tråd.
Mit problem er, at jeg gerne vil have lavet, så man kan trykke på noget af det tekst, som står i baren, og så skal der komme et lille vindue frem ovenfor - præcis som der gør på Facebook. Til jer, som ikke ved, hvordan det fungerer på Facebook er her et billede:
simseboii >> billedet kan ikke rigtig bruges til noget, når du beskærer, som du gør. Det er f.eks. ikke til at se, hvor den ligger. Prøv at uploade et lidt mere brugbart billede =)
Jeg er ikke helt med på hvad for en div der skal trykkes på og hvad for en der skal komme frem, så jeg kan lige give en generel forklaring. Placer følgende i html'en: <div id="button" onclick="displayElement(document.getElementById('container'))">tryk her</div> <div class="hide" id="container">Indhold ...</div>
og følgende i css'en: .hide { display: none; }
og følgende i sidens javascript-del: function displayElement(element) { element.className = (element.className == "hide" ? "" : "hide"); }
Så bliver container-div'en synlig/usynlig hver gang der trykkes på button-div'en. Er det noget i retning af det du er ude efter?
Umiddelbart så har du et div-starttag for meget i denne sektion: <div class="hide" id="online_tab" style="position:relative;left:780px;"> <div style="width:202px;background-image:url('images/tab.gif');text-align:left;"> <div style="position:relative;top:9px;left:12px;"> <span style="font-weight:bold;">Online</span><br /> Kevin<br /> SnuZZer<br /> ZaKKo<br /> Funny-Man<br /> </div> <div style="width:202px;height:3px;background-image:url('images/tab_bottom.gif');"></div> </div>
Desuden så brokker min browser sig over følgende: "align is an unknown property" Line 34: align: center;
Og din stylesheet reference: <LINK REL="Stylesheet" HREF="stylesheet.css" TYPE="text/css"> skal være med små bogstaver.
Jeg tror det vil virke efter hensigten (i hvert fald i Firefox) hvis du retter de ting.
micc -> Det hjælper på det. Nu er det hele bare rykket. På én måde i FireFox og på en anden i Internet Explorer.
Et helt andet problem er, at tabsne gerne skulle lukke, når en anden åbnes. Så man kun kan have én åben. Jeg tror, det kommer til at fungere bedst, og så er jeg også fri for at de "stabler" sig ovenpå hinanden, hvis man trykker på både "Bogmærker" og "Online".
En ting, man bør være opmærksom på, er, at skift af CSS-klasse ofte performer ganske elendigt. Det medfører ofte opløsning i yderst komplekse arve-/kaskaderegler - og ofte giver browseren op og genberegner hele dokumentet.
Derfor betaler det sig ofte at skifte de enkelte CSS-properties på elementet i stedet.
@olebole Interessant information. Ved du om der er udsigt til forbedringer på området eller om problemet i sin natur er for komplekst til at blive løst?
Ulempen ved at skifte en css-property direkte er selvfølgelig at man så skal lagre elementets oprindelige display-værdi så man kan skifte den tilbage til det rigtige - medmindre selvfølgelig at man ved at alle elementer der er omfattet af funktionen er ens på det punkt.
Så med olebole's betragtning i mente kunne man godt ændre det til:
Der er nok ikke håb om forbedringer. Det kan i sin natur være en yderst kompleks opgave at regne ud, hvad en ændring af en klasse kan betyde for arv under det ændrede niveau i DOM-træet. Det sker ikke altid, og indehaveren af quirksmode.org har da også lavet en ofte refereret 'test', som kun består af ét enkelt eksempel med en ekstrem simpel struktur, der performer fint.
I den anden ende har både roenving og jeg flere gange lavet realistiske test, som snøvlede helt op til mere end et sekund med at rendere. Virkeligheden er som så ofte mere kompleks, end den umiddelbart ser ud til =)
Jeg ville testet det hvis jeg ikke havde været på vej ud af døren på det tidspunkt. :) Jeg valgte at poste koden alligevel, idet den jo netop var så nem at overskue, at kun 'typos' ville kunne ødelægge det. ;)
Men der sneg sig alligevel en tastefejl ind kan jeg se (teknisk set vel en copy-paste fejl). Der skal naturligvis stå:
Så vender det tilbage til sin 'default tilstand'." Tak for den reminder. Den åbenlyst smartere løsning havde jeg glemt alt om i mine overvejelser. I så fald er den eneste faldgrube hvis man ønsker en anden 'default' end den sædvanlige 'default' (display:block; på et <img> under strict fx), men generelt burde det jo ikke være nødvendigt, eller tilrådeligt, at 'ændre' på display's default-værdier.
Dermed er min funktion faktisk mere anvendelig end jeg umiddelbart havde tiltænkt. :)
Alle dine dårlige undskyldninger skjuler intet! Du er transparent som velpudset bøhmisk krystal! Kun en absolut JS-newbie kan ikke se den åbenbart indlysende fejl i:
Koden jeg skrev i 25/10-2008 01:22:49 virker fint for mig i praksis og har den funktionalitet som simseboii bad om.
Re: din personlige hetz mod mig, så vil jeg foreslå at du begrænser den til den anden tråd, da denne tråd bør være dedikeret til at svare på de stillede spørgsmål.
Ja, det er en del mere besværligt. Der er to løsninger, man somregel bruger i den situation:
1) Du lægger et element mellem selve dokumentet og tabben. Det gøres ved at give dem forskelligt z-index. Så strækker du elementet til at dække hele viewporten og tager højde for evt. scroll af siden. På elementet lægges en onmousedown handler, som lukker tabben og skjuler trigger-elementet.
2) Du lægger en onmousedown handler på dokument objektet, som lukker tabben. Det kræver, du sørger for dine events i tabben og baren ikke bobler op gennem DOM hierakiet og udløser event'en.
Begge dele kræver en hel del hensyntagen til browserforskelle og kræver en del arbejde ;o)
zips -> Det er noget møg. Så er spørgsmålet, om vi stadig bør optimere til Internet Explorer 6.0? Hvis vi bør - har du så et bud på, hvordan det kan fikses? Jeg er rigtig dårlig til det med at optimere til et utal af browsere.
olebole -> Det virker som en rigtig god løsning. Jeg har lige testet det, men jeg kan kun få det til at virke til FireFox. Har du en idé til, hvordan jeg kan få det til at virke i Internet Explorer?
*BUMP* Jeg ved godt, at jeg har spurgt om meget, og jeg er virkelig glad for jeres hjælp - mange tak skal I have, men kan jeg få en eller anden til at hjælpe med mit problem i ovenstående kommentar?
Desværre kan jeg ikke hjælpe da jeg ikke ved nok om javascript til at kunne udtale mig :) Mit indlæg var ren info :)
Synes godt om
Ny brugerNybegynder
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.