Où placer le javascrpit ...

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

Résolu Où placer le javascrpit ...

Message par elsa2607 le Dim 22 Juin 2014 - 17:41

Bonsoir,

J'ai un tout petit problème ^^ j'ai suivi un tutoriel et je coince car l'auteur à été très ambigu quand à l'endroit ou placer le script :
Tutoriel:

il faut dèja importer Jquery:
Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
ensuite il faut mettre le code suivant dans les balises
Code:

<script type="text/javascript"></script>
ou bien le mettre d'en un fichier externe et l'appeler ensuite bref il y a déja un tuto la dessus.
HTML:

Donc j'ai le HTML & le CSS :

Code:

<div class="bloc">  <!--DIV pour le bloc-->
            <div class="title">  <!--DIV pour le titre-->
                Menu avec onglet
                <div class="tabs" id="tabs1">  <!--DIV pour les onglets, il faut changer cet id si vous voulez une deuxième navigation sur la meme page-->
                    <a href="#contenu1">Accueil</a>
                    <a href="#contenu2">News</a>
                    <a href="#contenu3">Contact</a>
                </div>
            </div>
            <div class="content"> <!--DIV pour les contenus-->
                <div id="contenu1">
                    <h1>Accueil</h1>
                    <p>
Bienvenue sur Jecode<br /><br />
Jecode est un forum d'entraide pour tout ceux qui aimeraient réaliser seuls un site de A à Z ou qui aimeraient apprendre la base des principaux langages du web. <br /><br />Au programme : tutoriels, trucs & astuces concernant le html, le css, le php, le javascript, etc.<br /> Mais aussi la possibilité de faire des commandes de code et des demandes d’aide.                    </p>

                </div>
                <div id="contenu2">
                    <h1>News</h1>
                    <p>
                        Consectetur adipiscing elit. Donec lacinia viverra magna id molestie. Sed convallis urna et libero accumsan ultrices. Etiam sodales nisi ut ante tempor a pretium lacus laoreet. Duis laoreet dapibus lectus, sed interdum dui pellentesque sit amet. Vivamus eu ipsum nec justo lobortis tempor. Vivamus convallis orci sit amet nisi hendrerit pulvinar mattis est elementum. Ut tincidunt fermentum erat, adipiscing molestie tortor accumsan a. Maecenas eu mauris ac odio ornare mattis ac in orci. Curabitur adipiscing lectus a neque sagittis quis egestas magna feugiat. Etiam vitae diam nec mi consectetur aliquam. Donec consequat, velit eget faucibus luctus, augue nulla hendrerit erat, in dictum libero purus vitae sem. Aliquam laoreet, ligula in aliquam tincidunt, augue ante eleifend tellus, eu tempus tortor arcu a tortor.
                    </p>
                </div>
                <div id="contenu3">
                    <h1>Contact</h1>
                    <p>
                    Donec lacinia viverra magna id molestie. Sed convallis urna et libero accumsan ultrices. Etiam sodales nisi ut ante tempor a pretium lacus laoreet. Duis laoreet dapibus lectus, sed interdum dui pellentesque sit amet. Vivamus eu ipsum nec justo lobortis tempor. Vivamus convallis orci sit amet nisi hendrerit pulvinar mattis est elementum. Ut tincidunt fermentum erat, adipiscing molestie tortor accumsan a. Maecenas eu mauris ac odio ornare mattis ac in orci. Curabitur adipiscing lectus a neque sagittis quis egestas magna feugiat. Etiam vitae diam nec mi consectetur aliquam. Donec consequat, velit eget faucibus luctus, augue nulla hendrerit erat, in dictum libero purus vitae sem. Aliquam laoreet, ligula in aliquam tincidunt, augue ante eleifend tellus, eu tempus tortor arcu a tortor.
                    </p>
                </div>
            </div>
        </div>
et là le JAVASCRIPT

Code:
jQuery(function($){
   
    /**
    * Système d'onglet
    */
    $('.tabs').each(function(){
        var current = null;            // Permet de connaitre l'élément courant
        current = $(this).find('a:first').attr('href');
        $(this).find('a[href="'+current+'"]').addClass('active');  // On ajoute la classe active sur le lien qui correspond
        $(current).siblings().hide();  // On masque les éléments
        $(this).find('a').click(function(){
                var link = $(this).attr('href');
                if(link == current){
                    return false;
          }else{
              // On ajoute la class active sur l'onglet courant et on la supprime des autres onglets
              $(this).addClass('active').siblings().removeClass('active');
              $(link).show().siblings().hide();    // On masque/affiche les div suivant les cas
              current = link;                      // On change la valeur de l'onglet courant
          }
        });
    });
   
});

Je ne comprend pas où metre le javascript :$ J'ai jamais rien compris à ça :$ :$
Quelqu'un peut-il me dire ?

Mon code java dans le PA:

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">jQuery(function($){
   
    /**
    * Système d'onglet
    */
    $('.tabs').each(function(){
        var current = null;            // Permet de connaitre l'élément courant
        current = $(this).find('a:first').attr('href');
        $(this).find('a[href="'+current+'"]').addClass('active');  // On ajoute la classe active sur le lien qui correspond
        $(current).siblings().hide();  // On masque les éléments
        $(this).find('a').click(function(){
                var link = $(this).attr('href');
                if(link == current){
                    return false;
          }else{
              // On ajoute la class active sur l'onglet courant et on la supprime des autres onglets
              $(this).addClass('active').siblings().removeClass('active');
              $(link).show().siblings().hide();    // On masque/affiche les div suivant les cas
              current = link;                      // On change la valeur de l'onglet courant
          }
        });
    });
   
});</script>
urbangraphisme.forumactif.org
Mercii


