---

Hej NG

Jeg bruger nedenstående simple javascript til at vise/skjule indhold af en
<div>
Nu vil jeg gerne udbygge scriptet, så linket der aktiverer funktionen viser
"Vis" når indholdet er skjult, og "Skjul" når indholdet er vist. Hvordan gør
jeg det?

<script type="text/javascript">
function visElement(objekt) {
if (document.getElementById(objekt).style.display=="block")
{
document.getElementById(objekt).style.display="none";
}
else {
document.getElementById(objekt).style.display="block";
}
}
</script>

<div id="blok1" style="display:none;">Tekst</div><br>
<a href="#" onclick="visElement('blok1'); return false;">Vis/Skjul</a>

På forhånd tak!
-Mathias

---

On Fri, 27 Oct 2006 11:39:06 +0200, "Gearløs"
<baggadapFJERN_DETTE@hotmail.com> wrote:

>Hej NG
>
>Jeg bruger nedenstående simple javascript til at vise/skjule indhold af en
><div>
>Nu vil jeg gerne udbygge scriptet, så linket der aktiverer funktionen viser
>"Vis" når indholdet er skjult, og "Skjul" når indholdet er vist. Hvordan gør
>jeg det?

Du kan prøve følgende:

<script type="text/javascript">
function visElement(linkElement,objekt) {
   var element = document.getElementById(objekt);
   if (element.style.display == 'block') {
      element.style.display = 'none';
      linkElement.removeChild(linkElement.childNodes[0]);
linkElement.appendChild(document.createTextNode('Vis'));
   }
   else {
      element.style.display = 'block';
      linkElement.removeChild(linkElement.childNodes[0]);
linkElement.appendChild(document.createTextNode('Skjul'));
   }
}
</script>

<div id="blok1" style="display:none;">Tekst</div><br>
<a href="#" onclick="visElement(this,'blok1');return false;">Vis</a>


Alternativt kan du også have endnu et link, hvor du veksler mellem at
dét og dit oprindelige link bliver vist/skjult, hvor det ene link så
er "Vis" og det andet er "Skjul".

--
Med venlig hilsen,
Martin Mouritzen.
http://www.siteloom.dk

---

"Martin Mouritzen" <martin@siteloom.dk> wrote in message
news:kbm3k2166duj8h8knf42q9or1ut9mve9hi@4ax.com...
> On Fri, 27 Oct 2006 11:39:06 +0200, "Gearløs"
> <baggadapFJERN_DETTE@hotmail.com> wrote:
>
> >Hej NG
> >
> >Jeg bruger nedenstående simple javascript til at vise/skjule indhold af
en
> ><div>
> >Nu vil jeg gerne udbygge scriptet, så linket der aktiverer funktionen
viser
> >"Vis" når indholdet er skjult, og "Skjul" når indholdet er vist. Hvordan
gør
> >jeg det?
>
> Du kan prøve følgende:
>
> <script type="text/javascript">
> function visElement(linkElement,objekt) {
> var element = document.getElementById(objekt);
> if (element.style.display == 'block') {
> element.style.display = 'none';
> linkElement.removeChild(linkElement.childNodes[0]);
> linkElement.appendChild(document.createTextNode('Vis'));
> }
> else {
> element.style.display = 'block';
> linkElement.removeChild(linkElement.childNodes[0]);
> linkElement.appendChild(document.createTextNode('Skjul'));
> }
> }
> </script>
>
> <div id="blok1" style="display:none;">Tekst</div><br>
> <a href="#" onclick="visElement(this,'blok1');return false;">Vis</a>
>
>
> Alternativt kan du også have endnu et link, hvor du veksler mellem at
> dét og dit oprindelige link bliver vist/skjult, hvor det ene link så
> er "Vis" og det andet er "Skjul".
>
> --
> Med venlig hilsen,
> Martin Mouritzen.
> http://www.siteloom.dk

Hvordan vil koden se ud, hvis det skal bruges bilelder til VIS/SKJUL?

/Thrane

---

On Fri, 27 Oct 2006 13:13:08 +0200, "Thrane" <kyskoen@stofanet.dk>
wrote:

>Hvordan vil koden se ud, hvis det skal bruges bilelder til VIS/SKJUL?

