YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 6:31 | |
| آلسلآم عليكم ورحمة الله .. لقد أعجبتني خاصية في منتدى الدعم الفرنسي وهي اندسال قائمة ازرار المنتدى عند النزول إلى اسفل الصفحة الموجودة في الموقع التالي والاكواد وجدتها لانهم قد قامو بطرح هذه الخاصية في منتدى الدعم الفرنسي في هاذا الموضوع بالاسفل لقد ركبت الكود ولم يجدي اي نفع ربما أخطأت بأمر معين لذا المطلوب ترجمة الموضوع بالرابط بالاعلى وكيفية التركيب الصحيحة وسيكون افضل ان تمت ترجمت الموضوع وتنسيقه و وضعه في التقنيات المتقدمة لتعم الفائدة على الجميع وشكرا لكم مقدما
عدل سابقا من قبل new.moon في السبت 11 يونيو 2016 - 23:52 عدل 2 مرات (السبب : يرجى عدم تغير عنوان الموضوع ليتسنى لغيرك البحث على نفس المشكلة) | |
|
YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 6:55 | |
| وهذه صورة لما أُشير إليه ،، | |
|
{عذب}
عدد المساهمات : 3028 معدل النشاط : 9977 السُمعة : 294
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 7:56 | |
| اهلاً اخي ما نسخة منتداك؟ | |
|
YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 8:23 | |
| | |
|
YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 20:08 | |
| | |
|
وهبة الساحر
عدد المساهمات : 9060 معدل النشاط : 14826 السُمعة : 135
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 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; }
| |
|
YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 11 يونيو 2016 - 20:59 | |
| لقد وضعته من قبل ولاكن لا يوجد أي ثأتير ظاهر على المنتدى | |
|
YasirAyad
عدد المساهمات : 10114 معدل النشاط : 15495 السُمعة : 297
| موضوع: رد: مشكلة اندسال قائمة ازرار المنتدى السبت 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', وهكذا كل نسخه ومتغيرتها الخاصة الموضحة في الكود | |
|
YaSsin MiKa
عدد المساهمات : 16 معدل النشاط : 3628 السُمعة : 0
| موضوع: تم الحل السبت 11 يونيو 2016 - 22:46 | |
| - اقتباس :
@وهبة الساحر :: شكرا لك عمل الكود على منتدى تجريبي يبدو ان المشكلة عندي بالتومبيلات ،، شكرا لك مجددا - اقتباس :
@new.moon :: شكرا لك جدا لقد اوضحت لي كيف اركب الكود لنسخة اخرى عدا الـ phpBB2 واشكرك مرة اخرى . ...
شكرا لكما اخواني الأعزاء على الجهد المبذول تم الحل | |
|