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
<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>CSS
#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;
}