Charger une page sans remonter tout en haut

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Charger une page sans remonter tout en haut

    Bonjour,

    J'ai créé un menu personnalisé pour les liens de niveau 2 qui n'apparaissent pas dans la navbar principale.
    En haut de page j'ai mon menu, ensuite une image en header, puis un texte d'intro de la section en top-a et enfin des modules perso en top-c qui sont en fait des liens de menu (un bouton avec lien de menu et texte en dessous du bouton dans chaque module qui correspond à un lien de menu de niveau 2) C'est assez lourd à gérer mais je n'ai trouvé que cette solution avec mon template pour afficher ces boutons horizontalement car si je crée un menu qui n'affiche que les niveaux 2, il se met en vertical et je n'ai pas de bouton personnalisés.

    Maintenant je voudrais que lorsque le visiteur clique sur un des boutons, la page charge l'article mais sans remonter en haut de la page car il faut à chaque fois recroller manuellement vers le bas pour voir l'article. Je ne veux pas non plus désactiver mon header et mon top-a pour diminuer ma hauteur de page avant le main content.

    J'avais trouvé une solution mais insatisfaisante car j'ai une ancre dans mon url et je ne veux pas de ça :

    module custom :
    Code:
    <div style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=167#top-c"><span class="ico">p</span></a>
    <h4>menu title</h4>
    </div>
    Ce qui fait qu'au chargement de la page, je vois le menu en top-c et l'article dessous mais mon url contient l'ancre ce qui ne me convient pas.
    Y-a t'il un moyen d'empêcher la page de remonter tout simplement lorsque je clique sur un lien de menu et qu'elle se charge ?

    J'espère que c'est assez clair...

    Merci d'avance

  • #2
    Re : Charger une page sans remonter tout en haut

    Bonjour,

    Désolé, ce n'est pas evident à comprendre sans visuel.

    Quand tu évoque le niveau 2 d'un menu, c'est configuré en menu split ? https://docs.joomla.org/Split_menus/fr

    Si cela peut t'aider : Le chargement en ajax permet d'éviter de recharger toute la page :
    http://extensions.joomla.org/extension/add-fullajax
    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

    Commentaire


    • #3
      Re : Charger une page sans remonter tout en haut

      Effectivement, difficile à voir de quoi tu parles.
      Personnellement, je ne vois pas comment faire sans ancre.

      Sinon pour ton menu qui est vertical, tu peux très facilement le passer en horizontal grâce au CSS. De plus, Joomla permet d'ajouter des images à ton menu, si tu veux en faire des "boutons".

      Commentaire


      • #4
        Re : Charger une page sans remonter tout en haut

        oui désolée c'est un peu compliqué sans visuel... le site est en local pour l'instant.

        Le template que j'utilise a été acheté, je sais que je peux modifier des choses avec le css mais de toutes façons ça ne changerait pas grand chose car j'ai testé avec un module de type menu de toutes façons quand on clique sur un lien de menu, la page au chargement revient automatiquement en haut. En gros, il faudrait que ça donne l'impression que seul le main content se charge même si effectivement ce n'est pas le cas puisque joomla recharge tous les modules et autres contenus en même temps. J'aimerais que la page ne remonte pas tout en haut au chargement pour éviter au visiteur de sans arrêt devoir scroller vers le bas, il n'a pas forcément envie de revoir l'image et le texte d'intro à chaque fois.

        En fait mon menu :
        lvl1/ accueil
        lvl1/ société
        lvl2/ présentation
        lvl2/ nos offres d'emploi
        lvl2/ nous trouver
        lvl2/ partenaires
        lvl1/ produits
        lvl2/ solution 1
        lvl3/ module1
        lvl3/ module2
        ...
        lvl2/ solution 2
        ...
        ...

        ma barre de navigation principale tout en haut (qui reste en haut quand on scrolle la page) ne fait apparaitre que les lvl1
        quand je clique sur société par exemple, la page charge la navbar + une photo + un texte d'intro + menu lvl2

        Résultat le main content est invisible, il faut scroller pour le lire. Le visiteur scrolle donc vers le bas et s'il veut ensuite voir nos offres d'emploi il clique sur le lien de menu lvl2 et là la page remonte tout en haut il faut à nouveau scroller vers le bas pour voir ne serait-ce que les premières lignes de l'article. J'aimerais qu'au clic sur le bouton "nos offres d'emploi" la page ne bouge pas de position, nos yeux voient toujours le haut de l'article si nous étions positionnés comme ça.

        Ci-joint l'image de la partie haute de ma page qui apparait à l'écran, on ne voit pas du tout l'article en-dessous du menu de niveau2.
        Logiquement on va scroller pour lire la suite et on va peut-être cliquer sur un autre icone pour voir les partenaires par exemple, mais dans ce cas la page va retourner tout en haut comme sur l'image et nous oblige à nouveau à scroller vers le bas pour lire l'article.

        Commentaire


        • #5
          Re : Charger une page sans remonter tout en haut

          Merci pour le retour,

          J'ai donc personnalisé en css mon menu hier pour faire justement en menu split, ce qui n'était pas le cas lorsque j'ai envoyé mon message hier.
          Je vais installer le plug-in fullajax donc et reviendrai dire si ça correspond à ce que je cherchais

          Commentaire


          • #6
            Re : Charger une page sans remonter tout en haut

            Bon, alors soit je n'ai rien compris au plug-in, soit ce n'est pas ce que je cherchais, mais ça ne fonctionne pas, la page revient en haut quand même. :/

            Commentaire


            • #7
              Re : Charger une page sans remonter tout en haut

              Ta photo n'est pas affichable. Tu dois mettre ton éditeur en mode avancé.

              Ensuite, avec ce que je comprend, c'est qu'il te faudrait mettre tes menus dans le même module qui affiche le contenu... Parce que tes menu font des liens vers les pages... C'est le protocole internet qui veut ça. Donc il te faudrait changer de méthode.

              Quand à l'Ajax, je pense qu'une fois que tu as activé ton plugin, il faut quand même ta page pour qu'elle se serve de l'Ajax comme tu le souhaite (mais je ne suis pas très doué en Ajax).

              J'attend de voir ton image.

              Commentaire


              • #8
                Re : Charger une page sans remonter tout en haut

                Voici l'image dans un 1er temps. (sachant que la méthode d'insertion en mode avancé est la même je ne suis pas sûre que ça fonctionne mieux...)
                Pour le menu, je ne peux pas le mettre en position #main-content je vais tester avec la position main-top qui se trouve dans la même div que le main-content il me semble (je vérifierai avant...)
                Cliquez sur l'image pour l'afficher en taille normale

