Vis og skjul et element
I denne artikel gennemgås, hvorledes et element vises og skjules ved hjælp af visibility-attributten, og jeg forklarer, hvordan du sikrer dig, at det virker i alle (moderne) browsere.
En af de mange interessante muligheder, vi har fået med dynamisk HTML, er HTML-attributten Visibility. Visibility er en style, der kan tildeles et HTML-element, som er et blok-element - d.v.s. et element, der definerer et område på skærmen
Hvis du fører musen henover den røde prik herunder, kan du se en af mulighederne.
| 
|
At få en blå prik til at komme tilsyne og forsvinde igen forekommer måske ikke at være verdens ottende vidunder. Men som vi skal se kan den føre til ganske meget.
Før vi begynder at bruge teknikken til lidt mere avancerede opgaver skal vi imidlertid lege lidt mere med kulørte prikker.
Der er to forhold af afgørende betydning for anvendelsen af denne teknik. For det første er attributtens værdi for hhv. synlig og skjult forskellige i Netscape Navigator 4 og Internet Explorer 4+, således:
| NN 4 | IE4+ og NN 6 | |
| Synlig | show | visible |
| Skjult | hide | hidden |
For det andet er den såkaldte Document Object Model for et HTML-element forskellig for hhv IE og NN, og forskellig fra NN4 til NN6.
Det betyder, at objektet blaaklats's visibility-egenskab i NN4 styres ved hjælp af:
document.layers['blaaklat'].visibility="hide" document.layers['blaaklat'].visibility="show"
- mens den tilsvarende styring i IE er
document.all['blaaklat'].style.visibility="hidden" document.all['blaaklat'].style.visibility="visible"
- hvor "blaaklat" svar til den blå klats ID.
De moderne browsere - IE fra version 5 og nyere og Netscape 6 og nyere - bruger en helt anden metode:
objekt=document.getElementById("ID").style
objekt.visibility.style="visible"
og
objekt=document.getElementById("ID").style
objekt.visibility.style="hidden"
Det er denne metode, der anbefales af W3C.
Bevæbnet med denne viden er det forholdsvis let at manipulere med et objekts visibility-attribut i den ene, den anden eller den tredie browser. At manipulere med visibility-attributten, så vi får det ønskede resultat i alle browsere er straks lidt mere krævende.
Xbrowser DHTML
(Xbrowser er en måde, hvorpå nogle (amerikanere) skriver "cross-browser". Jeg har adopteret udtrykket for at tilkendegive de ting, der virker i alle moderne browsere.)
Effekten på denne side handler om at manipulere med en egenskab, der knytter sig til det område på skærmen, hvor den blå prik befinder sig.
Dette område har vi defineret på følgende måde:
<div id="blaaklat"> <img src="blaaklat.gif" width="20" height="20" border="0"> </div>
Områdets style er defineret i et stylesheet, der ser således ud:
#blaaklat {
visibility:hidden;
width:30px;
height:30px;
}
Bemærk, at attributten visibility er sat til skjult.
Denne style betyder, at den blå prik - eller rettere området, der rummer den blå prik - ikke er synlig, når siden indlæses.
Den røde prik placeres i et andet område, på følgende måde:
<div id="trigger"> <a href="#" onMouseOver="visObjekt()" onMouseOut="skjulObjekt()"> <img src="redspot.gif" width="20" height="20" border="0"></A> </div>
Bemærk her, at onMouseOver udløser funktionen visObjekt(), mens onMouseOut udløser funktionen skjulObjekt().
Microsoft Internet Explorer
Funktionaliteten i denne teknik ligger naturligvis i disse JavaScript funktioner.
Hvis der kun var én browser i hele verden og den hed Internet Explorer, ville det være let nok. Så ville funktionen se således ud:
function visObjekt(){
document.all["blaaklat"].style.visibility="visible";
}
- mens den modsvarende funktion ville se således ud:
function skjulObjekt(){
document.all["blaaklat"].style.visibility="hidden";
}
Netscape Navigator 4
Hvis situationen var, at Marc Andreesens browser havde fortsat sin himmelflugt og Netscape 4 i dag var den enerådende browser, ville de tilsvarende funktioner til denne browser se således ud:
function visObjekt(){
document.layers["blaaklat"].visibility="show";
}
og
function skjulObjekt(){
document.layers["blaaklat"].visibility="hide";
}
Moderne browsere
Imidlertid er der jo sket en del siden 1997/98, hvor version 4 browserne kom frem. Hvis browseren er Internet Explorer 5 eller nyere eller Netscape Navigator 6, vil funktionen skulle se således ud:
function visObjekt(){
objekt = document.getElementById("blaaklat").style
objekt.visibility="visible";
og
function skjulObjekt(){
objekt = document.getElementById("blaaklat").style
objekt.visibility="hidden";
Browser detektion og kodeforgrening
Princippet for, hvad vi bør gøre, hvis det skal virke i alle browsere, er sådan set klart nok: Vi skal detektere, hvilken browser der er tale om, og udsætte hver browser for et script, som denne browser forstår.
Det er sådan set let nok at lave flere forskellige sider, en side til hver browser.
Det er imidlertid noget af en ørkenvandring, hvis vi ønsker at bruge mange DHTML-effekter, så vi bider i det sure æble og udvikler en teknik, hvor browserdetektion og kodeforgrening til de korrekte funktioner sker "on the fly", d.v.s. efterhånden som vi får brug for at udføre de ting, vi ønsker.
Vi starter med at foretage en browserdetektering:
var ver3 = (navigator.appVersion.charAt(0) <= "3") ? true : false; var dom = (document.getElementById) ? true : false; var ie4 = (document.all && !document.getElementById) ? true : false; var ns4 = (document.layers) ? true : false; var ie5 = (document.all && document.getElementById) ? true : false; var n6 = (document.getElementById && !document.all) ? true : false; var msie = (document.all) ? true: false;
Hvad der foregår her er forklaret i artiklen om browserdetektering.
Således bevæbnede kan vi lave vi nu lave vores vis-og-skjul-funktioner:
Jeg har følgende bemærkninger at gøre til denne kode:
- Du bør benytte lejligheden til at omdirigere evt. version 3 browsere til en standardside, der forklarer, at dine websider kun kan læses af moderne browsere. Min standardside er denne.
- I øvrigt virker scriptet på den måde, at der først testes for, om det er en W3C-kompatibel browser, det vil sige om browseren forstår objektreferencen
(document.getElementById)(det er variablen dom). Det gør sandsynligvis 90-95 % af alle dine besøgende. Dernæst testes for, om browseren forstår objektreferencendocument.all. Det er i realiteten en test for Internet Explorer 4, som der stadig er nogen af. Endelig testes for Netscape 4.
Konklusion:
Jeg har sådan set nået mit mål: at lave et sæt funktioner, der kan skjule og vise et HTML-element.
Det kan imidlertid gøres noget bedre.
Manglerne ved denne løsning er at vi meget vel kan komme ud for at skulle udføre operationen på mange elementer, og ikke blot en blå prik. Så bliver det til mange næsten ensartede vis-og-skjul-funktioner med hver deres mange kodelinier, hvor de forskellige objekter skal identificeres som blaaklat, gulprik, lillafirkant og hvad ved jeg.
Det næste mål er derfor at lave et par funktioner, der ser således ud:
function visObjekt(objekt) function skjulObjekt(objekt)
- hvor ordet objekt i parantesen entydigt identificerer det præcise HTML-element, vi ønsker at skjule eller vise. Således f.eks. visObjekt("blaaklat"), og Presto! blaaklat vises.
Vejen dertil går over to begreber: dels begrebet parameteroverførsel, som er den JavaScript-teknik, der netop går ud på at identificere hvilket element (eller objekt, som det oftest kaldes i disse sammenhænge), en given funktion skal udføres på. Og dels begrebet blokvariable, som er den teknik, der går ud på at sørge for, at det netop nævnte objekt "ser ens ud", uanset hvilken browser, der er tale om.
Oprettet: 24. juni 2002
Senest opdateret: 21. maj 2003
