Effet de transition fondue dans des onglets.

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

Résolu Effet de transition fondue dans des onglets.

Message par adminîle le Lun 6 Jan 2014 - 23:02

    Bonsoir (:

    j'utilise pas mal le système d'onglets sur mon forum, mais je souhaiterais y ajouter des effets de transition en fondu ou en glissement ; j'ai fait quelques recherches sur google & il me semble qu'il faut manipuler du Jquery (pour obtenir des effets "fadeIn", "fadeOut", "slideDown", "slideUp", ect.) Comme par exemple sur la PA de ce forum ou comme c'est montré sur ce site. J'ai essayé de suivre des tutos, mais je ne comprends pas comment je peux associer ces codes de Jquery aux codes html/css/java que j'ai déjà pour mes onglets sur mon forum... enfin bref je ne suis pas très fute-fute & je suis un peu perdue Sorry

    je vous donner un exemple des mes codes html, css, pour mon système d'onglets :


    Code:
    <table border="0" class="ongllets"><tr>
    <td class="onglet_0 ongllet" id="ongllet_ongllet1" onmouseover="javascript:change_ongllet('ongllet1');"> onglet n°1 </td>
    <td class="onglet_0 ongllet" id="ongllet_ongllet2" onmouseover="javascript:change_ongllet('ongllet2');"> onglet n°2 </td>
    <td class="onglet_0 ongllet" id="ongllet_ongllet3" onmouseover="javascript:change_ongllet('ongllet3');"> onglet n°3 </td>
    <td class="onglet_0 ongllet" id="ongllet_ongllet4" onmouseover="javascript:change_ongllet('ongllet4');"> onglet n°4 </td>
    </tr></table>
    <br>
    <div class="systeme_ongllets"><div class="contenu_ongllets">
    <div class="contenu_ongllet" id="contenu_ongllet_ongllet1"><center> bla'bla'bla <br> contenu onglet n° 1</center> </div>
    <div class="contenu_ongllet" id="contenu_ongllet_ongllet2"><center> bla'bla'bla <br> contenu onglet n° 2</center> </div>
    <div class="contenu_ongllet" id="contenu_ongllet_ongllet3"><center> bla'bla'bla <br> contenu onglet n° 3</center> </div>
    <div class="contenu_ongllet" id="contenu_ongllet_ongllet4"><center> bla'bla'bla <br> contenu onglet n° 4</center> </div>
    </div></div>
    Code:
    .ongllet li {
    float:left;
    list-style-type:none;
    text-decoration:none; !important
    cursor:pointer;
    }
     
    .ongllet li a {
    display:block;
    text-decoration:none; !important
    list-style-type: none;
    cursor:pointer;
    }
     
    .ongllet_1 {
    text-decoration: none;
    border: 0px;
    cursor:pointer;
    font-variant: normal !important;
    color: #97887B;
        text-shadow: #97887B 0px 0px 6px;
    font-size: 16px;
    padding-right: 10px;
      padding-left: 10px;
    margin-left: 6px;
    font-family: 'Oxygen', sans-serif;
      letter-spacing: -1px;
    }
     
    .ongllet_0 {
    font-variant: normal !important;
    color: #6F5F51;
      text-shadow: #57473A 0px 0px 1px;
    text-decoration: none;
    font-size: 16px;
    padding-right: 10px;
      padding-left: 10px;
    margin-left: 6px;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: -1px;
    cursor:pointer;
    }
     
     
     
     .contenu_ongllet {  font-family: verdana;
    font-size: 9px;
    padding: 10px;
    background-color: #57473A;
      width: 270px !important;
      height: 140px !important;
      border-right: 4px #97887B solid;
    border-left: 4px #97887B solid;
      -moz-box-shadow: #080808 0px 1px 3px;-webkit-box-shadow: #080808 0px 1px 3px;box-shadow: #080808 0px 1px 3px;
    text-align: justify;
                    display:none; }
    Code:
    //<!--
                    function change_ongllet(name)
                    {
                            document.getElementById('ongllet_'+anc_ongllet).className = 'ongllet_0 ongllet';
                            document.getElementById('ongllet_'+name).className = 'ongllet_1 ongllet';
                            document.getElementById('contenu_ongllet_'+anc_ongllet).style.display = 'none';
                            document.getElementById('contenu_ongllet_'+name).style.display = 'block';
                            anc_ongllet = name;
                    }
            //-->
    Code:
    //<!--
                    var anc_ongllet = 'ongllet1';
                    change_ongllet(anc_ongllet);
            //-->
           

    voilà, donc que dois-je ajouter à tout ça pour avoir un effet de transition entre mes onglets (fondu ou glissement) ? je me doute que ça doit pas être aussi simple que je le dis, donc un gros merci à la personne qui pourra m'apporter son aide, une solution ou des tuyaux ♥
    mon forum est un phpBB2 avec templates modifiées, dont voici l'adresse : http://essai-ti.forum2ouf.com/

    En vous remerciant d'avance ::fleur::


Dernière édition par adminîle le Lun 6 Jan 2014 - 23:43, édité 1 fois

adminîle
***

Féminin
Messages : 116
Inscrit(e) le : 05/04/2008

http://theisland.forumakers.com/
adminîle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par [Nihil] le Lun 6 Jan 2014 - 23:06

Pourrais tu donner le lien de ton forum visible pour les invités, sinon nous risquons d'avoir un peu de mal pour voir les onglets Wink!

Edit : est tu sûre que tous les codes sont complets ? (je pense notamment au JS là)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par adminîle le Lun 6 Jan 2014 - 23:45

    Merci de ta réponse (:
    J'ai modifié l'adresse pour le forum, et j'ai ajouté en effet un bout de JS que j'avais oublié.
    N'hésite pas à me dire si tu as besoin de plus d'infos  Clin d\'oeil 

adminîle
***

Féminin
Messages : 116
Inscrit(e) le : 05/04/2008

http://theisland.forumakers.com/
adminîle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par [Nihil] le Mar 7 Jan 2014 - 0:03

Peux tu essayer de remplacer ta fonction JS par celle ci s'il te plait ?
Code:
function change_ongllet(name)
{
 document.getElementById('ongllet_'+anc_ongllet).className = 'ongllet_0 ongllet';
 document.getElementById('ongllet_'+name).className = 'ongllet_1 ongllet';
 $('#contenu_ongllet_'+anc_ongllet).fadeOut("fast",function(){
 $('#contenu_ongllet_'+name).fadeIn();
 anc_ongllet = name;
 });
}

Edit : j'ai modifié le code, il y avait un petit bug.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par adminîle le Mar 7 Jan 2014 - 0:33

    Super, ça a à l'air de super bien marcher, merci !  Flowers2 

    Par contre, y aurait-il un moyen pour qu'il y ait vraiment un passage de transition fondu entre 2 onglets ? Je sais pas si tu vois ce que je veux dire ? (ex. sur la page d'accueil de ce forum) C'est possible ?
    si c'est trop compliqué, c'est pas grave, je me contenterais de la première solution (:


Dernière édition par adminîle le Mar 7 Jan 2014 - 0:34, édité 1 fois (Raison : ajout d'un exemple.)

adminîle
***

Féminin
Messages : 116
Inscrit(e) le : 05/04/2008

http://theisland.forumakers.com/
adminîle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par [Nihil] le Mar 7 Jan 2014 - 18:16

Oups, je dois vraiment pas être douée mais peux tu me dire à quel endroit dans ton exemple il y a des onglets ? J'arrive vraiment pas à trouver ^^''

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par adminîle le Mar 7 Jan 2014 - 19:29

    A droite de la page d'accueil, là où y'a "'le staff", y'a 10 petites bulles, & quand tu cliques, les onglets changent avec une transition en fondu pas mal (: on peut voir cet effet par exemple aussi sur ce forum, pareil dans la rubrique "le staff" sur la PA.

    merci d'avance  I love you 

adminîle
***

Féminin
Messages : 116
Inscrit(e) le : 05/04/2008

http://theisland.forumakers.com/
adminîle a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Effet de transition fondue dans des onglets.

Message par [Nihil] le Mar 7 Jan 2014 - 21:44

J'ai essayé quelque chose en gardant le même modèle, je suis pas super convaincue mais c'est déjà mieux.

JS :
Code:
                var anc_ongllet = 'ongllet1';
                change_ongllet(anc_ongllet);
   function change_ongllet(name)
   {
      document.getElementById('ongllet_'+anc_ongllet).className = 'ongllet_0 ongllet';
      document.getElementById('ongllet_'+name).className = 'ongllet_1 ongllet';
      $('#contenu_ongllet_'+anc_ongllet).fadeOut("fast");
      $('#contenu_ongllet_'+name).fadeIn();
         anc_ongllet = name;
   }

CSS
Code:
.ongllet li {
    float: left;
    list-style-type: none;
    text-decoration: none;
    !important
cursor: pointer;
}

.ongllet li a {
    display: block;
    text-decoration: none;
    !important
list-style-type: none;
    cursor: pointer;
}

.ongllet_1 {
    text-decoration: none;
    border: 0px;
    cursor: pointer;
    font-variant: normal !important;
    color: #97887B;
    text-shadow: #97887B 0px 0px 6px;
    font-size: 16px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 6px;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: -1px;
}

.ongllet_0 {
    font-variant: normal !important;
    color: #6F5F51;
    text-shadow: #57473A 0px 0px 1px;
    text-decoration: none;
    font-size: 16px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 6px;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: -1px;
    cursor: pointer;
}

.contenu_ongllets {
    position: relative;
    font-family: verdana;
    font-size: 9px;
    padding: 10px;
    background-color: #57473A;
    width: 270px !important;
    height: 140px !important;
    border-right: 4px #97887B solid;
    border-left: 4px #97887B solid;
    -moz-box-shadow: #080808 0px 1px 3px;
    -webkit-box-shadow: #080808 0px 1px 3px;
    box-shadow: #080808 0px 1px 3px;
}

.contenu_ongllet {
    position: absolute;
}

.contenu_ongllet {
    text-align: justify;
    display: none;
}

HTML identique.

Le principe en fait est de ne pas faire disparaitre le fond, mais juste changer les textes. Comme ça c'est un peu mieux mais pas exactement comme tes exemples ^^.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition fondue dans des onglets.

Message par adminîle le Mar 7 Jan 2014 - 22:26

    Oh bah je trouve ça vraiment top, ça me convient parfaitement !
    merci beaucoup beaucoup beaucoup  I love you 

adminîle
***

Féminin
Messages : 116
Inscrit(e) le : 05/04/2008

http://theisland.forumakers.com/
adminîle 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