Routebeschrijving vraagje (newbee)

[Verwijderd]

Ik wil graag een lijst maken van een routebeschrijving en op mijn webpage laten zien, zie voorbeeld1:

Voorbeeld1
1 Vanaf A12 Utrecht – Arnhem – Oberhausen
2 Vanaf A12 Oberhausen – Arnhem
3 Vanaf A50 ’s-Hertogenbosch – Apeldoorn – Zwolle

Nu wil ik graag dat dit te zien is nadat er bijvoorbeeld op 2 gedrukt is, zie voorbeeld 2:

Voorbeeld2
1 Vanaf A12 Utrecht – Arnhem – Oberhausen
2 Vanaf A12 Oberhausen – Arnhem
- neem de afslag Arnhem, Velp, Nijmegen, Zutphen A348/N325
- u bevindt zich nu op een grote rotonde (Velperbroek)
- neem de 4e afslag op de rotonde richting Arnhem, Nijmegen N325
- enz.....
3 Vanaf A50 ’s-Hertogenbosch – Apeldoorn – Zwolle

Ik heb geen idee hoe ik dit kan bewerkstelligen. Iemand een idee?

[marko77]

met anchor tags als ik het zo uit mn hoofd goed zeg

[r0bert]

Hang een <span> of <div> element achter het element met je van - bestemming erin. Voeg dan aan de link een javascript actie toe om het volgende child te laten verschijnen verbergen.. Zoiets krijg je dan

HTML:

<span onClick="this.nextSibling.style.display = (this.nextSibling.style.display == 'none')
     ? 'inline' : 'none';" style="cursor: hand">1. Vanaf A12 Utrecht - Arnhem - Oberhausen</span>
   <span style="display: none;">
       <ul>
           <li>neem de afslag Arnhem, Velp, Nijmegen, Zutphen A348/N325</li>
           <li>u bevindt zich nu op een grote rotonde (Velperbroek)</li>
           <li>neem de 4e afslag op de rotonde richting Arnhem, Nijmegen N325</li>
           <li>enz.....</li>
       </ul>
    </span>
<span onClick="this.nextSibling.style.display = (this.nextSibling.style.display == 'none')
     ? 'inline' : 'none';" style="cursor: hand">2. Vanaf A12 Oberhausen &#8211; Arnhem</span>
   <span style="display: none;">
       <ul>
           <li>neem de afslag Arnhem, Velp, Nijmegen, Zutphen A348/N325</li>
           <li>u bevindt zich nu op een grote rotonde (Velperbroek)</li>
           <li>neem de 4e afslag op de rotonde richting Arnhem, Nijmegen N325</li>
           <li>enz.....</li>
       </ul>
    </span>

[ Voor 71% gewijzigd door r0bert op 20-02-2003 23:39 ]

[Verwijderd]

Waarom zo moeilijk? Gewoon met anchor tags:

HTML:

<a href="#1">A12 Arnhem</a> - <a href="#2">A12 Oberhausen</a> - <a href="#3">A50 's Hertogenbosch</a><br>
<a name="1">A12 Arnhem</a><br>
<li> Blabla snelweg
<li> ...
<a name="2">A12 Oberhausen</a><br>
<li> Nog wat gegevens
<a name="3">A50 's Hertogenbosch</a><br>
<li> en de laatste gegevens..

[djluc]

Dan zie je toch meteen alle informatie wat het wat minder duidelijk maakt?

[r0bert]

1) Die 1e manier via JS is niet 'moeilijk'
2) Het is netter, er staat geen onnodige tekst onderin de pagina
3) De mensen hoeven niet terug te scrollen naar boven (of op een 'top' link te klikken)

[Verwijderd]

Jíj vindt het netter, ik dus helemaal niet. Als je duidelijkheid wilt, moet je gewoon juiste headings gebruiken. Jij gebruikt ook geen links, dus in sommige browsers is het verhaal onduidelijk.

Ik zou het zo doen:

HTML:

<div id="routes">
   <h1>Routebeschrijving</h1>
   <div id="toc">
      <h2>Kopje hier</h2>
      <ol>
         <li><a href="#route1">Vanaf A12 Utrecht &#8211; Arnhem &#8211; Oberhausen</a></li>
         <li><a href="#route2">Vanaf A12 Oberhausen &#8211; Arnhem</a></li>
         <li><a href="#route3">Vanaf A50 &#8217;s-Hertogenbosch &#8211; Apeldoorn &#8211; Zwolle</a></li>
      </ol>
   </div>
   <div id="descriptions">
      <h2><a id="route1">Vanaf A12 Utrecht &#8211; Arnhem &#8211; Oberhausen</a></h2>
      <ul>
         <li>Linksaf</li>
         <li>Rechtdoor</li>
      </ul>
      <h2><a id="route2">Vanaf A12 Oberhausen &#8211; Arnhem</a></h2>
      <ul>
         <li>Rechtsaf</li>
         <li>Achteruit</li>
      </ul>
      <h2><a id="route3">Vanaf A50 &#8217;s-Hertogenbosch &#8211; Apeldoorn &#8211; Zwolle</a></h2>
      <ul>
         <li>Inparkeren</li>
         <li>Uitstappen</li>
      </ul>
   </div>
