een slider maken
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
if (valid != '') {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
}
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
}
Alleen als ik dus nu eerst de slider met de class error naar benden heb en ik vul alle velden in, dan schuift eerst al de slider met de content van de class processing omhoog. Hoe kan ik zorgen dat eerst altijd de oude content en class omhoog schuift en daarna de juist weer naar beneden?
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
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
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js'></script>
</head>
<style>
.error {color: #ff0000;}
.processing {color: #0000ff;}
</style>
<body>
<div id="response_addmusic"></div>
<script type="text/javascript">
var valid = '';
function toggle(){
if (valid != '') {
$('#response_addmusic').slideUp('slow', function() {
$('#response_addmusic').delay(250)
.removeClass()
.addClass('error')
.html('please correct the errors below!' + valid)
.slideToggle(550);
});
valid = '';
} else {
$('#response_addmusic').slideUp('slow', function() {
$('#response_addmusic').delay(250)
.removeClass()
.addClass('processing')
.html('processing....')
.slideToggle(550)});
valid = 'eeee';
}
}
</script>
<button onClick="toggle()">test</button>
</body>
</html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js'></script>
</head>
<style>
.error {color: #ff0000;}
.processing {color: #0000ff;}
</style>
<body>
<div id="response_addmusic"></div>
<script type="text/javascript">
var valid = '';
function toggle(){
if (valid != '') {
$('#response_addmusic').slideUp('slow', function() {
$('#response_addmusic').delay(250)
.removeClass()
.addClass('error')
.html('please correct the errors below!' + valid)
.slideToggle(550);
});
valid = '';
} else {
$('#response_addmusic').slideUp('slow', function() {
$('#response_addmusic').delay(250)
.removeClass()
.addClass('processing')
.html('processing....')
.slideToggle(550)});
valid = 'eeee';
}
}
</script>
<button onClick="toggle()">test</button>
</body>
</html>
Je kunt het nl oplossen door de slideUp te doen en de rest van war je uit wil voeren in een callBack te plaatsen. Hierbij word de rest niet eerder uitgevoerd dan dat de slideUp() klaar is.
Gewijzigd op 01/01/2012 22:19:52 door Erwin Goossen
ik had dus dit:
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
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
$(document).ready(function() {
$('#response_addmusic').hide();
$('form #submit_addmusic').click( function(e) {
e.preventDefault();
var valid = '';
var required = ' is required';
var title = $('form #title').val();
var code = $('form #code').val();
if (title == '' || title.lenght <= 2) {
valid = '<p class="err_submission"> - The Title' + required +'</p>';
}
if (code == '' || code.lenght <= 5) {
valid += '<p class="err_submission"> - The code' + required + '</p>';
}
if (valid != '') {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
var addmusicData = $('#form_addmusic').serialize();
submitMusic(addmusicData);
}
});
function submitMusic(addmusicData) {
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').delay(150).removeClass().addClass('success').html('Music succesfully added!').fadeIn(3000);
if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').fadeOut('350')", 3500);
}
$('#title, #code').val("");
}
});
}
});
$('#response_addmusic').hide();
$('form #submit_addmusic').click( function(e) {
e.preventDefault();
var valid = '';
var required = ' is required';
var title = $('form #title').val();
var code = $('form #code').val();
if (title == '' || title.lenght <= 2) {
valid = '<p class="err_submission"> - The Title' + required +'</p>';
}
if (code == '' || code.lenght <= 5) {
valid += '<p class="err_submission"> - The code' + required + '</p>';
}
if (valid != '') {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('error').html('please correct the errors below!' + valid).slideToggle(550);
} else {
$('#response_addmusic').slideUp(550).delay(150).removeClass().addClass('processing').html('processing....').slideToggle(550);
var addmusicData = $('#form_addmusic').serialize();
submitMusic(addmusicData);
}
});
function submitMusic(addmusicData) {
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').delay(150).removeClass().addClass('success').html('Music succesfully added!').fadeIn(3000);
if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').fadeOut('350')", 3500);
}
$('#title, #code').val("");
}
});
}
});
maar waarom werkt de hele fadeIn(3000) niet meer als er added succesfully wordt weergeven? het wordt gewoon weergegeven met een vaste snelheid ook al doe je FadeIn weg...
Je kunt het if statement, als je deze wilt behouden, in de callback van de fadeIn zetten. Dan wordt eerst de gehele fadeIn uitgevoerd en daarna pas je if statement.
Voor de leesbaarheid van je script is het raadzaam om, bij gebruik van meerdere methoden, deze onder elkaar te plaatsen als in mijn voorbeeld. Dit vergroot de leesbaarheid aanzienlijk.
Gewijzigd op 01/01/2012 23:20:54 door Erwin Goossen
Toevoeging op 02/01/2012 13:02:09:
nu heb ik dus:
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
68
69
70
71
72
73
74
75
76
77
78
79
80
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
68
69
70
71
72
73
74
75
76
77
78
79
80
$(document).ready(function() {
$('#response_addmusic').hide();
$('form #submit_addmusic').click( function(e) {
e.preventDefault();
var valid = '';
var required = ' is required';
var title = $('form #title').val();
var code = $('form #code').val();
if (title == '' || title.lenght <= 2) {
valid = '<p class="err_submission"> - The Title' + required +'</p>';
}
if (code == '' || code.lenght <= 5) {
valid += '<p class="err_submission"> - The code' + required + '</p>';
}
if (valid != '') {
$('#response_addmusic').slideUp(550, function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('error')
.html('please correct the errors below!' + valid)
.slideToggle(550)
});
} else {
$('#response_addmusic').slideUp(550, function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('processing')
.html('processing....')
.slideToggle(550)
});
var addmusicData = $('#form_addmusic').serialize();
submitMusic(addmusicData);
}
});
function submitMusic(addmusicData) {
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('success')
.html('Music succesfully added!')
.fadeIn(3000, function() {
if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').fadeOut('550')", 3500);
}
});
$('#title, #code').val("");
}
});
}
});
$('#response_addmusic').hide();
$('form #submit_addmusic').click( function(e) {
e.preventDefault();
var valid = '';
var required = ' is required';
var title = $('form #title').val();
var code = $('form #code').val();
if (title == '' || title.lenght <= 2) {
valid = '<p class="err_submission"> - The Title' + required +'</p>';
}
if (code == '' || code.lenght <= 5) {
valid += '<p class="err_submission"> - The code' + required + '</p>';
}
if (valid != '') {
$('#response_addmusic').slideUp(550, function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('error')
.html('please correct the errors below!' + valid)
.slideToggle(550)
});
} else {
$('#response_addmusic').slideUp(550, function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('processing')
.html('processing....')
.slideToggle(550)
});
var addmusicData = $('#form_addmusic').serialize();
submitMusic(addmusicData);
}
});
function submitMusic(addmusicData) {
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').delay(150)
.removeClass()
.addClass('success')
.html('Music succesfully added!')
.fadeIn(3000, function() {
if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').fadeOut('550')", 3500);
}
});
$('#title, #code').val("");
}
});
}
});
alleen dat werkt nog steeds niet. (?)
- Weet je zeker dat je in de success functie komt?
- Wat zegt de console in de browser? errors, warnings
- Heb je de pagina live staan?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').fadeOut(100, function() {
$('#response_addmusic')
.removeClass()
.addClass('success')
.html('Music succesfully added!')
.fadeIn(1000, function() {
/*if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').slideUp('550')", 3500);
}*/
});
});
type: 'POST',
url: 'functions/add_music_data.php',
data: addmusicData,
timeout: 7000,
success: function() {
$('#response_addmusic').fadeOut(100, function() {
$('#response_addmusic')
.removeClass()
.addClass('success')
.html('Music succesfully added!')
.fadeIn(1000, function() {
/*if ($('#response_addmusic').hasClass('success')) {
setTimeout("$('#response_addmusic').slideUp('550')", 3500);
}*/
});
});
toch bedankt nog! :D
Toevoeging op 02/01/2012 14:54:33:
en ik had die /* ... */ op lijn 15 - 17 omdat ik even ergens mee bezig was ;)