[Javascript] Layer laten zien / verbergen

[Jorijn]

Hallo,

Ik heb een div layer die ik wil laten openen en verbergen met 1 link. nu werkt dit goed in Internet Explorer en Firefox.

De enige die nu moeilijk doet is Opera.

De link

code:

<a class="small" onclick="ChangeSmileysLink(this);" href="javascript:toggleLayer('smileys');">Toon Smileys</a>

Het javascript dat ik gebruik:

code:

function ChangeSmileysLink(id)
{
    if (id.innerHTML == "Toon Smileys")
    {
        id.innerHTML = "Verberg Smileys";
    } else {
        id.innerHTML = "Toon Smileys";
    }
}
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

Nu werkt de link veranderen in alle browsers, enkel de layer showen en hiden niet.

Heeft iemand tips/snippets/links? Graag reactie

[XWB]

Waarom laat je document.all en document.layers niet achterwege? Geen kat die oude browsers nog gebruikt (hoop ik toch ).

JavaScript:

function toggleLayer(whichLayer)
{
    var style = document.getElementById(whichLayer).style;
    style.display = ( style2.display == "none" ) ? "" : "none";
}

[Jorijn]

Hacku schreef op donderdag 07 december 2006 @ 16:46:
Waarom laat je document.all en document.layers niet achterwege? Geen kat die oude browsers nog gebruikt (hoop ik toch ).

JavaScript:

function toggleLayer(whichLayer)
{
    var style = document.getElementById(whichLayer).style;
    style.display = ( style2.display == "none" ) ? "" : "none";
}

Bedankt voor de snelle reactie, echter hiermee doet IE én Opera het niet meer (FF niet getest).

[XWB]

Ik had natuurlijk een tikfout gemaakt, maar dat had je zo kunnen zien

JavaScript:

var style = document.getElementById(whichLayer).style;
style.display = ( style.display == "none" ) ? "" : "none";

[Jorijn]

Hacku schreef op donderdag 07 december 2006 @ 16:58:
Ik had natuurlijk een tikfout gemaakt, maar dat had je zo kunnen zien

JavaScript:

var style = document.getElementById(whichLayer).style;
style.display = ( style.display == "none" ) ? "" : "none";

Helaas, nog steeds geen effect

[moozzuzz]

Jorijn schreef op donderdag 07 december 2006 @ 18:22:
Helaas, nog steeds geen effect

Wat is de foutmelding, ik kan geen fout in de code vinden van Hacku

[XWB]

Jorijn schreef op donderdag 07 december 2006 @ 18:22:
[...]


Helaas, nog steeds geen effect

Met deze code opzet lukt het hier prima:

HTML:

<script type="text/javascript">
function ChangeSmileysLink(id)
{
    if (id.innerHTML == "Toon Smileys")
    {
        id.innerHTML = "Verberg Smileys";
    } else {
        id.innerHTML = "Toon Smileys";
    }
}
function toggleLayer ( whichLayer )
{
    var style = document.getElementById ( whichLayer ).style;
    style.display = ( style.display == "none" ) ? "" : "none";
}
</script>

<a class="small" onclick="ChangeSmileysLink(this);" href="javascript:toggleLayer('smileys');">Toon Smileys</a>

<div id="smileys" style="display: none;">
Hier een hoop smileys of whatever :P
</div>

Overigens kan dit alles in één functie:

HTML:

<script type="text/javascript">
function toggleLayer ( whichLayer, alink )
{
    var style = document.getElementById ( whichLayer ).style;
    
    if ( style.display == "none" )
    {
        style.display = "";
        alink.innerHTML = "Verberg Smileys";
    }
    else
    {
        style.display = "none";
        alink.innerHTML = "Toon Smileys";
    }
}
</script>

<a class="small" onclick="toggleLayer('smileys', this)" href="javascript:void(null);">Toon Smileys</a>

<div id="smileys" style="display: none;">
Hier een hoop smileys of whatever :P
</div>

[ Voor 26% gewijzigd door XWB op 07-12-2006 19:27 ]

[Verwijderd]

JavaScript:

else if (document.layers)
{
  // this is the way nn4 works
  var style2 = document.layers[whichLayer].style;
  style2.display = style2.display? "":"block";
}

Mijn hemel waar heb je dit vandaan? Netscape 4 is toch al wel een jaar of 3 totaal niet relevant meer.

[moozzuzz]

Verwijderd schreef op donderdag 07 december 2006 @ 20:19:
Netscape 4 is toch al wel een jaar of 3 totaal niet relevant meer.

Gelukkig (was een rot-browser;^)

[crisp]

* crisp wijst ook nog even op deze: The useless javascript: pseudo-protocol

[Jorijn]

Iedereen bedankt voor de bijdrage.

De code van Hacku deed zijn werk prima

Overigens heb ik nu deze code om in te voeren:

JavaScript:

function insert(el,ins) {
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
    el.focus();
    var range = document.selection.createRange();
    range.text = ins + range.text;
    }
}

Bij de UBB knoppen werkt deze. Echter als ik deze toepas op een plaatste (smiley) werkt deze niet..

Edit Fixed