Champs de recherche qui change de taille

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Champs de recherche qui change de taille

Message par Anya31 le Mer 19 Sep 2012 - 21:19

Bonjour

J'aime beaucoup le champs de recherche qui s'agrandit quand on clique dedans
comme ici, en haut à droite

comment peut-on avoir cela ?

merci


Dernière édition par Anya31 le Sam 22 Sep 2012 - 8:16, édité 1 fois

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par no_way le Mer 19 Sep 2012 - 21:24

Bonsoir, ceci est réalisé grâce à un code CSS, je vous conseille de vous renseigner sur la propriété « transition » ...

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par Anya31 le Jeu 20 Sep 2012 - 6:57

bonjour
merci de cette piste

alors j'ai essayé 2-3 trucs, mais sans résultat...

dernière tentative :
sur ma page d’accueil (dans : PA/affichage/page d'accueil/généralité/message de la page d'accueil)

j'ai mis un petit tableau :
Code:
<table width="70%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td><br />
         <form action="/search.forum" method="get">
            <div class="gensmall">
               <input type="text" class="bginput" name="search_keywords" size="24" style="width:80px;" /> <input type="submit" class="button" value="Go" />
                </td>
                <td><br />
        <input id="interne" type="radio" name="typerecherche" value="interne" checked="checked" /><label for="interne"> Forum Touslesloulous</label> 
               <input id="google" type="radio" name="typerecherche" value="google" /><label for="google"> <b><font color="#0039b6">G</font><font color="#c41200">o</font><font color="#f3c518">o</font><font color="#0039b6">g</font><font color="#30a72f">l</font><font color="#c41200">e</font></b></label><br /><br />
            <a href="/search.forum"> Recherche avancée</a>
            </div>
         </form>
      </td>
   </tr>
</table><br />

et dans la feuille CSS, j'ai mis :
Code:
.bginput {
     -moz-transition-duration: 1s;
       width: 150px;
   }

Qu'est ce c'est qui ne va pas ?

merci

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par no_way le Jeu 20 Sep 2012 - 10:34

Une transition se fait entre deux états, dans votre cas vous souhaitez faire une transtion de largeur selon que le visiteur donne le focus au champ de recherche ou pas (clique dans le champ ou pas), remplacez votre code par celui-ci:
Code:
.bginput {
    -moz-transition:width 1s;
    -o-transition:width 1s;
    -webkit-transition:width 1s;
    -ms-transition:width 1s;
    transition:width 1s;
      width: 100px;
  }
.bginput:focus{
      width: 200px;
  }

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par Anya31 le Jeu 20 Sep 2012 - 19:27

Je me disais bien qu'il manquait des choses

merci beaucoup
je vais aller voir ce que ça donne


EDIT:
yeah ça marche !
en enlevant dans le code html plus haut la notion style="width:80px;

alors, tant qu'à y être:
- je voudrais mettre un fond blanc dans la zone de saisie...
- et : là la transition se fait vers la droite. Comment faire pour que ça aille vers la gauche ?

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par no_way le Ven 21 Sep 2012 - 14:19

Pour la couleur de fond, il faut la spécifier avec la propriété "background-color", quand à la direction faite lors de la transition, celle-ci dépend du positionnement de votre champ de recherche, si vous le bloquez côté droit, la transition sera donc forcée d'opérer sur la gauche.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par Anya31 le Ven 21 Sep 2012 - 20:07

oki
super !
merci

alors une petite question
j'ai mis :hover au lieu de :focus
y a-t-il un moyen en CSS de bloquer ce hover quand on fait un click dans le champs de recherche ?


Edit:
non, idiot!
il faut plutot que je revois la facon dont j'ai "conçu" mon espèce de tableau plutôt Wink

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par no_way le Ven 21 Sep 2012 - 21:37

De rien mais le but du focus est que la transition ait lieu que lorsque le visiteur clique dans le champ de recherche, n'était-ce pas ce que vous souhaitiez réaliser ?!?

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Champs de recherche qui change de taille

Message par Anya31 le Sam 22 Sep 2012 - 8:15

Si, c'est effectivement ce que je recherchais
mais j'explorai les "options'' Wink

en tout cas merci de m'avoir fait découvrir ces effets de transition sur des champs en CSS
Bravo2

Je mets en résolu

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum