مشكلة اندسال قائمة ازرار المنتدى

4 مشترك

اذهب الى الأسفل

تم الحل مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 6:31

آلسلآم عليكم ورحمة الله ..


لقد أعجبتني خاصية في منتدى الدعم الفرنسي وهي اندسال قائمة ازرار المنتدى عند النزول إلى اسفل الصفحة الموجودة في الموقع التالي


والاكواد وجدتها لانهم قد قامو بطرح هذه الخاصية في منتدى الدعم الفرنسي في هاذا الموضوع بالاسفل 


لقد ركبت الكود ولم يجدي اي نفع ربما أخطأت بأمر معين لذا المطلوب ترجمة الموضوع بالرابط بالاعلى وكيفية التركيب الصحيحة    Like a Star @ heaven


وسيكون افضل ان تمت ترجمت الموضوع وتنسيقه و وضعه في التقنيات المتقدمة لتعم الفائدة على الجميع  Laughing  Cool


وشكرا لكم مقدما  silent


عدل سابقا من قبل new.moon في السبت 11 يونيو 2016 - 23:52 عدل 2 مرات (السبب : يرجى عدم تغير عنوان الموضوع ليتسنى لغيرك البحث على نفس المشكلة)
YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 6:55

وهذه صورة لما أُشير إليه ،،

مشكلة اندسال قائمة ازرار المنتدى Nav_ba11
YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف {عذب} السبت 11 يونيو 2016 - 7:56

اهلاً اخي ما نسخة منتداك؟
{عذب}
{عذب}
 
 

ذكر
عدد المساهمات : 3028
معدل النشاط : 9775
السُمعة : 294

https://3thab.rigala.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 8:23

phpBB2

YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 20:08

UP
YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف وهبة الساحر السبت 11 يونيو 2016 - 20:35

مرحبا,

انت لم تختار اى لون عموما هذا اللون الابيض

ادخل الى الجافا وضع هذا الكود فى جميع الصفحات

الكود:

(function() {
      if (!window.FA) window.FA = {};
      if (FA.Nav) {
        if (window.console && console.warn) console.warn('FA.Nav has already been defined');
        return;
      }
    
      FA.Nav = {
       
        // TARGET NODES POUR CHAQUE VERSION
        // PHPBB2  : ".bodyline > table + table"
        // PHPBB3  : "#page-header .navlinks"
        // PUNBB    : "#pun-navlinks"
        // INVISION : "#submenu"
        targetNode : ".bodyline > table + table",
       
        customNav : '', // custom navlinks
       
        keepDefault : true, // keep the default navlinks
        collapsible : true, // show hide button
       
       
        // offset states
        offsets : {
          tbVisible : {
            bottom : 30,
            top : '30px'
          },
         
          tbHidden : {
            bottom : 0,
            top : '0px'
          },
         
          toggler : '30px'
        },
       
        activeOffset : {}, // active offset for the sticky nav
       
        visible : false, // sticky nav is visible
       
        // check the state of the static nav
        checkState : function() {
          if (!FA.Nav.animating) {
            var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
         
            if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
              FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
              FA.Nav.visible = true;
            } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
              FA.Nav.barSticky.style.top = '-30px';
              FA.Nav.visible = false;
            }
          }
        },
       
        animating : false, // sticky nav is animating
       
        // animate the sticky nav when the toolbar is toggled
        animate : function() {
          if (FA.Nav.visible) {
            FA.Nav.animating = true;
            FA.Nav.barSticky.style.transition = 'none';
         
            $(FA.Nav.barSticky).animate({
              top : FA.Nav.activeOffset.top
            }, function() {
              FA.Nav.barSticky.style.transition = '';
              FA.Nav.animating = false;
              FA.Nav.checkState();
            });
          }
        },
       
        // toggle sticky navigation and remember preference via cookies
        toggle : function() {
          if (FA.Nav.barSticky.style.width == '100%') {
            my_setcookie('fa_sticky_nav', 'hidden');
            FA.Nav.barSticky.style.width = '0%';
          } else {
            my_setcookie('fa_sticky_nav', 'shown');
            FA.Nav.barSticky.style.width = '100%';
          }
          return false;
        }
       
      };
     
      $(function() {
        // set default offsets based on toolbar state
        FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
        if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
       
        // find the static nav
        FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
       
        if (FA.Nav.barStatic) {
          $(function() {
            FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
            if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
            FA.Nav.barSticky.id = 'fa_sticky_nav';
            FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
            FA.Nav.barSticky.style.top = '-30px';
             
            document.body.appendChild(FA.Nav.barSticky); // append the sticky one
             
            // sticky nav toggler
            if (FA.Nav.collapsible) {
              FA.Nav.toggler = document.createElement('A');
              FA.Nav.toggler.id = 'fa_sticky_toggle';
              FA.Nav.toggler.href = '#';
              FA.Nav.toggler.style.top = '-30px';
              FA.Nav.toggler.onclick = FA.Nav.toggle;
             
              document.body.appendChild(FA.Nav.toggler);
            };
           
            window.onscroll = FA.Nav.checkState; // check state on scroll
            FA.Nav.checkState(); // startup check
             
            // animate sticky nav and change offsets when the toolbar is toggled
            $('#fa_hide').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
              FA.Nav.animate();
            });
           
            $('#fa_show').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
              FA.Nav.animate();
            });
          });
        }
      });
    }());


