JS Behaviour op alle links toepassen?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pieter van Linschoten

Pieter van Linschoten

23/04/2009 21:03:00
Quote Anchor link
Goedenavond PHP'erts,

Ik zit met een vraagje.

Ik ben bezig om een website voor een klant te verbeteren, maar nu loop ik tegen een probleempje aan.

Situatie schets:
- De content
Website, met alle content op 1 pagina. De "pagina's" (de content dus) staan in aparte divjes met position:absolute, die dmv javascript met "display: none" en "display:block" worden gewisseld. De klant gebruikt hierbij mootools, om een pagina overgang in te laden.

- Verandering: Dit is niet echt google vriendelijk, alle content wordt op aparte pagina's geplaatst, en krijgt een relevante bestandsnaam. (Dit wordt allemaal via een cms bepaald: unieke pagina titel = bestandsnaam). Verder wordt alle position absolute vervangen door floats.

- Probleem: Nu de pagina's werkelijk worden geladen, is het probleem, dat de overgang effecten bij het OUTFADEN niet meer werken.
Ik heb geprobeerd mbv onbeforeunload de fadeout functie aan te roepen, maar de pagina wordt te snel ververst het effect te zien.

- Idee voor oplossing: Een behaviour meegeven aan alle links, die een functie aanroept, en vervolgens een "return true".

- Waar loop ik vast:
Ik heb zelf een javascript functie zitten klooten. Mootools niet mijn favoriete JS framework, maar in ieder geval: Het werkt nu niet!
Ik denk dat het niet op alle links wordt toegepast, op de manier die ik nu gebruikt.

<? en ?> voor de highlights ofcourse

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script language="JavaScript">
<?
getElementByTagName('a').addEvent('onclick',function(){
    $('content').effect( 'height', {
        duration : 500,
        transition : Fx.Transitions.linear
        }
    ).
start( $('content').getStyle( 'height' ), 0 ).addEvent( 'onComplete',
        function() {

            return true;
        }
    )
});

?>

</script>


schetsje
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="content">
CONTENT

</div>


De css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#content {
    float : left;
    overflow: hidden;
    width : 891px;
    min-height : 300px;
    line-height : 14px;
}


Edit

Het is gelukt!
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?
function FadeOutPage(height){
    $('content').effect( 'height', {
        duration : 500,
        transition : Fx.Transitions.linear
        }
    ).
start(height , 0 ).addEvent( 'onComplete',
        function() {

            return true;
        }
    )
}
var
i=0;
var
contentH = $('content').getStyle( 'height' );
var
AllTheLinks = document.getElementsByTagName('a');
for (i=0; i<AllTheLinks.length; i++){
    if(AllTheLinks[i].getProperty('onclick') != ''){
        AllTheLinks[i].setProperty('onclick','FadeOutPage(\''+contentH+'\');');
    }
}

?>
Gewijzigd op 01/01/1970 01:00:00 door Pieter van Linschoten
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.