JS Behaviour op alle links toepassen?
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>
<?
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)
1
2
3
4
2
3
4
<div class="content">
CONTENT
</div>
CONTENT
</div>
De css
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#content {
float : left;
overflow: hidden;
width : 891px;
min-height : 300px;
line-height : 14px;
}
float : left;
overflow: hidden;
width : 891px;
min-height : 300px;
line-height : 14px;
}
Edit
Het is gelukt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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+'\');');
}
}
?>
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.