Visa och dölja element med JavaScript

Transkript

1 Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Visa och dölja element Förändra elementets sdl för display eller visibility display="block" display="hidden" visibility="visible" visibility="hidden" 2

3 Visa/dölja e8 element med display HTML- och CSS- kod: <div id="b"> </div> #b {display:none;} Visas som en del av sidans innehåll JavaScript- kod: Referens: var element = document.getelementbyid("b"); Visa: element.style.display = "block"; (eller element.style.display = "inline"; eller något annat, beroende på hur taggen ska visas.) Dölj: element.style.display = "none"; 3

4 Exempel: Expanderbar meny En innehållsförteckning (meny) har eb antal undermenyer som kan expanderas I det första exemplet visas eller döljs undermenyn genom ab klicka på dess rubrik. Alla undermenyer kan visas samddigt. I det andra exemplet visas undermenyn genom ab klicka på dess rubrik. Den kan dock inte döljas igen. Istället döljs den, då man klickar på rubriken för en annan undermeny. Alltså kan endast en undermeny åt gången visas. ex3-1" ex3-2" I det tredje exemplet kombineras de båda föregående. Endast en meny åt gången kan visas, men det går också ab dölja den meny som visas genom ab klicka på dess rubrik. ex3-3" HTML- och CSS- kod är densamma i alla tre fallen. Det enda som skiljer exemplen åt är funkdonen showhidemenu. 4

5 Exempel: Menyn med annan layout! Samma föregående exempel, fast med en annan layout HTML- och JavaScript- koden är exakt densamma som i ex3-3 Endast Dllägg av några sdlar i sdlmallen, för ab ändra sdl för menyerna ex4" 5

6 Visa/dölja e8 element med visibility Med reladv posidonering Visas som en del av sidans innehåll HTML- och CSS- kod: <div id="b"> </div> #b {posidon:reladve; visibility:hidden;} JavaScript: Referens: var element = document.getelementbyid("b"); Visa: element.style.visibility = "visible"; Dölj: element.style. visibility = "hidden"; 6

7 Exempel: Meny med visibility Samma kod som i exempel 4, med den skillnaden ab visibility används istället för display. ex5" Ändringar från display Dll visibility både i JavaScript- koden och CSS- koden 7

8 Visa/dölja e8 element med visibility Med absolut posidonering Visas i eb lager framför övrigt innehåll på sidan HTML- kod: <div id="b"> </div> #b {posidon:absolute; visibility:hidden;} JavaScript: Referens: var element = document.getelementbyid("b"); Visa: element.style.visibility = "visible"; Dölj: element.style. visibility = "hidden"; 8

9 Visa/dölja e8 element med visibility Med absolut posidonering inom eb block HTML- och CSS- kod: <div id= a > <div id= b > < > </div> </div> JavaScript: Referens: var element = document.getelementbyid( b ); Visa: element.style.visibility = visible"; Dölj: element.style.visibility = hidden"; #a {posidon:reladve;} #b {posidon:absolute; visibility:hidden;} PosiDoneras inom det omgivande blocket 9

10 Exempel: Meny i e8 lager Menyn i föregående exempel utökas med posidonering Steg 1 HTML- och JavaScript- koden är exakt densamma som Ddigare CSS- koden förändras på följande säb: li- taggen som omger undermenyn får reladv posidonering den inre menyn (ul) får absolut posidonering ex6-1" Steg 2 händelsehanterarna ändrade, så ab menyerna dyker upp på onmouseover och försvinner på onmouseout funkdonen är uppdelad i varsin funkdon för händelserna ex6-2" 10

11 Exempel: Popupmenyer I exempel 6-2 finns eb problem. Menyerna försvinner då man för ner markören över dem. Deba är här fixat, genom ab flyba in händelsehanterarna Dll li- taggen. Eb class- abribut i li- taggarna, för ab enkelt komma åt dem med getelementsbyclassname i JavaScript- koden. Ta bort parentnode i referensen Dll undermenyn. ex7" 11

12 Exempel: Ändring av z- index Olika boxar med informadon ligger delvis överlappande varandra. posidon:absolute och förskjuten ler- koordinat Man kan bläddra igenom boxarna, så ab man ändrar vilken som ska ligga längst fram ändra z- index ex8" 12

13 display eller visibility? display visas inbäddad i dokumentets presentadon värde på display bestämmer hur det bäddas in block, eb eget stycke inline, en del av raden/ stycket döljs med värdet none övrigt innehåll trycks ihop visibility och posidon:absolute visas i eb lager framför övrigt innehåll kan posidoneras med koordinater flera lager kan förekomma z- index bestämmer lagerskikt (z- axel) ju högre värde på z- index, desto längre fram döljs med värdet hidden övrigt innehåll påverkas ej 13