Connexion

Récupérer mon mot de passe

Derniers sujets
» [PhpBB2] La version web ne s'affiche pas sur "mon" IPAD.
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 21 Juil 2019 - 15:01 par photoclic

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 21 Juil 2019 - 6:07 par Milouze14

» [Toutes versions]Remplacer les icônes de l'éditeur par des icônes FontAwesome
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Sam 20 Juil 2019 - 11:23 par Morane

» histoire du Jour sans fin
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Sam 20 Juil 2019 - 7:29 par Quad Daniel

» *RESOLU*[PhpBB2] Chargement de mon forum
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mer 17 Juil 2019 - 19:51 par Milouze14

» *RESOLU*[PhpBB2] Un encodage pour stoper l'autoplay pour mon IFRAM vidéo
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 16 Juil 2019 - 18:58 par Milouze14

» [Blague] Le patient et le psychiatre
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 16 Juil 2019 - 7:43 par Quad Daniel

» Élémentaire mon cher Watson !
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Lun 15 Juil 2019 - 9:04 par soleda

» [AwesomeBB]Activer le lien du Pseudo sur l'index dans les derniers messages
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 14 Juil 2019 - 8:01 par Milouze14

» Fille ou garçon "blagounette"
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 9 Juil 2019 - 8:09 par Quad Daniel

» Règlement de l'entraide Forumactif
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Ven 5 Juil 2019 - 19:29 par Rabolliot

» [AwesomeBB] Rendre l'image du header cliquable
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 2 Juil 2019 - 19:12 par Milouze14

» [ModernBB] Rendre l'image du header cliquable
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 2 Juil 2019 - 19:07 par Splash

» [PhpBB2]Afficher le profil à droite
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mar 2 Juil 2019 - 9:28 par Morane

» les Histoires Belge
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 30 Juin 2019 - 10:50 par Milouze14

» *RESOLU*[PhpBB2] .postbody / texte qui sort du cadre
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 30 Juin 2019 - 10:48 par Milouze14

» Histoire de Blondes Sans Fin
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Dim 30 Juin 2019 - 8:38 par Quad Daniel

» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Jeu 27 Juin 2019 - 15:50 par Milouze14

» Socrate et la maïeutique "histoire"
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Mer 26 Juin 2019 - 7:34 par Quad Daniel

» Coca-Cola (histoire)
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Clock-10Lun 24 Juin 2019 - 9:33 par bildil62

[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll

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

Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 8 Mai 2015 - 7:33

coucou ,

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 hinhin .

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é:

[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll 0148


Il faudra donc regarder le script et l'adapter à votre fofo suivant le nombre de catégories


-Astuce des Forums Milouze14&Compagnie-





  • Astuce postée par:
    Réponse automatique:

    Merci de cliquer ici pour voir le message

Pour toute information,merci de contacter un Membre du Staff
[PHPBB3] Déposer une ancre pour chaque catégorie avec effet scroll Staff10

L'astuce est basée sur 8 catégories

Si vous ne comprenez pas le fonctionnement , direction l'entraide  hinhin


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  Enregistr

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;
      }
    }
  });
});
Pensez a cliquer sur le bouton  Valid

Puis on donne un style à tout çà  hinhin :

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


Pensez à valider les modifications en cliquant sur le bouton  Valid






Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide clin oeil
https://www.milouze14.com/f108-entraide-tous-supports


Dernière édition par Milouze14 le Dim 7 Oct 2018 - 17:53, édité 2 fois
mariok
mariok
Membre regretté

Messagemariok le Mer 14 Oct 2015 - 9:27

Merci beaucoup !
Gae
Gae
Milouzien

MessageGae le Ven 2 Sep 2016 - 18:45

Merci beaucoup !
SuperSpaceCab
SuperSpaceCab
Milouzien

MessageSuperSpaceCab le Mer 26 Oct 2016 - 6:56

Merci pour l'astuce
photoclic
photoclic
Milouzien

Messagephotoclic le Mer 26 Oct 2016 - 12:19

Merci beaucoup !
50Thierry
50Thierry
Milouzien

Message50Thierry le Dim 27 Nov 2016 - 4:12

Merci beaucoup !
Tawny
Tawny
Milouzien

MessageTawny le Dim 16 Avr 2017 - 12:02

Merci beaucoup !
petit coq
petit coq
Milouzien

Messagepetit coq le Jeu 25 Mai 2017 - 15:17

bjr, ca marche avec edge ?
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 25 Mai 2017 - 15:23

Hello Mathéo,
normalement oui.

-Staff du Forum Milouze14-


Pour toute information merci de contacter un Membre du Staff
petit coq
petit coq
Milouzien

Messagepetit coq le Jeu 25 Mai 2017 - 15:27

dac merci ;)
One.
One.
Milouzien

MessageOne. le Ven 30 Juin 2017 - 23:00

Merci beaucoup !
masterforumbr
masterforumbr
Milouzien

Messagemasterforumbr le Mar 10 Oct 2017 - 23:34

Merci beaucoup !
kristhyane
kristhyane
Milouzien

Messagekristhyane le Jeu 21 Déc 2017 - 13:58

Merci beaucoup !
hamesashek
hamesashek
Milouzien

Messagehamesashek le Ven 12 Oct 2018 - 15:22

Merci beaucoup !

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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