Dernière édition par elsa2607 le Sam 28 Juin 2014 - 13:16, édité 3 fois

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Où placer le javascrpit ...

Message par Kaktus le Dim 22 Juin 2014 - 20:11

Bonsoir,
Sur forumactif, pas besoin de cette ligne puisque c'est implanté de base:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Et pour ce code;
Code:
jQuery(function($){
 
    /**
    * Système d'onglet
    */
    $('.tabs').each(function(){
        var current = null;            // Permet de connaitre l'élément courant
        current = $(this).find('a:first').attr('href');
        $(this).find('a[href="'+current+'"]').addClass('active');  // On ajoute la classe active sur le lien qui correspond
        $(current).siblings().hide();  // On masque les éléments
        $(this).find('a').click(function(){
                var link = $(this).attr('href');
                if(link == current){
                    return false;
          }else{
              // On ajoute la class active sur l'onglet courant et on la supprime des autres onglets
              $(this).addClass('active').siblings().removeClass('active');
              $(link).show().siblings().hide();    // On masque/affiche les div suivant les cas
              current = link;                      // On change la valeur de l'onglet courant
          }
        });
    });
 
});


Allez sur le panneau d'administration, puis l'onglet Modules, enfin Gestion des codes Javascript en bas de la page. Cocher Oui à Activer la gestion des codes Javascript puis :enreg: . Cliquez sur  ajout Créer un nouveau javascript. Donnez le titre de votre choix pour vous repérer, cochez sur toutes les pages, collez le code puis  :enreg: Et voilà, il n'y qu'à mettre le CSS dans la feuille et le HTML à l'endroit où vous souhaitez mettre le code !

Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par elsa2607 le Dim 22 Juin 2014 - 20:27

Merci beaucoup ! Smile
Mais y a t'il un moyen que quand on clique sur un des onglets la plage de remonte pas systématiquement au début du contenu ? C'est à dire qu'elle reste au même endroit que lors du clique.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par Kaktus le Dim 22 Juin 2014 - 20:40

De rien !
Ah par contre, il me semble que c'est à cause du code utilisé puisque les onglets sont en fait des liens donc forcément la page remonte... Il faudrait changer le code et le javascript associé, peut être jeter un œil par-ici: http://forum.forumactif.com/t310879-tableaux-a-onglets c'est facilement personnalisable et fonctionnel ! Wink

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par elsa2607 le Dim 22 Juin 2014 - 20:45

J'avais déjà regardé le tuto :p et malheureusement le Javascript n'est pas expliqué donc moi qui ne m'y connait pas, le tuto ne va pas beaucoup m'aider :/

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par Kaktus le Dim 22 Juin 2014 - 20:50

Techniquement il n'y a pas besoin d'y toucher, c'est surtout par le CSS que passe la personnalisation. Wink

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par elsa2607 le Dim 22 Juin 2014 - 21:27

Ce serait pas la position "absolute" du CSS ? là :
Code:
 
body{
  font-family:Arial;
  letter-spacing:1px;
  font-size:14px; /* Taille du Texte */
  color:#6B6B6B; /* Couleur du Texte */
  line-height:15px;
  background:url("http://nsa30.casimages.com/img/2012/07/14/120714092414955910.png"); /* Image de Fond */
}

/*-- Affichage de la Totalite de la Boite --*/
.bloc{
  margin:50px;
  box-shadow:0px 2px 10px #949494; /* Ombre sur le Bloc*/
  border-radius:5px; /* Coins Arrondis sur le Bloc*/
}

/*-- Affichage du Titre en Haut du Menu --*/
.bloc .title{
  position:relative; /* Position Relative pour Positionner Correctement Onglets */
  padding-left:12px;
  height:34px;
  border-radius:5px 5px 0 0; /* Coins Arrondis */
  background-color:#363636; /* Couleur de Fond */
  color:#ECEDF3; /* Couleur du Texte */
  text-shadow:0px -2px #070F2A;
  line-height:35px;
  font-weight:bold; /* Texte en Gras */
}

/*-- Affichage des Titre dans le Contenu des Onglets --*/
.bloc h1{
  color:#000; /* Couleur du Texte */
  font-size:20px;
  margin-bottom:12px;
}

/*-- Affichage de Tous les Contenus --*/
.bloc .content{
  background:#FFFFFF; /* Couleur de Fond */
  border-radius:0 0 5px 5px; /* Coins Arrondis */
  padding:12px;
}

/*-- Affichage du Tableau des Onglets --*/
.bloc .title .tabs{
  position:absolute; /* Position Absolute pour Positionner Correctement */
  bottom:0;
  right:0;
}

/*-- Affichage des Onglets */
.bloc .title .tabs a{
  background:#8C8C8C; /* Couleur de Fond */
  display:inline-block; /* Permet de Régler la Hauteur */
  color:#FFF;
  text-shadow:none;
  text-decoration:none;
  padding:0 10px;
  height:25px;
  vertical-align:bottom;
  font-weight:normal;
  font-size:12px; /* Taille du Texte */
  line-height:25px; /* Permet de Centre la Hauteur d'Ecriture */
  border-radius:5px 5px 0 0; /* Coins Arrondis */
  margin-right:3px;
}
/*-- Affichage des Onglets Actifs */
.bloc .title .tabs a:hover,.bloc .title .tabs a.active{
  background-color:#FFFFFF; /* Couleur de Fond */
  color:#000000; /* Couleur du Texte */
}

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par elsa2607 le Mer 25 Juin 2014 - 10:47

up

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Où placer le javascrpit ...

Message par elsa2607 le Ven 27 Juin 2014 - 15:38

up

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 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