Titel is een beetje vaag maar hier kan ik het beter uitleggen.

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;
}
[offtopic]Even snelle tip: probeer het gebruik van de > selector in CSS te verminderen, dit zal je CSS aanzienlijk versnellen.[/offtopic]
Bedankt voor de tip.

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?
Zet alles even in een Codepen of in een Fiddle, dan kunnen we allemaal zien wat er fout gaat.
En je waarschijnlijk ook beter helpen.
Ik zou eens kijken of je iets met de CSS property z-index wat kunt. Dit is om 'hoogte' aan te geven voor elementen en werkt eigenlijk alleen bij position: absolute, relative etc..

Reageren