</div>

Hier kun je prima mee aan de slag als je wilt scripten. Maar gebruik in ieder geval de juiste elementen voor je data.

[DeFeCt]

Verwijderd schreef op 22 February 2003 @ 12:04:
Hier kun je prima mee aan de slag als je wilt scripten. Maar gebruik in ieder geval
de juiste elementen voor je data.

Volgens mij is dat nou juist het probleem van TS, dit is wel duidelijk maar hoe show en hide je een span of div of tr... dat is de vraag.

[Verwijderd]

DeFeCt schreef op 22 February 2003 @ 12:08:
[...]


Volgens mij is dat nou juist het probleem van TS, dit is wel duidelijk maar hoe show en hide je een span of div of tr... dat is de vraag.

Een tr kun je niet hiden of showen

voor een div:

document.getelementbyid("naam van je div").style.visibility = "default"
of
document.getelementbyid("naam van je div").style.visibility = "hide"

[Verwijderd]

Nou goed dan: Werkend voorbeeldje

Bijbehorend scriptje:

JavaScript:

function init() {
   var listItems = document.getElementById('toc').lastChild.childNodes;
    
   for (var i = 0; i < listItems.length; i++)
   {
      listItems.item(i).firstChild.onclick = doClick;
   }
}

function doClick()
{
   var id = this.href.substring(this.href.indexOf('#') + 1);
    
   document.getElementById('toc').style.display = 'none';
   document.getElementById(id).parentElement.style.display = 'block';
   document.getElementById(id).parentElement.nextSibling.style.display = 'block';
    
   return false;
}

window.onload = init;

Mag je zelf bedenken hoe je dan weer terugkomt bij het "keuzemenu'tje".

[ Voor 65% gewijzigd door Verwijderd op 22-02-2003 12:44 ]

[McVirusS]

Verwijderd schreef op 22 February 2003 @ 12:33:
Een tr kun je niet hiden of showen

Wel als je met een <tbody> werkt en showen en hiden via display property doet.

[DeFeCt]

Verwijderd schreef op 22 February 2003 @ 12:33:
[...]
Een tr kun je niet hiden of showen

ik zal je maandag het voorbeeld laten zien, heb nu geen tijd...

niet zomaar blaten zonder het zeker te weten!

[Verwijderd]

DeFeCt schreef op 22 February 2003 @ 13:00:
[...]


ik zal je maandag het voorbeeld laten zien, heb nu geen tijd...

niet zomaar blaten zonder het zeker te weten!

ik was niet helemaal volledig misschien, maar ik weet waar ts naar toe wil en hoe het eigenlijk wil doen, maar hij wil dus gewoon een div f span laten hiden of showen via t style property...

ik weet ook wel dat je ook met tabellen dat soort dingen kunt doen, maar dat is niet de insteek die ts zocht, je kunt zelfs hele tabellen laten genereren en verwijderen, maar dat is niet een oplossing waar ts naar opzoek is...

[DeFeCt]

Verwijderd schreef op 22 februari 2003 @ 17:35:
[...]


ik was niet helemaal volledig misschien, maar ik weet waar ts naar toe wil en hoe het eigenlijk wil doen, maar hij wil dus gewoon een div f span laten hiden of showen via t style property...

ik weet ook wel dat je ook met tabellen dat soort dingen kunt doen, maar dat is niet de insteek die ts zocht, je kunt zelfs hele tabellen laten genereren en verwijderen, maar dat is niet een oplossing waar ts naar opzoek is...

En waarom zou het showen en hiden van een table row geen goede optie zijn dan?

[nero355]

Misschien bij concurrent Map24 kijken

www.map24.com of nl weet niet zeker

[DeFeCt]

code:

 <script language="JavaScript">
  function showWorld(supply) {
  if ( supply.selectedIndex == 1 ) {
    document.all.countries.style.display='';
  } else {
    document.all.countries.style.display='none';
  }
 }
 </script>
 
 
 <tr>
  <td><span class="bold">European wide distribution?</span></td>
  <td>&nbsp;&nbsp;</td>
  <td align="right">
    <select id="supply" onchange="showWorld(this)">
     <option>no</option>
     <option>yes</option>
    </select>
  </td>    
 </tr>


<tr id="countries" style="display: none;">
  <td valign="top" colspan="3">
  <span class="bold">Please select in what countries you supply:</span>
</td>
</tr>

ff een snelle copy paste, om te laten zien dat je dus wel een tr kan hiden...

nero355 schreef op 23 February 2003 @ 00:49:
Misschien bij concurrent Map24 kijken
www.map24.com of nl weet niet zeker

Lees je alleen de titel voordat je replied?

[ Voor 38% gewijzigd door DeFeCt op 24-02-2003 09:13 ]

[1st_Ro]

Waarom kan je die info niet gewoon op 1 pagina rossen ? Waarom zo moeilijk doen als het makkelijk kan

Vooral als je bedenkt dat mensen die routebeschrijving willen uitprinten is het gewoon slim om het zo simpel mogelijk te houden.

[ Voor 39% gewijzigd door 1st_Ro op 24-02-2003 12:00 ]