Nom : screenshot-localhost 2016-09-01 15-56-27.jpg 
Affichages : 1 
Taille : 22,7 Ko 
ID : 1805768

                Commentaire


                • #9
                  Re : Charger une page sans remonter tout en haut

                  j'ai trouvé un script à force de chercher sur le net pour faire un scroll en absolu mais je me demande où je dois mettre ce script en fait... Une idée ?

                  Code:
                  <SCRIPT language=javascript>
                     function Scroller() {
                         window.scrollTo(0,200);
                     }
                     setTimeout("Scroller()", 500);
                  </SCRIPT>

                  Commentaire


                  • #10
                    Re : Charger une page sans remonter tout en haut

                    Niquel pour l'image. Le site semble propre, bravo.

                    Je ne disais pas que le menu devait être dans le même div. Je proposais en fait un module qui gère tout de lui même.

                    Sinon tu peux utiliser des frames (mais c'est pas bien).

                    Si la solution du scroll automatique te convient, c'est une solution, je pense que tu dois mettre ce script dans ton body, pour qu'il soit exécuté lors du chargement de la page, comme décrit ici : http://www.w3schools.com/jsref/tryit...f_win_scrollto

                    Mais le résultat sera que tu rechargeras les pages en entier.

                    Commentaire


                    • #11
                      Re : Charger une page sans remonter tout en haut

                      Bonjour,

                      mais je me demande où je dois mettre ce script en fait... Une idée ?
                      Il faut le mettre dans un module qui sera chargé uniquement sur les pages concernées.
                      Regarde mon module custom qui remplit ces 2 rôles : http://lomart.fr/extensions/lm-custom
                      UP, le plugin universel à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Re : Charger une page sans remonter tout en haut

                        Ah merci Christophe31 pour le lien! Je vais tester ça lundi, je pense que ça va me convenir, il faut juste que je trouve comment ajouter le Onclick uniquement sur mes icônes de menu personnalisé en css donc pas encore gagné lol et le script sur mon template ça c'est ok par contre.
                        Dernière édition par linceb à 02/09/2016, 14h22

                        Commentaire


                        • #13
                          Re : Charger une page sans remonter tout en haut

                          Merci, je teste la solution proposée par Christophe31 et si je n'y arrive je testerai celle-là

                          Envoyé par lomart Voir le message
                          Bonjour,



                          Il faut le mettre dans un module qui sera chargé uniquement sur les pages concernées.
                          Regarde mon module custom qui remplit ces 2 rôles : http://lomart.fr/extensions/lm-custom

                          Commentaire


                          • #14
                            Re : Charger une page sans remonter tout en haut

                            Tu peux changer ton onclick() par un onload. Ainsi, à chaque chargement de page le script sera appelé :
                            http://www.startyourdev.com/html/evenement-html-onload

                            Ce que propose Iomart, est complémentaire à ma solution. Si ma solution fonctionne, alors en effet, tu devra mettre ton JS dans un module, qui ne sera appelé que par les pages concernées. Si tu ne fais pas ça, tu auras un décalage systématique sur toutes les pages de ton site...

                            Commentaire

                            Annonce

                            Réduire
                            1 sur 2 < >

                            C'est [Réglé] et on n'en parle plus ?

                            A quoi ça sert ?
                            La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                            Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                            Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                            Comment ajouter la mention [Réglé] à votre discussion ?
                            1 - Aller sur votre discussion et éditer votre premier message :


                            2 - Cliquer sur la liste déroulante Préfixe.

                            3 - Choisir le préfixe [Réglé].


                            4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                            2 sur 2 < >

                            Assistance au forum - Outil de publication d'infos de votre site

                            Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                            Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                            Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                            UTILISER À VOS PROPRES RISQUES :
                            L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                            Problèmes connus :
                            FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                            Installation :

                            1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                            Archive zip : https://github.com/AFUJ/FPA/zipball/master

                            2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                            3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                            4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                            5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                            6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                            et remplacer www. votresite .com par votre nom de domaine


                            Exemples:
                            Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/
                            Pour executer le script: http://www..com/fpa-fr.php

                            Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/cms/
                            Pour executer le script: http://www..com/cms/fpa-fr.php

                            En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                            Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                            Voir plus
                            Voir moins

                            Partenaire de l'association

                            Réduire

                            Hébergeur Web PlanetHoster
                            Travaille ...
                            X