Membres connectés récemment
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll
+8
petit coq
Tawny
50Thierry
photoclic
SuperSpaceCab
Gae
mariok
Milouze14
12 participants
Page 1 sur 1 • Partagez
,
une petite astuce afin d'intégrer une ancre pour chaque catégorie de votre fofo .
L'astuce est présente actuellement sur ce forum,on peut visualiser avant chaque catégorie une liste qui représente toutes les catégories.
Dés que vous cliquez sur une entre-elles vous arriver avec un effet de transition à la catégorie voulue .
Pour que l'astuce fonctionne il faudra séparer les catégories sur l'index
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index
Aperçu imagé:
Il faudra donc regarder le script et l'adapter à votre fofo suivant le nombre de catégories
L'astuce est basée sur 8 catégories
Si vous ne comprenez pas le fonctionnement , direction l'entraide
Affichage/Page d'acceuil/Généralités/Message sur la page d'accueil
Collez ceci:
Pensez a cliquer sur le bouton
On va créer un script :
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ce script:
Penser a cliquer sur le bouton
Puis on donne un style à tout çà :
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
Penser a cliquer sur le bouton
une petite astuce afin d'intégrer une ancre pour chaque catégorie de votre fofo .
L'astuce est présente actuellement sur ce forum,on peut visualiser avant chaque catégorie une liste qui représente toutes les catégories.
Dés que vous cliquez sur une entre-elles vous arriver avec un effet de transition à la catégorie voulue .
Pour que l'astuce fonctionne il faudra séparer les catégories sur l'index
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index
Aperçu imagé:
Il faudra donc regarder le script et l'adapter à votre fofo suivant le nombre de catégories
L'astuce est basée sur 8 catégories
Si vous ne comprenez pas le fonctionnement , direction l'entraide
Affichage/Page d'acceuil/Généralités/Message sur la page d'accueil
Collez ceci:
- Code:
<div id="M14_Bloc_ancre" style="display:none;"><a href="#M14_Name_0"></a><a href="#M14_Name_1"></a><a href="#M14_Name_2"></a><a href="#M14_Name_3"></a><a href="#M14_Name_4"></a><a href="#M14_Name_5"></a><a href="#M14_Name_6"></a><a href="#M14_Name_7"></a>
</div>
Pensez a cliquer sur le bouton
On va créer un script :
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur l'index.
Déposer ce script:
- Code:
$(function(){
//ON INSERE UNE DIV AVANT TOUTE LES CATEGORIES
$('.forabg').before('<div class="M14_Cont_Ancre"><span class="M14_Name_All"title="Afficher les catégories masquées"style="display:none;">+</span></div>');
//ON COPIE LE CODE DE LA P.A ET ON L AFFICHE
$('#M14_Bloc_ancre').clone().appendTo('.M14_Cont_Ancre').show();
//ON INSERE LES ANCRES POUR CHAQUE CATEGORIE
$("h2.hierarchy:eq(0)").closest(".forabg").before("<a id='M14_Name_0'></a>");
$("h2.hierarchy:eq(1)").closest(".forabg").before("<a id='M14_Name_1'></a>");
$("h2.hierarchy:eq(2)").closest(".forabg").before("<a id='M14_Name_2'></a>");
$("h2.hierarchy:eq(3)").closest(".forabg").before("<a id='M14_Name_3'></a>");
$("h2.hierarchy:eq(4)").closest(".forabg").before("<a id='M14_Name_4'></a>");
$("h2.hierarchy:eq(5)").closest(".forabg").before("<a id='M14_Name_5'></a>");
$("h2.hierarchy:eq(6)").closest(".forabg").before("<a id='M14_Name_6'></a>");
$("h2.hierarchy:eq(7)").closest(".forabg").before("<a id='M14_Name_7'></a>");
//ON COPIE LES TITRES DES CATEGORIES
$('h2.hierarchy:eq(0) a.forumtitle').clone().appendTo('a[href="#M14_Name_0"]');
$('h2.hierarchy:eq(1) a.forumtitle').clone().appendTo('a[href="#M14_Name_1"]');
$('h2.hierarchy:eq(2) a.forumtitle').clone().appendTo('a[href="#M14_Name_2"]');
$('h2.hierarchy:eq(3) a.forumtitle').clone().appendTo('a[href="#M14_Name_3"]');
$('h2.hierarchy:eq(4) a.forumtitle').clone().appendTo('a[href="#M14_Name_4"]');
$('h2.hierarchy:eq(5) a.forumtitle').clone().appendTo('a[href="#M14_Name_5"]');
$('h2.hierarchy:eq(6) a.forumtitle').clone().appendTo('a[href="#M14_Name_6"]');
$('h2.hierarchy:eq(7) a.forumtitle').clone().appendTo('a[href="#M14_Name_7"]');
});
$(function(){
// ON AFFICHE LE + AU CLIC D UN DES LIENS
$('a[href^="#M14_Name"]').click(function(){
$('.M14_Name_All').show();
//ON ATTRIBUE UNE MARGE POUR LA DERNIER CATEGORIE
$('#page-body').css('marginBottom','200px');
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 1
$('a[href="#M14_Name_0"]').click(function(){
$('a[href="#M14_Name_0"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 2
$('a[href="#M14_Name_1"]').click(function(){
$('a[href="#M14_Name_1"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 3
$('a[href="#M14_Name_2"]').click(function(){
$('a[href="#M14_Name_2"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 4
$('a[href="#M14_Name_3"]').click(function(){
$('a[href="#M14_Name_3"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 5
$('a[href="#M14_Name_4"]').click(function(){
$('a[href="#M14_Name_4"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 6
$('a[href="#M14_Name_5"]').click(function(){
$('a[href="#M14_Name_5"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 7
$('a[href="#M14_Name_6"]').click(function(){
$('a[href="#M14_Name_6"]').fadeOut();
});
// ON CACHE A CHAQUE CLIC LE LIEN DE LA CATEGORIE 8
$('a[href="#M14_Name_7"]').click(function(){
$('a[href="#M14_Name_7"]').fadeOut();
});
//ON REACTIVE TOUT AU CLIC SUR LE +
$('.M14_Name_All').click(function(){
$(this).fadeOut();
$('a[href^="#M14_Name"]').delay(500).fadeIn();
});
});
//ANIMATION SCROLL
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Penser a cliquer sur le bouton
Puis on donne un style à tout çà :
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
- Code:
.M14_Cont_Ancre
{
margin-bottom:20px;
padding:5px;
}
#M14_Bloc_ancre
{width:100%;left:10px;top:0%;margin-top:5px;display:inline;}
#M14_Bloc_ancre a{float:left;margin-left:5px;text-decoration:none !important;}
a#M14_Name_0 , a#M14_Name_1 , a#M14_Name_2 , a#M14_Name_3 ,a#M14_Name_4 ,
a#M14_Name_5 , a#M14_Name_6 ,a#M14_Name_7
{
position:absolute;
margin-top:-60px;
}
/*Le bouton plus */
.M14_Name_All
{
float:right;
cursor:pointer;
}
Penser a cliquer sur le bouton
Hello Mathéo,
normalement oui.
normalement oui.
-Staff du Forum Milouze14-
Pour toute information merci de contacter un Membre du Staff |
Sujets similaires
» [PHPBB3] Avoir un Effet loupe sur chaque message sur la version [PHPBB3]
» [PHPBB2] Afficher une couleur de fond pour chaque catégorie
» [TOUTES VERSIONS] Personnaliser le body pour chaque catégorie
» AwesomeBB: Afficher une couleur de fond pour chaque catégorie
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
» [PHPBB2] Afficher une couleur de fond pour chaque catégorie
» [TOUTES VERSIONS] Personnaliser le body pour chaque catégorie
» AwesomeBB: Afficher une couleur de fond pour chaque catégorie
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum