Jquery rotate samen met Position absolute

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ferdi R

Ferdi R

15/08/2015 19:37:42
Quote Anchor link
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
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
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>


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

PHP hulp

11/12/2018 18:09:59
 
Wouter J

Wouter J

15/08/2015 19:52:58
Quote Anchor link
Offtopic:
Even snelle tip: probeer het gebruik van de > selector in CSS te verminderen, dit zal je CSS aanzienlijk versnellen.
 
Ferdi R

Ferdi R

15/08/2015 20:34:11
Quote Anchor link
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?
 
Anoniem M

Anoniem M

15/08/2015 20:35:06
Quote Anchor link
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.
Gewijzigd op 15/08/2015 20:37:09 door Anoniem M
 
Ferdi R

Ferdi R

15/08/2015 20:42:59
 
Anoniem M

Anoniem M

15/08/2015 20:54:48
Quote Anchor link
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..
 



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.