Så kan du nok bruge noget ala. nedenstående, som bare skifter "src"
attributten på billedet.

Hvis du har en mere kompliceret struktur, og billedet ikke er det
første element i linket (og derfor ikke vil ligge som childNodes[0])
kan du give det et ID og få fat på det med document.getElementById()
funktionen.


<script type="text/javascript">
function visElement(linkElement,objekt) {
   var element = document.getElementById(objekt);
   if (element.style.display == 'block') {
      element.style.display = 'none';
      var imageElement = linkElement.childNodes[0];
      imageElement.src = 'vis.gif';
   }
   else {
      element.style.display = 'block';
      var imageElement = linkElement.childNodes[0];
      imageElement.src = 'skjul.gif';
   }
}
</script>
</head>
<body>

<div id="blok1" style="display:none;">Tekst</div><br>
<a href="#" onclick="visElement(this,'blok1');return false;"><img
src="vis.gif"></a>


--
Med venlig hilsen,
Martin Mouritzen.
http://www.siteloom.dk

---

"Martin Mouritzen" <martin@siteloom.dk> wrote in message
news:goq3k2935ns09pe3422c0qt7d45al94bo1@4ax.com...

<SNIP>

> --
> Med venlig hilsen,
> Martin Mouritzen.
> http://www.siteloom.dk

Tak Martin.
Virker super efter hensigten!
Koden er røget i gemmerne...

/Thrane

---

Gearløs wrote:
> if (document.getElementById(objekt).style.display=="block")

Et lille tip - det er ikke så smart at referere til objekterne på den
måde, slet ikke hvis du skal bruge dem flere gange. For det første
vil du få en lang række fejl hvis objektet af den ene eller anden
grund ikke er til rådighed og for det andet vil browseren skulle finde
objektet i DOM træet hver eneste gang. Det er meget smartere før at
tildele objektet til en variabel og så benytte denne.

---

Henrik Stidsen wrote:
> Gearløs wrote:
>> if (document.getElementById(objekt).style.display=="block")
>
> Et lille tip - det er ikke så smart at referere til objekterne på den
> måde, slet ikke hvis du skal bruge dem flere gange. For det første
> vil du få en lang række fejl hvis objektet af den ene eller anden
> grund ikke er til rådighed og for det andet vil browseren skulle finde
> objektet i DOM træet hver eneste gang. Det er meget smartere før at
> tildele objektet til en variabel og så benytte denne.

og det gøres således:

var Element = document.getElementById(objekt);
if (Element.style.display=="block")

---

Martin presented the following explanation :

> var Element = document.getElementById(objekt);
> if (Element.style.display=="block")

Man bør egentlig gøre sådan:
var Element = document.getElementById(objekt);
if(Element != null)
{
   if (Element.style.display=="block")
   {
   }
}

Altså med et null check, ellers risikerer man fejl.

--
Henrik Stidsen - http://henrikstidsen.dk/
Never tell anyone that you're: writing a book, going on a diet,
exercising, taking a course, or quitting smoking. They'll encourage you
to death. - Lynn Johnston

---

Henrik Stidsen wrote:
> Martin presented the following explanation :
>
>> var Element = document.getElementById(objekt);
>> if (Element.style.display=="block")
>
> Man bør egentlig gøre sådan:
> var Element = document.getElementById(objekt);
> if(Element != null)
> {
> if (Element.style.display=="block")
> {
> }
> }
>
> Altså med et null check, ellers risikerer man fejl.
>

Det er så rigtigt

---

On Tue, 31 Oct 2006 20:03:29 +0100, Henrik Stidsen <nntpspam@hs235.dk>
wrote:

>Man bør egentlig gøre sådan:
>var Element = document.getElementById(objekt);
>if(Element != null)
>{
>   if (Element.style.display=="block")
>   {
>   }
>}
>
>Altså med et null check, ellers risikerer man fejl.

Egentlig ikke. Det kommer an på om du ikke ved om elementet findes på
siden, det gør man jo i det her tilfælde.

Et mere brugbart check kunne være om browseren overhovedet har
getElementById funktionen, men det har de fleste browsere trods alt nu
til dags

--
Med venlig hilsen,
Martin Mouritzen.
http://www.siteloom.dk