ادخل الى ورقة css وضع هذا الكود وهو بللون الابيض
الكود:
 /* sticky nav main */
    #fa_sticky_nav {
      font-size:0; /* hide whitespace */
      text-align:center;
      background:#FAFAFA;
      border-bottom:1px solid #CCC !important;
      height:30px;
      position:fixed;
      right:0;
      z-index:999;
      overflow:hidden;
      transition:top 200ms linear, width 600ms ease-in-out;
    }
    
    #fa_sticky_nav li { display:inline } /* navlist adjustment */
    
    
    /* sticky menu links */
    #fa_sticky_nav a.mainmenu {
      color:#39C;
      font-size:12px;
      font-weight:bold;
      font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
      background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
      display:inline-block;
      padding:0 10px;
      height:30px;
      line-height:30px;
      transition:200ms;
    }
    
    #fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
      background-position:0 25px;
    }
    
    
    /* sticky nav toggler */
    #fa_sticky_toggle {
      background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
      border:1px solid #CCC;
      border-right:none;
      display:inline-block;
      height:29px;
      width:30px;
      position:fixed;
      right:0;
      z-index:999;
      transition:top 200ms linear;
    }
    
    #fa_sticky_toggle:hover { background-position:-30px 0 }
    
    
    /* make hidden toolbar similar to toggler */
    #fa_toolbar_hidden {
      border-radius:0 !important;
      border:1px solid #CCC;
      border-right:0;
      border-top:0;
    }
    
    
    /* post offset fix */
    .post div[style*="-30px;"] {
      top:-60px !important;
    }

Cool
وهبة الساحر
وهبة الساحر
 
 

ذكر
عدد المساهمات : 9061
معدل النشاط : 14625
السُمعة : 135

https://3arb-way.yoo7.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 20:59

لقد وضعته من قبل ولاكن لا يوجد أي ثأتير ظاهر على المنتدى
YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: مشكلة اندسال قائمة ازرار المنتدى

مُساهمة من طرف YasirAyad السبت 11 يونيو 2016 - 22:36

مرحباً بك عزيزي
تم تعديل الكود ليتناسب مع نسخة 2
تفضل
الكود:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
    
    // TARGET NODES POUR CHAQUE VERSION
    // PHPBB2  : ".bodyline > table + table"
    // PHPBB3  : "#page-header .navlinks"
    // PUNBB    : "#pun-navlinks"
    // INVISION : "#submenu"
    targetNode : ".bodyline > table + table",
    
    customNav : '', // custom navlinks
    
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
    
    
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
      
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
      
      toggler : '30px'
    },
    
    activeOffset : {}, // active offset for the sticky nav
    
    visible : false, // sticky nav is visible
    
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
      
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
    
    animating : false, // sticky nav is animating
    
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
      
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
    
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
    
  };
  
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
    
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
    
    if (FA.Nav.barStatic) {
      $(function() {
        FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
        if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
        FA.Nav.barSticky.id = 'fa_sticky_nav';
        FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
        FA.Nav.barSticky.style.top = '-30px';
          
        document.body.appendChild(FA.Nav.barSticky); // append the sticky one
          
        // sticky nav toggler
        if (FA.Nav.collapsible) {
          FA.Nav.toggler = document.createElement('A');
          FA.Nav.toggler.id = 'fa_sticky_toggle';
          FA.Nav.toggler.href = '#';
          FA.Nav.toggler.style.top = '-30px';
          FA.Nav.toggler.onclick = FA.Nav.toggle;
          
          document.body.appendChild(FA.Nav.toggler);
        };
        
        window.onscroll = FA.Nav.checkState; // check state on scroll
        FA.Nav.checkState(); // startup check
          
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
        
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

كيف تم ذالك ..

في الشرح لقد وضح لك الكود المقتبس التالي من الكود الاصلي
// TARGET NODES BY VERSION
   // PHPBB2  : .bodyline > table + table
   // PHPBB3  : #page-header .navlinks
   // PUNBB    : #pun-navlinks
   // INVISION : #submenu
   targetNode : '.bodyline > table + table',

اللون الاحمر كل نسخة ولها المتغير الخاص بها ومحددهالك انا باللون الاحمر ووضع قبلها // يعني كومنت هذه فقط كتابه لا تأثير في الأسفل اللون الاخضر هو المتغير الخاص بالنسخه الثالثة ولتقوم بتغيرها عليك بنسخ المتغيرات بالاعلى كل نسخه ومتغيرها الخاص 
مثلاً الان محدد التالي
   targetNode : '#page-header .navlinks',
الخاص بالنسخه الثالثة لكي يعمل على النسخة الثانية عليك بتغير الكود اللون الاخضر وليصبح كالتالي
   targetNode : '.bodyline > table + table',
وهكذا كل نسخه ومتغيرتها الخاصة الموضحة في الكود  Wink
YasirAyad
YasirAyad
 
 

ذكر
عدد المساهمات : 10113
معدل النشاط : 15292
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل تم الحل

مُساهمة من طرف YaSsin MiKa السبت 11 يونيو 2016 - 22:46

@وهبة الساحر :: شكرا لك عمل الكود على منتدى تجريبي يبدو ان المشكلة عندي بالتومبيلات ،، شكرا لك مجددا



@new.moon :: شكرا لك جدا لقد اوضحت لي كيف اركب الكود لنسخة اخرى عدا الـ phpBB2 واشكرك مرة اخرى .



...

شكرا لكما اخواني الأعزاء على الجهد المبذول  Cool Cool :تحية مع الشكر:

تم الحل 
YaSsin MiKa
YaSsin MiKa

مشكلة اندسال قائمة ازرار المنتدى 01010

ذكر
عدد المساهمات : 16
معدل النشاط : 3426
السُمعة : 0

https://help.ahlamontada.com/u215682

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى