Fade in & out als wordt genavigeerd in een div

[kevinr1]

Hallo allemaal,

Ik heb een klein probleem waar ik niet uit kom,
ik ben hier al enkele dagen mee bezig maar kom er echt niet uit.
Heb flink wat lopen google-en maar ik kom er niet.

Het gaat om het volgende:
[Download a.u.b. eerst de bijlage Bekijk bijlage site.zip en open index.html in firefox, chrome o.i.d.(!!!!!!)]

De teskt:
"Over Test ttest"

Moet vervagen als er op een menu koppeling wordt geklikt en de nieuwe koppeling in vervagen(?)

Als voorbeeld heb ik onder de menu knop: Test - > over test gemaakt. Ook een link naar "Pages/test/test.html"
Dit staat op 1 of andere manier in een div ( css ).

Als dus op de menu op 'over test' wordt geklikt moet de tekst vervagen en verangen worden door hetgeen wat in test.html staat.
Zodat de main page altijd blijft staan en niet 'gerefresht' hoeft te worden.
Dat ik alleen maar .html hoef te maken met tekst erin.

Mijn vriend vertelde mij dat dit het beste gedaan kon worden met Javascript.


P.s, als ik dit bericht in een fout sub-forum heb geplaats, mijn excuses.
Als u dit topic verplaatst stel mij dan a.u.b. op de hoogte.
Anders ben ik mij weer rot aan het zoeken.

Bekijk bijlage site.zip

 

[That Guy]

Het magische woord dat je zoekt is XHR (en als je van web 2.0 houd 'AJAX'). Aanschouw:

<a id='clickmij' href='statische_pagina.html'>Een link</a>


<div id='contentbox'>hier komt de inhoud!</div>

[JS]var elem = document.getElementById('clickmij');

elem.addEventListener('click', function()
{
veranderContent(elem, elem.getAttribute('href'));
return false;
}, false);


///

function veranderContent(elem, href)
{
var xhr = new XMLHttpRequest();

xhr.overrideMimeType('text/plain');

xhr.open('get', href, false);

xhr.addEventListener('readystatechange', function()
{
if(xhr.readyState === 4)
{
document.getElementById('contentbox').innerHTML = this.responseText;
}
}, false);

xhr.send();
}[/JS]

er zijn een boel dingen die je in je achterhoofd moet houden als je met XHR werkt, oa. problemen met verschillende browsers en accessibility (vandaar de href). Dit is niet een van de makkelijkste onderdelen van JS.

Oh, en volgens mij heeft jQuery een ingebouwde AJAX functie, dus als je jQ gebruikt is het misschien handiger om die AJAX functies te gebruiken.