[Javascript] Tekst laten "uitklappen" - Softwareontwikkeling

maandag 9 februari 2004 14:31

Acties:

Topicstarter

Beste,

Ik ben een FAQ-pagina aan het maken. Om het een beetje overzichtelijk te houden zijn aanvankelijk enkel de vragen zelf zichtbaar. Klik je op een bepaalde vraag, dan verschijnt de tekst eronder. De code zie je hieronder. Een 'live' voorbeeld vind je hier: http://information.micros...ity/bulletin/ms04-004.asp (op deze pagina kun je 'technical details' uitklappen).

Stel nu dat ik eerst op 'vraag1' klik. Dan komt 'tekst1' tevoorschijn. Klik ik op 'vraag2' dan verschijnt 'tekst2'. 'tekst1' blijft echter ook staan. Ik zou graag willen dat "tekst1" dan verdwijnt (en dat dus alleen tekst2 blijft staan). Maar ik weet niet hoe ik dit moet programmeren. Kan iemand me hiermee helpen?

Bedankt!

HTML:

<script>
function tierMenu(objMenu,objImage)
{
   if (objMenu.style.display == "none")
   {
       objMenu.style.display = "";
       objImage.src = "images/minus.gif";
   }
   else
   {
       objMenu.style.display = "none";
       objImage.src = "images/plus.gif";
   }
}
</script>

<BODY>
   <BLOCKQUOTE>
        <DIV onclick=tierMenu(menu1,img1)>
          [img]"images/plus.gif"[/img]
          <FONT style="CURSOR: hand">Titel één</FONT></DIV>
          <SPAN id=menu1 style="DISPLAY: none">
             <BLOCKQUOTE>
             <P>Tekst één</P>
             </BLOCKQUOTE>
          </SPAN>

        <DIV onclick=tierMenu(menu2,img2)>
          [img]"images/plus.gif"[/img]
          <FONT style="CURSOR: hand">Titel twee</font></DIV>
          <SPAN id=menu2 style="DISPLAY: none">
             <BLOCKQUOTE>
             <P>Tekst één</P>
             </BLOCKQUOTE>
          </SPAN>
   </BLOCKQUOTE>

</BODY>

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

maandag 9 februari 2004 14:37

Acties:

crisp

Devver

Pixelated

ongetest kan ik in ieder geval al zien dat dit script nooit in een browser als Firebirdfox/Mozilla gaat werken...

In ieder geval om te bereiken wat je wilt zal je dus moeten bijhouden welke tekst uitgeklapt is, zodat je die weer kan inklappen alvorens een andere uit te klappen.

Intentionally left blank

maandag 9 februari 2004 14:40

Acties:

DriesA

Topicstarter

In IE 6 werkt het. Maar ik wil geen browsers uitsluiten. Hoe moet ik de code dan aanpassen?

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

maandag 9 februari 2004 14:47

Acties:

crisp

Devver

Pixelated

Er rammelt van alles aan deze code (maar ja, wat kan je anders verwachten van Microsoft?

); ten eerste is de HTML al erbarmelijk: blocklevel elementen genest in inline elementen, gebruik van deprecated font-tags, propriety style properties.
Vervolgens sturen ze object-references mee aan de JS-functie die eigenlijk geen object-references kunnen zijn omdat (behalve in IE) elementen met een ID nooit global kunnen zijn tov het window object...

ok, daarmee ben jij natuurlijk niet geholpen, maar wat ik wil aangeven is dat simpelweg copy-pasten van code niet altijd zaligmakend is. Echter als ik hier een goed werkend voorbeeld oplepel leer je er zelf ook niets van.
Dit is aan de andere kant nou ook niet bepaald rocket-science; als je je een beetje verdiept in JS en DOM (bijvoorbeeld adhv een tutorial) dan denk ik dat je binnen een dag zelf al een betere oplossing kan verzinnen...

[ Voor 37% gewijzigd door crisp op 09-02-2004 14:52 ]

Intentionally left blank

maandag 9 februari 2004 14:55

Acties:

Dutch_guy

WYSIWYG

Geen antwoord op je vraag, maar wel een compleet werkend script:

http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

Pay peanuts get monkeys !

vrijdag 13 februari 2004 16:20

Acties:

DriesA

Topicstarter

Hey,
Ik heb uiteindelijk het tip van Dutch_guy gebruikt.
http://www.aendekerk.be/beta/bedrijf/ligging.html

Bedankt!

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

dinsdag 1 maart 2005 10:32

Acties:

Dirtbiter

Ten eerste: mijn excuses voor de kick, maar het openen van een nieuw topic is niet gewenst, omdat de vraag heel veel aansluiting heeft met dit topic.

