een slider maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Marc -

Marc -

01/01/2012 16:07:23
Quote Anchor link
Tot nu toe heb ik dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
        
        }


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?
 
PHP hulp

PHP hulp

29/03/2024 15:33:07
 
Erwin Goossen

Erwin Goossen

01/01/2012 22:18:35
Quote Anchor link
Onderstaande code werkt. Dit is wel zonder het opnieuw laden van de pagina.
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
<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
 
Marc -

Marc -

01/01/2012 22:39:33
Quote Anchor link
oke bedankt! Dat pas ik morgen even aan! Alleen ik had nog een probleempje:
ik had dus dit:

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
$(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("");
        }
    
    });

}


});


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...
 
Erwin Goossen

Erwin Goossen

01/01/2012 23:18:29
Quote Anchor link
Bij succes voeg je de class success toe. Hierna doe je een fadeIn. Direct daarna doe je een if op aanwezigheid van de class success. Deze is er altijd op dit punt. In de if staat een fadeOut welke dus aan wordt geroepen voordat uberhaupt de fadeIn plaats heeft kunnen vinden.
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
 
Marc -

Marc -

02/01/2012 12:35:24
Quote Anchor link
oke bedankt! Ik ga het nu even aan passen

Toevoeging op 02/01/2012 13:02:09:

nu heb ik dus:

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
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("");
        }
    
    });

}


});


alleen dat werkt nog steeds niet. (?)
 
Erwin Goossen

Erwin Goossen

02/01/2012 13:53:59
Quote Anchor link
Aantal vragen:
- 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?
 
Marc -

Marc -

02/01/2012 14:52:04
Quote Anchor link
ik heb hem al werkend gekregen met dit:

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
$.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);
                                                                }*/                    
                                    });
            
            });


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 ;)
 



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.