---

Martin Mouritzen has brought this to us :
>> Altså med et null check, ellers risikerer man fejl.

> Egentlig ikke. Det kommer an på om du ikke ved om elementet findes på
> siden, det gør man jo i det her tilfælde.

Du kan reelt aldrig vide om DOM træet er blevet bygget korrekt eller om
der er sket fejl således at elementet ikke findes.

Men til ting man ved er der - og hvis de ikke er der så er siden
alligevel ødelagt - behøver man ikke bruge den slags fejlcheck.

> Et mere brugbart check kunne være om browseren overhovedet har
> getElementById funktionen, men det har de fleste browsere trods alt nu
> til dags

Ja er det ikke standarden efterhånden ?

--
Henrik Stidsen - http://henrikstidsen.dk/
"Health nuts are going to feel stupid someday, lying in hospitals dying
of nothing." - Redd Foxx

---

On Tue, 31 Oct 2006 23:35:23 +0100, Henrik Stidsen <nntpspam@hs235.dk>
wrote:

>> Egentlig ikke. Det kommer an på om du ikke ved om elementet findes på
>> siden, det gør man jo i det her tilfælde.
>
>Du kan reelt aldrig vide om DOM træet er blevet bygget korrekt eller om
>der er sket fejl således at elementet ikke findes.

Joooeh, det kan man nu godt. Jeg er ihvertfald aldrig stødt på den
slags DOM-træ fejl uden at der er deciderede grove fejl i HTML'en.
(Renderingsfejl er en helt anden ting).

>Men til ting man ved er der - og hvis de ikke er der så er siden
>alligevel ødelagt - behøver man ikke bruge den slags fejlcheck.

Især slet ikke når det element der kalder funktionen netop er det
element der skal udføres en handling på (som i dette tilfælde).

Men nu skal jeg heller ikke spille hellig, ét fejlcheck for meget er
som regel bedre end ét for lidt, og man kunne sagtens forestille sig
at scriptet blev pakket ind i en funktion der er noget mere avanceret
og fejlchecket lige pludselig er i orden.

>> Et mere brugbart check kunne være om browseren overhovedet har
>> getElementById funktionen, men det har de fleste browsere trods alt nu
>> til dags
>
>Ja er det ikke standarden efterhånden ?

Jo, det er standarden. Det skulle kun være hvis man skulle tage højde
for browsere som IE 4.0, men supporten for dén er vist stoppet langt
de fleste steder

--
Med venlig hilsen,
Martin Mouritzen.
http://www.siteloom.dk

---

Henrik Stidsen <nntpspam@hs235.dk> writes:

[document.getElementById]
> Ja er det ikke standarden efterhånden ?

Der er mange ting der er standard, uden at fx IE 6 understøttede
det. Fx store dele af CSS 2, en standard fra 1997. Jeg har ikke
tjekket hvor meget IE 7 har fået med.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:
> Henrik Stidsen <nntpspam@hs235.dk> writes:
>
> [document.getElementById]
>
>>Ja er det ikke standarden efterhånden ?
>
>
> Der er mange ting der er standard, uden at fx IE 6 understøttede
> det. Fx store dele af CSS 2, en standard fra 1997. Jeg har ikke
> tjekket hvor meget IE 7 har fået med.

Nu har CSS og javascript intet med hinanden at gøre.
Men de visuelle browsere idag understøtter ihvertfald DOM.
Dog er der sikkert nogle tekstbaseret browsere der ikke understøtter det.

CSS er så en helt anden snak!
Men IE7 har fået mere med end i IE6, men langt fra ligeså meget som
Firefox 1.5 understøtter. Men så er det dejligt der er lavet et
javascript hack som går ind og får IE6/7 til at understøtte endnu flere
CSS elementer.

Firefox 2 er der vist nogle problemer med rendering af nogle elementer i
CSS2.

Men Firefox 1.5/2 er allerede startet med at supportere væsentlige dele
af CSS3 som stadig kun er på udviklingsstadiet. Det er faktisk en del af
de elementer der hedder noget med
-moz-xxxx det er CSS3 support, de kalder dem vistnok bare -moz-xxxx for
ikke at gå ind og ødelægge noget. Men så er de ihverfald indbygget og
kan sikkert hurtigt ændres fra -moz- til xxxx :)

En fed der forresten kommer i CSS3 er: border-radius.
Eks. <http://virtuelvis.com/download/218/border-radius.html>

Virker så vidt jeg ved kun i Firefox.

---

"Henrik Stidsen" <henrikstidsen@gmail.com> writes:

> Jow, men nu tænkte jeg også på standard som værende normalen, den
> funktion alle browserne understøtter - er også noget bøvl når man
> kan bruge samme ord om flere ting ;)

Ja, det er netop forskellen på de-fakto-standard og de-jura-standard:
Hvad der *er* i forhold til hvad der *burde* være. :)

Jeg kan så fortælle at mindst en version af Windows Mobile IE
hverken understøtter document.getElementById eller document.all :)

/L 'I teorien er teori og praksis det samme'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Martin <maa@scandesigns.dk> writes:

> Nu har CSS og javascript intet med hinanden at gøre.

Lidt har de. Både CSS og DOM er W3C-standarder (og CSS 2 er ældre
end DOM 2).

> Men de visuelle browsere idag understøtter ihvertfald DOM.

Det ville være dejligt, men nej. IE6 understøtter fx ikke DOM 2
Events, og ... teste teste ... det gør IE7 heller ikke.
Altså, fx, document.body.addEventListener findes ikke.

> CSS er så en helt anden snak!

Ja, desværre. Det er, som sagt, en ældre standard, tilbage fra
1997 (hvor Microsoft vist stadig var medlem af W3C). Nu, ni år
efter er de ved at få nogle af de centrale egenskaber med, og
mangler stadig de fleste selektorer.

> Men IE7 har fået mere med end i IE6, men langt fra ligeså meget som
> Firefox 1.5 understøtter. Men så er det dejligt der er lavet et
> javascript hack som går ind og får IE6/7 til at understøtte endnu
> flere CSS elementer.

Desværre på bekostning af performance, hvis jeg ikke husker galt.

> Firefox 2 er der vist nogle problemer med rendering af nogle elementer
> i CSS2.

Der er altid fejl, og sikkert også mangler, men de kan være mere eller
mindre centrale. Både Mozilla og Opera har næsten fuldstændige
implementationer af CSS2. Safari er vist også tæt på (var de ikke
de første til at vise Acid 2 rigtigt?)

> En fed der forresten kommer i CSS3 er: border-radius.
> Eks. <http://virtuelvis.com/download/218/border-radius.html>

Den er cool (og har været der et stykke tid). Jeg ser endnu mere
frem til muligheden for at stykke en ramme sammen af billeder :)

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote on 01-11-2006 :
>> Men de visuelle browsere idag understøtter ihvertfald DOM.

> Det ville være dejligt, men nej. IE6 understøtter fx ikke DOM 2
> Events, og ... teste teste ... det gør IE7 heller ikke.
> Altså, fx, document.body.addEventListener findes ikke.

Nej IE bruger attachEvent med en lidt anden syntax der delvist er
begrundet i deres model for hvorden events bobbler gennem systemet.

--
Henrik Stidsen - http://henrikstidsen.dk/
"Health nuts are going to feel stupid someday, lying in hospitals dying
of nothing." - Redd Foxx

---

Lasse Reichstein Nielsen skrev:

> Ja, desværre. Det er, som sagt, en ældre standard, tilbage fra
> 1997 (hvor Microsoft vist stadig var medlem af W3C). Nu, ni år
> efter er de ved at få nogle af de centrale egenskaber med, og
> mangler stadig de fleste selektorer.

De fleste?

Ifølge <http://css-discuss.incutio.com/?page=IE7> understøtter IE7
følgende (ud over hvad IE6 understøttede):

* > (Child)
* + (Direct Adjacent Sibling)
* ~ (Indirect Adjacent Sibling)
* [attr] (Basic Attribute)
* [attr="value"] (Attribute/Value [sort of])
* [attr~="value"] (Attribute/Spaced Values)
* [attr|="value"] (Attribute/Hyphen-Sep Values)
* [attr*="value"] (Attribute Substring Selector)
* [attr^="value"] (Attribute Starting String Selector)
* [attr$="value"] (Attribute Ending String Selector)
* :hover
* :first-child

Der mangler support for :focus, :active, generated content
(:before/:after), :lang samt nogle specialtilfælde af selektorer
(se note1-4).

I forhold til selektorer er IE7 i mine øjne milevidt foran IE6. Der
er stadig et pænt stykke vej til Opera/FF, men manglerne er ikke
nær så graverende som før.
--
Bolig søges. Andel eller leje i Emdrup, Nordvest, Nørrebro, Søborg
eller Brønshøj, max 6000 pr. måned.
Kontakt pr. mail - nospam(at)gyros.dk
Jens Gyldenkærne Clausen

---

Lasse Reichstein Nielsen wrote:

> [document.getElementById]
> > Ja er det ikke standarden efterhånden ?

> Der er mange ting der er standard, uden at fx IE 6 understøttede
> det. Fx store dele af CSS 2, en standard fra 1997. Jeg har ikke
> tjekket hvor meget IE 7 har fået med.

Jow, men nu tænkte jeg også på standard som værende normalen, den
funktion alle browserne understøtter - er også noget bøvl når man
kan bruge samme ord om flere ting ;)

---

Martin Mouritzen wrote:

> >> Egentlig ikke. Det kommer an på om du ikke ved om elementet findes på
> >> siden, det gør man jo i det her tilfælde.

> >Du kan reelt aldrig vide om DOM træet er blevet bygget korrekt eller om
> >der er sket fejl således at elementet ikke findes.

> Joooeh, det kan man nu godt. Jeg er ihvertfald aldrig stødt på den
> slags DOM-træ fejl uden at der er deciderede grove fejl i HTML'en.
> (Renderingsfejl er en helt anden ting).

Lige for tiden arbejder jeg en del med dynamisk indsatte elementer. Her
er der en meget reel risiko for at et element ikke findes fordi det
ikke er blevet indsat i træet - når først der sker en fejl kan der
ske masser af følgefejl, dem gælder det om at begrænse.

> >Men til ting man ved er der - og hvis de ikke er der så er siden
> >alligevel ødelagt - behøver man ikke bruge den slags fejlcheck.

> Især slet ikke når det element der kalder funktionen netop er det
> element der skal udføres en handling på (som i dette tilfælde).

Nej så er risikoen ret lille :) Og det er da også bedre performance
at sende objektet med rundt end at skulle finde det hver gang en ny
funktion skal bruge det.

> Men nu skal jeg heller ikke spille hellig, ét fejlcheck for meget er
> som regel bedre end ét for lidt, og man kunne sagtens forestille sig
> at scriptet blev pakket ind i en funktion der er noget mere avanceret
> og fejlchecket lige pludselig er i orden.

Det handler jo også om både overblik og gode vaner - hvis man ikke
har 100% kontrol med hvilke kald der bliver lavet til ens kode så bør
man lave fejlcheck på alt.

> >> Et mere brugbart check kunne være om browseren overhovedet har
> >> getElementById funktionen, men det har de fleste browsere trods alt nu
> >> til dags

> >Ja er det ikke standarden efterhånden ?

> Jo, det er standarden. Det skulle kun være hvis man skulle tage højde
> for browsere som IE 4.0, men supporten for dén er vist stoppet langt
> de fleste steder

Ja heldigvis :) Næste mareridt bliver forskellene mellem IE6 og IE7
for der er garanteret rigtig mange (herunder systemadministratorer på
skoler og i virksomheder) der nægter at opgradere til IE7...

---

Tak for alle de gode indlæg! Jeg har nu fået det til at virke.

Lige et tillægsspørgsmål: Hvordan gøres nemmest så vis/skjul funktionen blot
er åben, og links'ene ikke vises, hvis javascript er slået fra?

Venligst,
Mathias

---

Gearløs wrote:

> Er der nogen ulemper ved at tilføje links og div med document.write() i
> stedet?

Ja, de bliver ikke tilføjet til DOM træet (du kan ikke være sikker
på det i hvert fald) og så er det dårlig stil at gøre det sådan.
Jeg vil næsten gå så langt som at sige at i moderne XHTML/JavaScript
baserede sider har du aldrig brug for document.Write().