Jquery rotate samen met Position absolute
Ik heb een div waar ik een aantal images laat roteren, deze krijgen dan allemaal de CSS waarde position: absolute;
Maar daardoor wordt de hoogte van de image niet herkend waardoor de onderliggende div naar boven schiet (onder de image).
Nu heb ik dat opgelost via Jquery dat ik de bovenste image een position: relative; geef en de rest absolute.
Dus ik dacht he he opgelost, maar nu als ik naar beneden scroll schiet de pagina weer automatisch omhoog.
Jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var beelden = $("#fader").clone();
$('#fader').html('<img class="loader" src="../../images/loading.gif" width="46px" height="56px" /> Even geduld AUB...').fadeOut(4000, function(){
$("#fader").replaceWith(beelden).fadeIn(1000);
$('#fader img').hide().filter(":first-child").show();
var pause = false;
function fadeNext() {
$('#fader img').first().css('position', 'absolute').fadeOut(1500).appendTo($('#fader'));
$('#fader img').first().css('position', 'relative').fadeIn();
}
function fadePrev() {
$('#fader img').first().fadeOut(1500);
$('#fader img').last().prependTo($('#fader')).fadeIn();
}
$('#fader, #next').click(function() {
fadeNext();
});
$('#prev').click(function() {
fadePrev();
});
$('#play').click(function() {
pause = false;
});
$('#pause').click(function() {
pause = true;
});
$('#fader, .button').hover(function() {
pause = true;
},function() {
pause = false;
});
function doRotate() {
if(!pause) {
fadeNext();
}
}
var rotate = setInterval(doRotate, 500);
}).delay(4000);
});
</script>
<script type="text/javascript">
$(function() {
var beelden = $("#fader").clone();
$('#fader').html('<img class="loader" src="../../images/loading.gif" width="46px" height="56px" /> Even geduld AUB...').fadeOut(4000, function(){
$("#fader").replaceWith(beelden).fadeIn(1000);
$('#fader img').hide().filter(":first-child").show();
var pause = false;
function fadeNext() {
$('#fader img').first().css('position', 'absolute').fadeOut(1500).appendTo($('#fader'));
$('#fader img').first().css('position', 'relative').fadeIn();
}
function fadePrev() {
$('#fader img').first().fadeOut(1500);
$('#fader img').last().prependTo($('#fader')).fadeIn();
}
$('#fader, #next').click(function() {
fadeNext();
});
$('#prev').click(function() {
fadePrev();
});
$('#play').click(function() {
pause = false;
});
$('#pause').click(function() {
pause = true;
});
$('#fader, .button').hover(function() {
pause = true;
},function() {
pause = false;
});
function doRotate() {
if(!pause) {
fadeNext();
}
}
var rotate = setInterval(doRotate, 500);
}).delay(4000);
});
</script>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#wrap > .radar { position: relative; width: 100%; }
#wrap > .radar > .kaart { }
#wrap > .radar > .kaart.groot { width: 100%; }
#wrap > .radar > .kaart.klein { width: 50%; }
#wrap > .radar > .kaart.klein > img { width: 100%; }
#fader {
position: relative;
width: 100%;
}
#fader img{
position: relative;
width: 100%;
height: auto;
top: 0;
}
#wrap > .radar > .kaart { }
#wrap > .radar > .kaart.groot { width: 100%; }
#wrap > .radar > .kaart.klein { width: 50%; }
#wrap > .radar > .kaart.klein > img { width: 100%; }
#fader {
position: relative;
width: 100%;
}
#fader img{
position: relative;
width: 100%;
height: auto;
top: 0;
}
Even snelle tip: probeer het gebruik van de > selector in CSS te verminderen, dit zal je CSS aanzienlijk versnellen.
Maar zou ik het anders kunnen doen? ik laad nu de hele lijst met images in de div fader waardoor ik alle andere images absolute moet geven. Kan ik met Jquery niet 1 image om en om laten zien?
En je waarschijnlijk ook beter helpen.
Gewijzigd op 15/08/2015 20:37:09 door Marthijn Buijs