Uitklapbaar menu compatibiliteit

[Verwijderd]

Ik zit met een naarstig probleempje.
Na heel wat miserie om een deftig uitklapbaar menu'tje te bouwen ben ik op dit gestoten:

code:

function expand(element,figuur) { 
          if (element.style.display=='none'){ 
             element.style.display=''; 
             figuur.src='images/icons/explode_min_b.gif'; 
          } 
          else{ 
             element.style.display='none'; 
             figuur.src='images/icons/explode_plus_b.gif'; 
          } 
     }

offtopic:
Voor de test met GoT icons geprobeerd he

Dit werkt tip top in IE. Nu ben ik bezig mijn site voor Netscape, Opera, Mozilla en IE compatibel aan het herschrijven.
Deze code loopt dus enkel en alleen in IE en daarbuiten wilt ie niks doen.

Ik heb wel zeker 1000 verschillende google opdracht geprobeerd en heel wat ineressante sites gevonden, maar ik krijg niks deftig werkends.
Ook de GoT search heeft me niet veel meer opgeleverd.

[SchizoDuckie]

[edit]
probeer 'm zo eens:

code:

function expand(element,figuur) { 
          if (element.style.display=='none'){ 
             element.style.display='block'; 
             figuur.src='images/icons/explode_min_b.gif'; 
          } 
          else{ 
             element.style.display='none'; 
             figuur.src='images/icons/explode_plus_b.gif'; 
          } 
     }

[nog een edit voor het mooie:]

JavaScript:

// ervan uit gaande dat je standaard een class hebt die de display op none zet.
function expand(element,figuur) 
{ 
   element.style.display = (element.style.display == 'none' || '') ? 'block' : 'none'; 
   figuur.src = (element.style.display == 'none' || '') ? 'images/icons/explode_min_b.gif' : 'images/icons/explode_plus_b.gif'; 
}

[ Voor 133% gewijzigd door SchizoDuckie op 16-11-2003 02:07 ]

[Verwijderd]

In Opera en Mozilla toont hij enkel het figuurtje, maar doet niks, deze code dus:

code:

<img src="images/icons/explode_plus_b.gif" border="0" 
  onClick="expand(sc1,this);" alt="">

In Opera staat daar gewoon iets vaags met de tekst Image in maar voort niks, als ik daar op klik doet ie het dus wel..

Nu nog plaatje in opera en code in mozilla en netscape

In ieder geval al bedankt om op zon uur te reageren


Btw, even om alles duidelijk te maken, ik heb reeds een werkend script in alle browser voor dat uitvouwen, het gaat mij hier enkel dat die plus in een min veranderd, wat dus maar niet wil werken

Het zou imo ook handig zijn voor GoT mocht deze code werkend raken denk ik, GoT is in Opera, Mozilla en Netscape niet 'uitklapbaar' op index vindt je alles toegeklapt en geen prentjes.

[ Voor 57% gewijzigd door Verwijderd op 16-11-2003 13:02 ]

[crisp]

Verwijderd schreef op 16 november 2003 @ 02:28:
[...]
Het zou imo ook handig zijn voor GoT mocht deze code werkend raken denk ik, GoT is in Opera, Mozilla en Netscape niet 'uitklapbaar' op index vindt je alles toegeklapt en geen prentjes.

Heb je in je prefs wel de optie aangezet en ben je ingelogt? de code die hier op GoT wordt gebruikt werkt sinds de laatste grote update ook in Opera en Mozilla hoor

Het is trouwens handiger om de icons te preloaden, en naar de src van je preloaded image te verwijzen.

edit: en wat is sc1? enkel in ie zijn elementen met een id global binnen het window-object, ik vermoed dat je dan in Opera en Mozilla ook gewoon een JS error krijgt, en dat de functie daardoor verder niet uitgevoerd wordt; probeer het eens zo:

HTML:

<img src="images/icons/explode_plus_b.gif" border="0"
  onclick="expand(document.getElementById('sc1'),this);" alt="">

[ Voor 37% gewijzigd door crisp op 16-11-2003 10:47 ]

[Verwijderd]

crisp schreef op 16 november 2003 @ 10:37:
[...]

Heb je in je prefs wel de optie aangezet en ben je ingelogt? de code die hier op GoT wordt gebruikt werkt sinds de laatste grote update ook in Opera en Mozilla hoor

Het is trouwens handiger om de icons te preloaden, en naar de src van je preloaded image te verwijzen.

edit: en wat is sc1? enkel in ie zijn elementen met een id global binnen het window-object, ik vermoed dat je dan in Opera en Mozilla ook gewoon een JS error krijgt, en dat de functie daardoor verder niet uitgevoerd wordt; probeer het eens zo:

Die sc1 is het id van mijn div.

Maar je code van je img doet echt wel wonderen, hoe doet het nu zelf in Mozilla en in Netscape maar in Opera wilt hij mijn image niet tonen, zelf ook niet zon leeg veld met Image in, hij staat er gewoon nergens

offtopic:
Dat staat aangevinkt in mijn prefs ja, werkt perfecto in IE. Maar echt enkel in IE hoor :x

Edit: Laat maar hoor Ik was niet ingelogd toen ik dat teste op GoT. No reason to panic

[ Voor 18% gewijzigd door Verwijderd op 16-11-2003 13:03 ]

[crisp]

try this:

JavaScript:

var plusje = new Image();
plusje.src = 'images/icons/explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'images/icons/explode_min_b.gif';

