Formulaire de contact Slide-In

Version imprimable

06/09/2011, 09h08
Petit Rasta

Formulaire de contact Slide-In

Bonjour à tous,

J'ai lu et mis en place le formulaire de contact Slide-In proposé par Janko Jovanovic sur cette page : http://designshack.developpez.com/tu...tact-slide-in/
Dans mon cas le lien se trouve en bas de page. Lors de l'ouverture du formulaire, la taille de celui-ci est plus importante que ma div contenu ce qui fait qu'il dépasse et rend l'affichage pas terrible.
J'ai cherché sur le net pour l'ouvrir de bas en haut et non de haut en bas mais je n'ai pas trouvé comment faire ...
Auriez-vous des conseils ?
Merci par avance !

Code:

1
2
3
4
5
6
7
8
9
$(”#contactLink”).click(function(){
                    if ($(”#contactForm”).is(”:hidden”)){
                        $(”#contactForm”).slideDown(”slow”);
                    }
                    else{
                        $(”#contactForm”).slideUp(”slow”);
                    }
                });
            });

up = vers le haut
down= vers le bas ...
suffit de les inverser !

J'ai bien entendu essayé avant de poster.
En faisant l'inverse, rien ne se passe...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$c(document).ready(  function()
                    {
                        $c('#contactLink').click(function()
                                                {
                                                    if ($c('#contactForm').is(':hidden'))
                                                    {
                                                        $c('#contactForm').slideUp('slow');
                                                    }
                                                    else
                                                    {
                                                        $c('#contactForm').slideDown('slow');
                                                    }
                                                });
                    });

06/09/2011, 10h27
SpaceFrog

il faut bien entendu modifier la position de depart de l'objet à slider ...
06/09/2011, 10h31
Petit Rasta

Ouais mais je ne vois pas où cette position est définie ...
06/09/2011, 10h39
SpaceFrog

dans le css
06/09/2011, 10h52
Petit Rasta
J'ai modifié le CSS pour que quand j'appuie sur le bout ça me le mette plus haut :
Code:

1 2 3 4 5 6 7 8 #contactForm { height:277px; width:351px; margin-top: -255px; background-image:url('../images/contact/bkg.jpg'); display:none; }
C'est pas terrible les margin-top mais bon. Mais lors de l'appuie sur le bouton rien ne se passe ...
Pourtant on agit bien sur la div contactForm via le slideUp.

[Edit] En faisant comme ça, ça marche à condition de laisser dans le même ordre le slideDown si c'est caché et le slideUp si c'est ouvert. Ce qui en soit est plutôt logique ^^
Par contre je ne comprend pas où tu voulais en venir ?
06/09/2011, 11h14
SpaceFrog

regarde ailleurs dans le code il doit y avoir une definition du top ...

Nan y en a pas :

Code:

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
#contactFormContainer
{
    position:absolute;
    left:600px;
    float:right;
}
 
#contactForm
{
    height:277px;
    width:351px;
    background-image:url('bkg.jpg');
    display:none;
}
 
#contactForm fieldset
{
    padding:30px;
    border:none;
}     
 
#contactForm label
{
    display:block;
    color:#ffc400;
}     
 
#contactForm input[type=text]
{
    display:block;
    border:solid 1px #4d3a24;
    width:100%;
    margin-bottom:10px;
    height:24px;
} 
 
#contactForm textarea
{
    display:block;
    border:solid 1px #4d3a24;
    width:100%;
    margin-bottom:10px;
} 
 
#contactForm input[type=submit]
{
    background-color:#4d3a24;
    border:solid 1px #23150c;
    color:#fecd28;
    padding:5px;
}
 
#contactLink
{
    height:40px;
    width:351px;
    background-image:url('slidein_button.png');
    display:block;
    cursor:pointer;
}
 
#messageSent
{
    color:#ff9933;
    display:none;
}

06/09/2011, 11h21
SpaceFrog

et dans le js ?

Non plus dans le js, j'ai juste ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$c(document).ready(  function()
					{
						$c('#contactLink').click(function()
						{
							if ($c('#contactForm').is(':hidden'))
							{
								$c('#contactForm').slideDown('slow');
							}
							else
							{
								$c('#contactForm').slideUp('slow');
							}
						});
                    });
 
function closeForm()
{
    $c('#messageSent').show('slow');
    setTimeout('$c("#messageSent").hide(); $c("#contactForm").slideUp("slow")', 2000);
}