كود تثبيت الناف أعلى المتصفح

+2
Michael_vx
keko_ferkeko
6 مشترك

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الثلاثاء 5 يوليو 2016 - 21:07

تذكير بمساهمة فاتح الموضوع :

بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته


أبحث عن كود تثبيت عارضة المنتدى (ناف بار) في أعلى المتصفحة عند التحرك لأسفل الصفحة.
نسخة المنتدى PHPBB3



خالص التحية؛
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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


كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الخميس 7 يوليو 2016 - 23:18

عظيم :)
أشكرك شكراً جزيلاً
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx الخميس 7 يوليو 2016 - 23:24

هل حلت المشكلة ؟
avatar
Michael_vx
 
 

ذكر
عدد المساهمات : 1066
معدل النشاط : 7996
السُمعة : 69

https://www.vxblog.eu

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الخميس 7 يوليو 2016 - 23:25

في بس مشكلة صغيرة هي عدم التقاء زرار اخفاء البار مع البار نفسه في بعض الأحيان كما في الصورة هنا

كود تثبيت الناف أعلى المتصفح - صفحة 2 Vhglyb
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx الخميس 7 يوليو 2016 - 23:26

هذا لانه الشريط لا يجب ان يكون موجود الا اذا نزلت بالصفحه بعد الناف بار الاصلى
واضح انه لم يتم تعديل الكود بشكل صحيح
avatar
Michael_vx
 
 

ذكر
عدد المساهمات : 1066
معدل النشاط : 7996
السُمعة : 69

https://www.vxblog.eu

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE الخميس 7 يوليو 2016 - 23:29

Michael_vx كتب:هذا لانه الشريط لا يجب ان يكون موجود الا اذا نزلت بالصفحه بعد الناف بار الاصلى
واضح انه لم يتم تعديل الكود بشكل صحيح
لا يا عزيزي ، انقطاع النت فقط هوالذي شغلني عن اكماله وما زال التعديل جاري حتى يكون سليم 100%

على كلِ اكتملت منه بنسة 90% بقيت لمسات خفيفة
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 567
معدل النشاط : 7085
السُمعة : 60

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الخميس 7 يوليو 2016 - 23:30

الرفاق الأعزاء Michael_vx و SaLEm Hen!CHE:
أود أن أتقدم لكم بجزيل الشكر و الامتنان على اهتمامكم و مساعدتكم لي.
لكم أرق تحياتي و تقديري؛
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx الخميس 7 يوليو 2016 - 23:33

الشكر لله اخى انا قمت بواجبى فقط
واتمنى الحظ الطيب للمساعد فى اتمام اللمسات الاخيره على الكود
لك جزيل الشكر على المساعدة الرائعة
avatar
Michael_vx
 
 

ذكر
عدد المساهمات : 1066
معدل النشاط : 7996
السُمعة : 69

https://www.vxblog.eu

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الخميس 7 يوليو 2016 - 23:51

Michael_vx كتب:الشكر لله اخى انا قمت بواجبى فقط
واتمنى الحظ الطيب للمساعد فى اتمام اللمسات الاخيره على الكود
لك جزيل الشكر على المساعدة الرائعة

لاحظت أن رابط موقعك الموجود في بياناتك الشخصية لا يعمل.. فما هو موقعك؟
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE الجمعة 8 يوليو 2016 - 0:06

مرحباً من جديد ، تم بحمد الله التعديل على الكود وبدون اي اخطاء والكود يعمل الان كما أردت أخي @keko_ferkeko

لعموم الفائدة :
كود الجافا :
الكود:

(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 BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '110px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'

      },
    
      toggler : '0px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : true, // 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.barSticky.style.position = 'fixed';
FA.Nav.toggler.style.position = 'fixed';
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '110px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '110px';
            FA.Nav.barSticky.style.position = 'absolute';
FA.Nav.toggler.style.position = 'absolute';
          FA.Nav.barSticky.style.top = '110px';
                  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) {
      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 = '0px';
        
      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 = '0px';
        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
    
      // toolbar modifications
      $(function() {
        // 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: 0ms 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: 0ms;
}

#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:0ms 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;
}

ul.navlinks {
    font-size: 0;
}


عدل سابقا من قبل SaLEm Hen!CHE في الجمعة 8 يوليو 2016 - 20:20 عدل 1 مرات
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 567
معدل النشاط : 7085
السُمعة : 60

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

كود تثبيت الناف أعلى المتصفح - صفحة 2 Empty رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko الجمعة 8 يوليو 2016 - 0:51

أعجز عن شكرك..
جزاك الله كل خير.
تمنياتي لك بالتوفيق و النجاح؛
keko_ferkeko
keko_ferkeko
 
 

ذكر
عدد المساهمات : 586
معدل النشاط : 6442
السُمعة : 1

http://nf-son.forumotion.com

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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

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

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