function expand(element,figuur) {

  if (element.style.display == 'none') {

    element.style.display = '';
    figuur.src = minnetje.src;

  } else {

    element.style.display = 'none';
    figuur.src = plusje.src;

  }

}

[Verwijderd]

Veranderd helaas niks in Opera

[crisp]

compleet voorbeeld, werkt bij mij prima in Opera7

HTML:

<html>
<head>
<title>klapcode</title>
<script type="text/javascript">

var plusje = new Image();
plusje.src = 'images/icons/explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'images/icons/explode_min_b.gif';

function expand(element,figuur) {

  if (element.style.display == 'none') {

    element.style.display = '';
    figuur.src = minnetje.src;

  } else {

    element.style.display = 'none';
    figuur.src = plusje.src;

  }

}
</script>
</head>
<body>
<img src="images/icons/explode_min_b.gif" 
  onclick="expand(document.getElementById('sc1'),this)" alt="" />
<br />
<div id="sc1">verberg mij</div>
</body>
</html>

[Juup]

ThaGroov, speel er dan een beetje mee in Opera, maak een testfunctie die alert(element.style.display) doet en kijk of opera die wel ondersteunt. Zo niet, welke funtie dan wel. Zo wel, wat is dan de initiele waarde. Enz.

[Verwijderd]

Het volledig scriptje werkt perfect inderdaa crisp..
Ook in Opera, moet dus iets aan mijn implementatie liggen..

@Jaaap, als ik jou advies volg, welke wel nuttig is, dan zie ik dus dat de waarden wel degelijk worden meegegeven, ook al toont ie opeens me image niet meer.

Als ik zonder alert werk en ik begin open, dan sluit ie hem en verdwijnt mijn +/- tekentje..
Als ik gesloten begin dan kan ik hem openen en na het sluiten verdwijnt ie weer.

Stel nu dat ik met een alerter werk, en ik gebruik deze alerter:

code:

alert('1: ' + element.style.display + ' & figuur:' + figuur.src + ' & 
  min-src:' + minnetje.src + ' & plus-src:' + plusje.src);

In de alerts krijg ik hoe het moet zijn, de src's zijn juist maar toch verdwijnt mijn image na het verbergen, hoe kan dit?
Aan wat zou dit kunnen liggen, aangezien dat gewoon html documentje van crisp wel werkt.

Bij een volledige code van dit:

code:

<script language="Javascript" TYPE="text/javascript">
var plusje = new Image();
plusje.src = 'images/icons/explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'images/icons/explode_min_b.gif';

function expand(element,figuur) {

  if (element.style.display == 'none') {

    element.style.display = '';
    figuur.src = minnetje.src;
    alert('1: ' + element.style.display + ' & Figuur: ' + figuur.src 
       + ' & Min-src: ' + minnetje.src + ' & Plus-src: ' + plusje.src);

  } else {

    element.style.display = 'none';
    figuur.src = plusje.src;
    alert('2: ' + element.style.display + ' & Figuur: ' + figuur.src
       + ' & Min-src: ' + minnetje.src + ' & Plus-src: ' + plusje.src);

  }

}
</script>

Krijg ik dus deze alerts in Opera:

Als ik het weer zichtbaar wil maken, het dus openen:


En als ik hem wil toe doen, waarna hij verdwijnt:

[ Voor 113% gewijzigd door Verwijderd op 16-11-2003 13:48 ]

[shorty]

Ik weet dat ik een gigantisch oud topic omhoog schop maar ik gebruik dit script (van crisp) om een aantal dingen te verbergen. Wanneer ik het script run zijn alle velden standaard uitgevouwen. Dit werkt allemaal prima.

Maar ik wil nou juist dat wanneer de pagina aangeroepen wordt alle velden ingeklapt zijn. Weet iemand hoe ik dit kan aanpassen? Script ziet d'r zo uit:

JavaScript:

<html>
<head>
<title></title>
<script type="text/javascript">

var plusje = new Image();
plusje.src = 'explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'explode_min_b.gif';


function expand(element,figuur) 
{
  if (element.style.display == '') 
  {
    element.style.display = 'none';
    figuur.src = plusje.src;
  } 
  else 
  {
    element.style.display = '';
    figuur.src = minnetje.src;
  }
}
</script>
</head>
<body>

<img src="explode_min_b.gif" alt="" width="13" height="13" onclick="expand(document.getElementById('logistiek'),this)"/> Eerste groep<br>
<div id="logistiek">Tekst die onder de groep zit</div>

<img src="explode_min_b.gif" alt="" width="13" height="13" onclick="expand(document.getElementById('backstage'),this)"/> Tweede groep
<div id="backstage">Tekst die onder de groep zit</div>
</body>
</html>

De tekst die onder de groepen zit wordt juist standaard weergegeven en de images zijn dan ook de - images. Dit moet juist allemaal andersom, dus de tekst die onder de groepen zit moet standaard ingeklapt zijn en de images moeten dan + images zijn.

[shorty]

JavaScript:

<script type="text/javascript">
var plusje = new Image();
plusje.src = 'explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'explode_min_b.gif';

function expand(element,figuur) {
  if (element.style.display == '') {
    element.style.display = 'block';
    figuur.src = minnetje.src;
  } 
  else {
    element.style.display = '';
    figuur.src = plusje.src;
  }
}
</script>

<style type="text/css">
    div { display: none; }
</style>

Al op deze manier gefixt