Ik heb voor mijn website het script van dynamicdrive gebruikt, maar ik stuit op een aantal problemen.

Het script heb ik, vanwege de onnodige functionaliteit gereduceerd tot het volgende:

JavaScript:

var collapseprevious=\"no\" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type=\"text/css\">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName(\"*\")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display=\"none\"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!=\"undefined\"){
if (collapseprevious==\"yes\")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!=\"block\")? \"block\" : \"none\"
}
}

function do_onload(){
getElementbyClass(\"switchcontent\")
if (enablepersist==\"on\" && typeof ccollect!=\"undefined\")
revivecontent()
}

if (window.addEventListener)
window.addEventListener(\"load\", do_onload, false)
else if (window.attachEvent)
window.attachEvent(\"onload\", do_onload)
else if (document.getElementById)
window.onload=do_onload

Als ik dit in de <head> van mijn HTML plak, dan werkt het prima in IE, in FF nog wat problemen met de weergave, maar dat is iets anders. Zie www.sparla.org voor een voorbeeld.

Nu wil ik graag de JS in een aparte file zetten en dan linken. Als ik dat op de normale manier doe, werkt het niet. Zo dus:

HTML:

1	<script language =\"JavaScript\" type=\"text/javascript\" src=\"textexpand.js\">

(De \" is vanwege PHP)

Nu heb ik in een ander topic gelezen dat er problemen zijn met de functies die "onload" uitgevoerd worden. In het geval van dit script is dat dus "do_onload". Als ik deze functie in mijn HTML laat uitvoeren, zo dus:

HTML:

1	<body onLoad=\"do_onload()\" bgcolor=\"#FFFFCC\">

en dit stuk uit de JS haal:

JavaScript:

if (window.addEventListener)
window.addEventListener(\"load\", do_onload, false)
else if (window.attachEvent)
window.attachEvent(\"onload\", do_onload)
else if (document.getElementById)
window.onload=do_onload

dan krijg ik de volgende foutmelding:

code:

Line: 15
Char: 1
Error: Object Expected
Code: 0
URL: www.sparla.org

Line 15 is dus de do_onload.

Als ik ipv do_unload, getElementbyClass(\"switchcontent\") laat uitvoeren bij <body onLoad>, oftewel de enige inhoud van do_onload, krijg ik een object expected error op lijn 40, bij het aanroepen van de OnClick dus....

Ik wil dus graag de Javascript in een apart bestand hebben staan, maar wel correct uit laten voeren.

De site is een combinatie van XHTML (1.0 Transitional), CSS, PHP en Javascript. Nu liet ik, tijdens het implementeren van dit script, mijn pagina valideren door W3C, en dan krijg je de melding dat de attributen "onLoad" en "onClick" niet bestaan. Ligt dit aan het feit dat het XHTML is?

Als de JS in de <head> staat, dan geeft de validator nog meer meldingen, zie http://validator.w3.org/c...3A%2F%2Fwww.sparla.org%2F maar dan werkt het wel, zonder JS errors.

Wie heeft de oplossing?

Nog wat linkjes voor de liefhebber:
www.sparla.org
www.sparla.org/index.php
www.sparla.org/stylesheet.css
www.sparla.org/textexpand.js

[ Voor 9% gewijzigd door Dirtbiter op 01-03-2005 10:34 ]

dinsdag 1 maart 2005 10:40

Acties:

CH4OS

It's a kind of magic

Line 89, column 16: there is no attribute "onClick"

Die foutmelding, zal je, als je het zo laat staan, altijd houden, tenzij je er onclick van maakt. In XHTML is namelijk _alles_ lowercase, en dus géén hoofdletter(s)...

JavaScript:

var oActBlockA = null;
var oActBlockB = null;

function toggle(iBlockNr)
{ //Get block elements
    var sBlockId = "block" + iBlockNr;
    var oElementA = document.getElementById(sBlockId + "A");
    var oElementB = document.getElementById(sBlockId + "B"); // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...
  if(!oElementA) { return; }

  //Als er een block zichtbaar is:
  if(oActBlockA)
  { //Hide de actieve blocken
    oActBlockA.style.display = 'none';
    oActBlockB.style.display = 'none'; // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

    
    //Toon eventueel het element wat zichtbaar moet worden
    //Als het een ander element is dan degene die zichtbaar was
    if(oElementA != oActBlockA)
    {  oElementA.style.display = '';
         oElementB.style.display = '';
       oActBlockA = oElementA;
       oActBlockB = oElementB; // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

    }
    else { oActBlockA = oActBlockB = null; } // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

  }
  else
  {  oElementA.style.display = '';
     oElementB.style.display = '';
     oActBlockA = oElementA;
     oActBlockB = oElementB; // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

  }
}

Deze JS heb ik, en ik pak de functie als volgt:

HTML:

1	id=\"block$row[0]A\"

De \ is vanwege PHP... Je kan (volgens mij) trouwens ook dat A en B en zo weglaten, alleen ik had het dus wél nodig...

Aangezien mijn script met steeds andere dingen werkt, laat ik gewoon de id (van MySQL er neer planten) je kan dus ook (mits je een vaste page hebt) ook gewoon een vast getal er aan plakken. Hetgeen wat je dan (standaard) niet wil zien maak je dan als volgt:

HTML:

1	style=\"display:none;\"

EDIT:
Bedenk me trouwens net, dat je ook nog de functie op moet roepen:

HTML:

1	<a href="javascript:toggle($row[0])">Je tekst</a>

$row[0] is bij mij een getal, die hetzelfde is, als de ID, die je dus eerder defineert...

Heb er nog een topic over gestart laatst: [rml][ JS ] Probleem met script[/rml]

[ Voor 102% gewijzigd door CH4OS op 01-03-2005 10:53 ]

dinsdag 1 maart 2005 10:45

Acties:

Dirtbiter

Daar had ik nog niet aan gedacht, dat gaan we nog eens proberen....

edit:
Die hoofdletters verwijderd, nu eerst maar eens goed naar jou script kijken

Als ik zo naar het script kijk, is het een heel eenvoudig scriptje, wat gewoon die style aanpast, niks met body onload ofzo....

Dat zou wel beter zijn....

Even kijken of ik er kaas van kan maken...

[ Voor 81% gewijzigd door Dirtbiter op 01-03-2005 10:56 ]

dinsdag 1 maart 2005 11:14

Acties:

CH4OS

It's a kind of magic

Dirtbiter schreef op dinsdag 01 maart 2005 @ 10:45:
Daar had ik nog niet aan gedacht, dat gaan we nog eens proberen....

edit:
Die hoofdletters verwijderd, nu eerst maar eens goed naar jou script kijken

Als ik zo naar het script kijk, is het een heel eenvoudig scriptje, wat gewoon die style aanpast, niks met body onload ofzo....

Dat zou wel beter zijn....

Even kijken of ik er kaas van kan maken...

Het scriptje past inderdaad de style aan. In feite is het enige wat het doet, de display: none; vervangen voor display: ; waardoor de inhoud zichtbaar word. Het script werkt trouwens (voor zover ik getest heb, in IE en FF...)

dinsdag 1 maart 2005 11:20

Acties:

Dirtbiter

Ik heb nu de JS tot dit gereduceerd:

JavaScript:

var oActBlock = null;

function toggle(sBlockId)
{ //Get block elements
    var oElement = document.getElementById(sBlockId);
  if(!oElement) { return; }

  //Als er een block zichtbaar is:
  if(oActBlock)
  { //Hide de actieve blocken
    oActBlock.style.display = 'none';
     
    //Toon eventueel het element wat zichtbaar moet worden
    //Als het een ander element is dan degene die zichtbaar was
    if(oElement != oActBlock)
    {  
       oElement.style.display = '';
       oActBlock = oElement;
    }
    else 
    { 
       oActBlock = null; 
    } // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

  }
  else
  {  oElement.style.display = '';
     oActBlock = oElement;
  }
}

In IE werkt ie prima. Ik kan alleen niet de "display:none" in mijn CSS zetten, dat moet in de HTML zelf. Anders blijft alles gesloten.

Alleen in FF werkt het niet goed. Maar 1 van de 2 elementen gaat open. Daarbij houden we natuurlijk de opmaakproblemen, maar daar moet ik nog naar kijken.

Alleen raar dat FF die style niet helemaal lekker pakt...

dinsdag 1 maart 2005 12:03

Acties:

CH4OS

It's a kind of magic

Dirtbiter schreef op dinsdag 01 maart 2005 @ 11:20:
Ik heb nu de JS tot dit gereduceerd:

JavaScript:

var oActBlock = null;

function toggle(sBlockId)
{ //Get block elements
    var oElement = document.getElementById(sBlockId);
  if(!oElement) { return; }

  //Als er een block zichtbaar is:
  if(oActBlock)
  { //Hide de actieve blocken
    oActBlock.style.display = 'none';
     
    //Toon eventueel het element wat zichtbaar moet worden
    //Als het een ander element is dan degene die zichtbaar was
    if(oElement != oActBlock)
    {  
       oElement.style.display = '';
       oActBlock = oElement;
    }
    else 
    { 
       oActBlock = null; 
    } // Deze kan je eventueel ook weglaten, ik had hem nodig, omdat ik meerdere dingen (tegelijk) tevoorschijn wilde toveren...

  }
  else
  {  oElement.style.display = '';
     oActBlock = oElement;
  }
}

In IE werkt ie prima. Ik kan alleen niet de "display:none" in mijn CSS zetten, dat moet in de HTML zelf. Anders blijft alles gesloten.

Alleen in FF werkt het niet goed. Maar 1 van de 2 elementen gaat open. Daarbij houden we natuurlijk de opmaakproblemen, maar daar moet ik nog naar kijken.

Alleen raar dat FF die style niet helemaal lekker pakt...

Als ze allebei open moeten, dan moet je dus gewoon dezelfde JS gebruiken als dat ik deed... Alleen moet je dan bij de een aan A er achter plakken, en bij de andere een B...

EDIT:
De style's moet je inderdaad middels style="display: none;" moeten oplossen. Is niet echt een mooie oplossing inderdaad, maar kan niet anders. Of je moet een class er aan plakken...

[ Voor 8% gewijzigd door CH4OS op 01-03-2005 12:08 ]

dinsdag 1 maart 2005 12:06

Acties:

Dirtbiter

Het is de bedoeling dat ze individueel te switchen zijn. Dus niet 2 met 1 klik openen, maar gewoon onafhankelijk, voor een n aantal elementen.

Ik moet zelf nog ff kijken, maar hij moet dus de style van het aangeroepen element wijzigen. In IE 6 werkt ie precies zoals ik wil, maar moet nog even debuggen voor FF.

Edit:

Zo, met voorbeeldcode kan ik het wel, begon al te twijfelen aan mijn eigen kunsten

JavaScript:

var oElement = null;

function toggle(sBlockId)
{ //Get block elements
    oElement = document.getElementById(sBlockId);
    if(!oElement) { return; }

  if(oElement.style.display == 'none')
    {  
       oElement.style.display = '';
       oElement = null;
    }
    else if(oElement.style.display == '')
    { 
       oElement.style.display = 'none';
       oElement = null;
    }

}

Browser independent (IE6, FF1.0) zeer simpel, geen gekke dingen, werkt prima.

[ Voor 49% gewijzigd door Dirtbiter op 01-03-2005 12:18 ]

dinsdag 1 maart 2005 12:12

Acties:

Morrar

He Dirbiter & GJ-tje,

Deze versie werkt, ik moet alleen nog even het plaatje laten meewisselen:

code:

<html>
<head>
<script language="javascript" type="text/javascript">
var oActBlock = null;

function toggle(sBlockId)
{ //Get block elements
  var oElement = document.getElementById(sBlockId);
  if(!oElement) { return; }

  //Als er een block zichtbaar is:
  if(oActBlock)
  { //Hide de actieve blocken
    draw(oActBlock, 0);
     
    //Toon eventueel het element wat zichtbaar moet worden
    //Als het een ander element is dan degene die zichtbaar was
    if(oElement != oActBlock)
    { draw(oElement, 1);
      oActBlock = oElement;
    }
    else 
    {   oActBlock = null; 
    }

  }
  else
  {  draw(oElement, 1);
     oActBlock = oElement;
  }
}

function draw(oElem, bShow)
{   //Set parameters
    if(bShow) { sDis = "inline"; sSrc = "images/minus.gif"; }
    else { sDis = "none"; sSrc = "images/plus.gif"; }
    
    //Find image
    
    //Set display
    oElem.style.display = sDis;
}
</script>
</head>
<body>
    <div onclick="toggle('menu1');">
    [img]"images/plus.gif">
[/img]titel één</span>
  </div>
    <span id="menu1" style="display: none">
        <p>tekst één</p>
    </span>

    <div onclick="toggle('menu2');">
        [img]"images/plus.gif">
        <span[/img]titel twee</span>
    </div>
    <span id="menu2" style="display: none">
        <p>tekst twee</p>
    </span>
</body>
</html>

[ Voor 18% gewijzigd door Morrar op 01-03-2005 12:13 ]

dinsdag 1 maart 2005 12:23

Acties:

Dirtbiter

Om het even samen te vatten: we hebben een werkend simpel script dat gewoon de "style attribute" veranderd, en verder niks doet, daardoor issie ook goed te linken. Hij kan misschien niet zoveel, maar werkt wel. Voor zoveel onderdelen als je wil.

De style bij het weergeven kun je gewoon instellen.

Die van morrar ga ik zelf niet meer testen, maar wie wil, laat het weten.

Ik ga nog ff checken hoe dat zit met die class....

dinsdag 1 maart 2005 12:25

Acties:

Pelle

🚴‍♂️

Sorry, maar wij zijn hier niet van de dynamicdrive support helpdesk.