T3 framework et affix menu

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

  • [RÉGLÉ] T3 framework et affix menu

    hello
    j'utilise le framework t3 et je voudrais utiliser la fonction affix de bootsrap ...
    le tout en essayant de ne pas hacker le template pour garder la compatibilité des updates
    qu'un pourrais m'aider ?
    Merci d'avance
    Dernière édition par y.berges à 13/08/2013, 18h42
    Société : http://www.com3elles.com
    Bénévole : http://www.flexicontent.org

  • #2
    Re : T3 framework et affix menu

    Salut,
    il y a déjà eu une grosse discussion sur affix :
    [RÉGLÉ] Utilisation d'Affix et design tout en hauteur ? - Page 2


    la réponse 18 de Lomart te donnera peut-être un début de piste.
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Re : T3 framework et affix menu

      ok merci
      Société : http://www.com3elles.com
      Bénévole : http://www.flexicontent.org

      Commentaire


      • #4
        Re : T3 framework et affix menu

        hello alors je viens de faire un test
        Code:
        <div data-offset-top="0" data-spy="affix">
              <div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>">
              <?php if ($this->getParam('navigation_type') == 'megamenu') : ?>
                <?php $this->megamenu($this->getParam('mm_type', 'mainmenu')) ?>
              <?php else : ?>
                <jdoc:include type="modules" name="<?php $this->_p('mainnav') ?>" style="raw" />
              <?php endif ?>
              </div>
            </div>
          </div>
        a voir sur ce site
        Oups ! Cette page n'existe pas... Nous n'avons pas de page à l'adresse que vous avez demandée, désolé!Vous pouvez utiliser les menus pour naviguer vers d'autres...

        le soucis c'est que que le menu est bien fixe je voudrais qu'il le soit en haut de la page .. des idées ?
        Merci
        Société : http://www.com3elles.com
        Bénévole : http://www.flexicontent.org

        Commentaire


        • #5
          Re : T3 framework et affix menu

          Salut,
          pas simple comme question.
          Affix est géré à la fois par les sélecteurs CSS:
          * .affix, .affix-top et .affix-bottom
          * ainsi que leur "container"
          * et du JS.

          Je te conseillerai de regarder les solutions proposées ici :


          NB : encore moins simple, la doc de getbootstrap.com s'applique à bootstrap v3, nous utilisons encore la v2.3.2, donc il faut regarder ici :

          plus précisément ici pour affix :


          Si tu ne t'en sors pas, tu peux toujours coller le menu en haut de ta fenêtre, au dessus du slider.
          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

          Commentaire


          • #6
            Re : T3 framework et affix menu

            cest quand même bizarre le peu de doc...
            Société : http://www.com3elles.com
            Bénévole : http://www.flexicontent.org

            Commentaire


            • #7
              Re : T3 framework et affix menu

              cest quand même bizarre le peu de doc...
              Tout à fait.

              C'est pourquoi ce genre d'initiative est précieuse:
              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

              Commentaire


              • #8
                Re : T3 framework et affix menu

                oki
                ce que je ne comprpas c'est que dans la doc il parle de la faire avec et sans javascript ...
                Société : http://www.com3elles.com
                Bénévole : http://www.flexicontent.org

                Commentaire


                • #9
                  Re : T3 framework et affix menu

                  OK, j'ai pigé.
                  * tu vires le JS que tu as collé avant </body> (vu, lol) qui te génère une erreur

                  * il serait préférable de coller ceci dans un des fichiers JS de T3, comme menu.js, tout à la fin
                  plugin/ststem/t3/base/js/menu.js

                  Code PHP:
                  ///      
                        
                  (function($) {
                        
                     $(
                  document).ready(function(){
                     

                        $(
                  '.t3-mainnav').affix({
                          
                  offset: {
                            
                  top30
                        
                  }
                        

                  });
                  });
                  }(
                  jQuery)); 

                  tu peux jouer avec top:30 ou top:10, etc ....

                  tu testes avec ces CSS
                  .affix{top:0px; background: purple}
                  .affix-top{top:10px; background: green}

                  je t'ai mis des couleurs, pour que tu voies ce qu'il se passe et tu corriges ce qui cloche via les CSS
                  Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    Re : T3 framework et affix menu

                    j'ai essayer ton code mais je suis pas sur de moi ...
                    j'ai donc nettoyer mes essais enlever le js ... etc
                    voici le code dans menu.js
                    Code:
                    /** 
                     *------------------------------------------------------------------------------
                     * @package       T3 Framework for Joomla!
                     *------------------------------------------------------------------------------
                     * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
                     * @license       GNU General Public License version 2 or later; see LICENSE.txt
                     * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
                     *                & Google group to become co-author)
                     * @Google group: https://groups.google.com/forum/#!forum/t3fw
                     * @Link:         http://t3-framework.org 
                     *------------------------------------------------------------------------------
                     */
                    
                    !function($){
                    	var isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);
                    
                    	if(!isTouch){
                    		$(document).ready(function($){
                    			// detect animation duration
                    			var mm_duration = 0;
                    			$('.t3-megamenu').each (function(){
                    				if ($(this).data('duration')) mm_duration = $(this).data('duration');
                    			});
                    			if (mm_duration) {
                    				var style = '.t3-megamenu.animate .mega > .mega-dropdown-menu, .t3-megamenu.animate.slide .mega > .mega-dropdown-menu > div {';
                    				style += 'transition-duration: ' + mm_duration + 'ms;';
                    				style += '-webkit-transition-duration: ' + mm_duration + 'ms;';
                    				style += '-ms-transition-duration: ' + mm_duration + 'ms;';
                    				style += '-o-transition-duration: ' + mm_duration + 'ms;';
                    				style += '}';
                    				$('<style type="text/css">'+style+'</style>').appendTo ('head');
                    			}
                    
                    			var mm_timeout = mm_duration ? 100 + mm_duration : 500;
                    
                    			$('.nav > li, li.mega').hover(function(event) {
                    				var $this = $(this);
                    				if ($this.hasClass ('mega')) {
                    					// add class animate
                    					$this.addClass ('animating');
                    					clearTimeout ($this.data('animatingTimeout'));
                    					$this.data('animatingTimeout', 
                    						setTimeout(function(){$this.removeClass ('animating')}, mm_timeout));
                    
                    					clearTimeout ($this.data('hoverTimeout'));
                    					$this.data('hoverTimeout', 
                    						setTimeout(function(){$this.addClass ('open')}, 100));
                    				} else {
                    					clearTimeout ($this.data('hoverTimeout'));
                    					$this.data('hoverTimeout', 
                    						setTimeout(function(){$this.addClass ('open')}, 100));
                    				}
                    			},
                    			function(event) {
                    				var $this = $(this);
                    				if ($this.hasClass ('mega')) {
                    					$this.addClass ('animating');
                    					clearTimeout ($this.data('animatingTimeout'));
                    					$this.data('animatingTimeout', 
                    						setTimeout(function(){$this.removeClass ('animating')}, mm_timeout));
                    					clearTimeout ($this.data('hoverTimeout'));
                    					$this.data('hoverTimeout', 
                    						setTimeout(function(){$this.removeClass ('open')}, 100));
                    				} else {
                    					clearTimeout ($this.data('hoverTimeout'));
                    					$this.data('hoverTimeout', 
                    						setTimeout(function(){$this.removeClass ('open')}, 100));
                    				}
                    			});
                    		});
                    
                    	}
                    	(function($) {
                          
                       $(document).ready(function(){
                       
                    
                          $('.t3-mainnav').affix({
                            offset: {
                              top: 30
                          }
                          
                    
                    }); 
                    }(jQuery);
                    et le code dans le custom.css
                    Code:
                    /* fond header */
                    .background {
                      background: url("../images/banniere.jpg") repeat-x;
                      margin-top: -36px;
                    }
                    .t3-header {
                      padding-bottom: 0px !important;
                      padding-top: 0px !important;
                    }
                    /* clean menu */
                    .t3-mainnav {
                      background-color: transparent !important;
                      background-image: none !important;
                      background-repeat: repeat-x;
                      border-bottom: 0px solid #CCCCCC !important;
                      border-top: 0px solid #E6E6E6 !important;
                    }
                    .t3-mainnav .navbar .nav > li > a {
                      border-right: 0px solid #D9D9D9 !important;
                      border-top: 0 none;
                      padding: 10px 20px;
                      text-shadow: none;
                    }
                    .affix{top:0px; background: purple}
                    .affix-top{top:10px; background: green}
                    /* logo */
                    .logo-image a {
                      background-repeat: no-repeat;
                      height: 200px !important;
                      width: 651px !important;
                    }
                    .head-search {
                      float: right;
                      margin-top: 80px !important;
                    }
                    Merci de ton aide
                    Société : http://www.com3elles.com
                    Bénévole : http://www.flexicontent.org

                    Commentaire


                    • #11
                      Re : T3 framework et affix menu

                      Salut,
                      hmmm, je suis un peu sceptique sur ta propal d'inclusion du code JS dans menu.js
                      Je pense que tu ferais mieux de créer un nouveau fichier js via les méthodes t3,
                      et tu y inclus le code que j'ai conçu pour fonctionner dans la head et conflict-free.
                      Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                      Commentaire


                      • #12
                        Re : T3 framework et affix menu

                        désoler tu peus etre plus explicite
                        1 je creai un fichier js que je charge par l inclusion dans l administration du t3 avec ton code
                        2 je rajoute le css dans le custom.css
                        cest bien ca ?
                        Société : http://www.com3elles.com
                        Bénévole : http://www.flexicontent.org

                        Commentaire


                        • #13
                          Re : T3 framework et affix menu

                          Excuse.
                          Je bosse avec 4 frameworks en même temps (gantry, warp, gavick et T3) et parfois j'ai un peu de mal à recadrer qui fait quoi et comment (lol).
                          Surtout joomlart avec leurs versions t3v2, t3v3 et t3, assez pénible.
                          Bref.

                          Bon, partant du principe que tu utilises bien la dernière version t3,
                          dans :
                          /templates/ton_template_t3/tpls/blocks/head.php
                          ±ligne 26
                          Code PHP:
                          <?php 
                          // CUSTOM CSS
                          if(is_file(T3_TEMPLATE_PATH '/css/custom.css')) {
                              
                          $this->addStyleSheet(T3_TEMPLATE_URL.'/css/custom.css'); 
                          }
                          // ligne à rajouter
                          $this->addScript (T3_TEMPLATE_URL.'/js/monscript.js');
                          ?>
                          après avoir créé un fichier monscript.js (localisé dans le dossier "js" du template) avec le script JS pour affix.

                          Là, c'est clean -> Un script js affecté à un effet en front-end et localisé dans le dossier du template et non pas dans le dossier du plugin t3, où il n'aurait pas sa place.
                          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                          Commentaire


                          • #14
                            Re : T3 framework et affix menu

                            cool merci encore je vais tester ..
                            cest bon a savoir ... que tu bosses sur autant de frame... ton avis ton préférer. .. ca m'intéresse
                            a plus
                            Société : http://www.com3elles.com
                            Bénévole : http://www.flexicontent.org

                            Commentaire


                            • #15
                              Re : T3 framework et affix menu

                              hello
                              alors on est pas loin du tout !
                              la maintenant ca marche mais tout mes css deviennent voireux ...
                              voici le js que je charge ..
                              Code:
                              ///      
                                    (function($) {
                                    
                                 $(document).ready(function(){
                                    $('.t3-mainnav').affix({
                                      offset: {
                                        top: 30
                                    }
                              });
                              });
                              }(jQuery));
                              c'est quoi le soucis a ton avis ?
                              Merci
                              Société : http://www.com3elles.com
                              Bénévole : http://www.flexicontent.org

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X