JQuery probleem
Dit is de eerste keer dat ik een topic open op een forum, aangezien ik meestal mijn antwoorden via google op het internet vindt. Helaas zit ik nu vast, en ik hoop dat iemand mij kan helpen.
Sinds kort heb ik kennis gemaakt met JQuery en dit wil ik dan ook gebruiken voor een nieuwe site. Ik zit nu alleen met een probleem waar ik na uren uitzoeken nog niet uitkom.
Ik maak gebruik van Masonry.
Info:
Links heb ik een donkergrijze div, die 400 px naar rechts slide met een mouseover ( doormiddel van jquery).
Rechts van deze div heb ik een andere div met width 100%. Deze div word dus kleiner als de andere div naar rechts slide.
Dit werkt allemaal goed.
Het masonry effect is een effect die je div'jes allemaal met een soepele beweging laten verplaatsen als je browser kleiner word. KLIK.
Maar nu het volgende probleem:
Beide effecten werken perfect. Nu wil ik alleen het masonry effect in de div naast de slider rechts plaatsen. Waardoor de div'jes rechts van de slider allemaal soepel schuiven als de slider-div 400 px naar rechts schuift.
Dit krijg ik maar niet voor elkaar.
Ik mijn code staat de slider direct links en zijn er 6 rode div'jes helemaal onder. Ik heb verschillende dingen geprobeerd met de positions relative en absolute en de float left. Bij de ene optie werkt het andere niet meer en vise versa.
Je kunt het masonry effect zien door naar de rode div'jes te scrollen en je browser te verkleinen.
Daarnaast doet de slider het alleen in FireFox.
Ik krijg de rode div'jes wel naast de slider, en ook wel dat ze onder elkaar gaan staan als de slider uitrolt, maar dan werkt het masonry effect niet meer.
Ik hoop dat iemand mij hiermee kan helpen. Mocht ik te onduidelijk zijn of dingen vergeten zijn toe te voegen dan hoor ik dit graag.
Groet,
Wnd
Hieronder staat de code.
Voor alle bestanden heb ik hier een .rar bestand geupload-> : KLIK
Code voorbeeld werkend: KLIK
Html / stuk jquery script:
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
67
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
67
<html>
<head>
<title>Help</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('#slider,#infoveld').stop().animate({left:'360px'}, {queue:false, duration:500});
}, function() {
$('#slider,#infoveld').stop().animate({left: '0px'}, {queue:false,duration:500});
});
});
$(function(){
$('#imageslide').masonry({
columnWidth: 15,
animate: true,
animationOptions: {
duration: 250,
// easing: 'linear',
specialEasing: { top: 'linear'},
queue: false
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="slider">
</div>
<div id="content">
<div id="imageslide" class="wrap">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Help</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('#slider,#infoveld').stop().animate({left:'360px'}, {queue:false, duration:500});
}, function() {
$('#slider,#infoveld').stop().animate({left: '0px'}, {queue:false,duration:500});
});
});
$(function(){
$('#imageslide').masonry({
columnWidth: 15,
animate: true,
animationOptions: {
duration: 250,
// easing: 'linear',
specialEasing: { top: 'linear'},
queue: false
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="slider">
</div>
<div id="content">
<div id="imageslide" class="wrap">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
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
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
body {
background: #131313;
margin: 0;
}
#wrapper {
height: 100%;
width: 100%;
position: absolute;
}
#slider {
background: #0f0f0f;
width: 400px;
height: 100%;
position: relative;
overflow: hidden;
margin-left: -360px;
float: left;
z-index: 8888;
}
#content {
height: 100%;
position: relative;
}
.cover {
height: 300px;
width: 300px;
background: red;
margin: 10px;
}
background: #131313;
margin: 0;
}
#wrapper {
height: 100%;
width: 100%;
position: absolute;
}
#slider {
background: #0f0f0f;
width: 400px;
height: 100%;
position: relative;
overflow: hidden;
margin-left: -360px;
float: left;
z-index: 8888;
}
#content {
height: 100%;
position: relative;
}
.cover {
height: 300px;
width: 300px;
background: red;
margin: 10px;
}
