Formulaire de contact Slide-In

[Petit Rasta]

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 !

[SpaceFrog]

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 !

[Petit Rasta]

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

[SpaceFrog]

il faut bien entendu modifier la position de depart de l'objet à slider ...

[Petit Rasta]

Ouais mais je ne vois pas où cette position est définie ...

[SpaceFrog]

dans le css

[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 ?

[SpaceFrog]

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

[Petit Rasta]

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

[SpaceFrog]

et dans le js ?

[Petit Rasta]

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