jQuery slide
ik zat laats eens wat te spelen met jQuery en ik wou een stukje gaan inbouwen in mijn site alleen wil het niet werken.
ik heb alles letterlijk gekopieerd maar het werkt in mijn site niet maar in mijn tests wel.
dit komt uit mijn site:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> // Dit heb ik in de <head>
<?php
echo '<a href="javascript:void(0);" class="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br />';
echo '<div class="reviews" style="display: none;">';
echo '</div>';
echo '
<script type="text/javascript">
slide=0;
$(".uitklappen").click(function() {
if(slide==0)
{
$(".reviews").slideDown("slow");
$(".reviews").delay(500);
slide=1;
} else {
$(".reviews").slideUp("slow");
$(".reviews").delay(500);
slide=0;
}
});
</script>';
?>
<?php
echo '<a href="javascript:void(0);" class="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br />';
echo '<div class="reviews" style="display: none;">';
echo '</div>';
echo '
<script type="text/javascript">
slide=0;
$(".uitklappen").click(function() {
if(slide==0)
{
$(".reviews").slideDown("slow");
$(".reviews").delay(500);
slide=1;
} else {
$(".reviews").slideUp("slow");
$(".reviews").delay(500);
slide=0;
}
});
</script>';
?>
en hier de code uit mijn test pagina:
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
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
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:500px; height:500px;
position:relative;
font-size:12pt; text-align:center;
color:gray; background:black;
padding-top:175px;
top:0; left:0;
z-index: -1;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" class="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br />
<div class="reviews">
bla bla bla
bla bla bla
bla bla bla
bla bla bla
</div>
<script type="text/javascript">
slide=0;
$(".uitklappen").click(function() {
if(slide==0)
{
$(".reviews").slideDown("slow");
$(".reviews").delay(500);
slide=1;
} else {
$(".reviews").slideUp("slow");
$(".reviews").delay(500);
slide=0;
}
});
</script>
</body>
</html>
<html>
<head>
<style>
div {
width:500px; height:500px;
position:relative;
font-size:12pt; text-align:center;
color:gray; background:black;
padding-top:175px;
top:0; left:0;
z-index: -1;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" class="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br />
<div class="reviews">
bla bla bla
bla bla bla
bla bla bla
bla bla bla
</div>
<script type="text/javascript">
slide=0;
$(".uitklappen").click(function() {
if(slide==0)
{
$(".reviews").slideDown("slow");
$(".reviews").delay(500);
slide=1;
} else {
$(".reviews").slideUp("slow");
$(".reviews").delay(500);
slide=0;
}
});
</script>
</body>
</html>
Gewijzigd op 28/09/2010 20:09:57 door Vincent Huisman
En misschien is slideToggle ook wel iets voor je. :)
Iets van dittum:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<a href="javascript:void(0);" id="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br />
<div id="reviews">
bla bla bla
bla bla bla
bla bla bla
bla bla bla
</div>
<script type="text/javascript">
$("#uitklappen").click(function() {
$("#reviews).slideToggle("slow");
});
</script>
<div id="reviews">
bla bla bla
bla bla bla
bla bla bla
bla bla bla
</div>
<script type="text/javascript">
$("#uitklappen").click(function() {
$("#reviews).slideToggle("slow");
});
</script>
edit:
het werkt nog niet
Gewijzigd op 28/09/2010 20:34:12 door Vincent Huisman
Maak van
Code (php)
1
href="javascript:void(0);"
eens
Code (php)
1
href="#"
Dat geeft soms nog wel moeilijkheden.
Verder geef je niet aan wat er precies misgaat, ik gok er op dat het ding niet uitschuift?
die 2e is de broncode van de testpagina waarin ik het dus getest heb en daarin werkt het wel helemaal.
de # werkt ook niet, de reden dat ik die niet had gebruikt was omdat IE er niet goed mee kan werken
uiteraard is het probleem dat hij niet uitschuift.
Edit:
Dit zegt mijn js error console:
Quote:
Uncaught TypeError: Cannot call method 'click' of null
(anonymous function)
(anonymous function)
maar dat komt zeker alleen maar door dat ik jQuery gebruik of niet?
Gewijzigd op 28/09/2010 20:42:54 door Vincent Huisman
Verder lijkt het er op dat je div sowiso leeg is, dus wat wil je bereiken met het uitschuiven van een lege div?
hier de broncode:
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
<a href="javascript:void(0);" id="uitklappen" title="Reviews bekijken">Reviews bekijken</a><br /><div id="reviews" style="display: none;"><br />Er zijn nog geen reviews bij dit product.</div>
<script type="text/javascript">
slide=0;
$("#uitklappen").click(function () {
if(slide==0)
{
$("#reviews").slideDown("slow");
$("#reviews").delay(500);
slide=1;
} else {
$("#reviews").slideUp("slow");
$("#reviews").delay(500);
slide=0;
}
});
</script>
<script type="text/javascript">
slide=0;
$("#uitklappen").click(function () {
if(slide==0)
{
$("#reviews").slideDown("slow");
$("#reviews").delay(500);
slide=1;
} else {
$("#reviews").slideUp("slow");
$("#reviews").delay(500);
slide=0;
}
});
</script>
mij div is niet leeg. als er geen reviews zijn, dan komt die tekst "Er zijn nog geen reviews bij dit product."
Code (php)
1
2
3
4
5
2
3
4
5
...
$("#reviews").show();
$("#reviews").slideDown("slow");
$("#reviews").delay(500);
...
$("#reviews").show();
$("#reviews").slideDown("slow");
$("#reviews").delay(500);
...
in de if zetten uiteraard ..
Edit:
Heeft #reviews wel een breedte en hoogte ?
Kijk anders nog even naar het 1e voorbeeld hier:
http://api.jquery.com/slideDown/
Heeft #reviews wel een breedte en hoogte ?
Kijk anders nog even naar het 1e voorbeeld hier:
http://api.jquery.com/slideDown/
Gewijzigd op 28/09/2010 21:36:19 door Martijn B
ik heb even geprobeerd met een alert na de
Code (php)
1
$("#uitklappen").click(function () {
maar ik krijg geen alert, wel in mijn test pagina
Edit
De hoogte en breedte instellen helpt ook niet
Gewijzigd op 28/09/2010 21:38:23 door Vincent Huisman
Code (php)
1
alert($("#uitklappen"));
of wordt de js niet goed aangeroepen? ik heb namelijk wel 6 js bestanden aangeroepen
Gewijzigd op 28/09/2010 21:41:53 door Vincent Huisman
Zet er anders eens omheen:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function() {
...
});
...
});
Gewijzigd op 28/09/2010 21:42:40 door Martijn B
dit zijn de js's die ik laad:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script src="js/functies.js" type="text/javascript"></script>
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
Prototype vs jquery (Prototype wint helaas)
Als je prototype eruit haalt dan werkt je script.
Want zoals je het nu hebt is het wat dubbel op.
Shadowbox kan bijvoorbeeld gebruik maken van jQuery.
Geen ervaring mee maar volgens mij is deze wel makkelijk:
http://www.digitalia.be/software/slimbox2
Volgens mij hoef je dan geen HTML te veranderen.
Gewijzigd op 28/09/2010 22:02:36 door Martijn B
Hier :
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Gewijzigd op 28/09/2010 22:12:18 door Th van
Dus:
Code (php)
1
2
3
2
3
jQuery(document).ready(function() {
...
});
...
});
Maar je kunt beter die oude/trage/lompe lightbox vervangen en dan bedoel ik ook prototype.
Gewijzigd op 28/09/2010 22:14:44 door Martijn B
bedankt, ik heb het nu werkend!
Edit:
hoe kan ik met die lightbox de donkere kleur nog donkerder maken?
Toevoeging op 29/09/2010 09:21:49:
bump
Gewijzigd op 29/09/2010 20:20:10 door Vincent Huisman
