3/14/2018

settings_overscan print announcement
أهلا أصدقائي .. في هذا البرنامج  التعليمي سنكتشف سكريبت Sticky Sidebar الإصدار  v1.7.0   والذي يعمل على صمغ أو تثبيت القوائم الجانبية لموقعك على الويب (أو أي عمود رأسي لهذه المسألة) ، مما يجعلها مرئية بشكل دائم عند التمرير للأعلى أوللأسفل. فمن المفيد جدا عندما يكون الشريط الجانبي طويلاً جدًا أو قصيرًا جدًا مقارنة ببقية المحتوى إستعمال هذه الميزة . كما أن السكريبت يعمل مع أي تصميم تقريبًا ويدعم العديد من الأشرطة الجانبية .. وهو متوفر أيضًا كمكون WordPress الذي يأتي مع لوحة الاستخدام.. أضف أنه داعم للمتصفحات و الذي أبهرني في هذا السكريبت دقته الذكية أو خوارزمية حساب الأبعاد لكل موضع يتم تفعيل عليه الخاصية وهذا إنعكس بإحترافية على التجاوب مع شاشات العرض الذكية وتكون النتيجة إفتراضية أي وكأنه غير موجود .. أضف أنك تستطيع تفعيل ميزة Sticky Sidebar على أكثر من قائمة خصوصا للقوالب التي صممت بقائمتين .. إذا فالنبدأ بالشرح.






support / jquery.nicescroll 3.5.4

  • 6+IE
  • 5+Chrome
  • 4+Firefox
  • 4+Safari
  • 10+Opera
  • all Browser
  • 2.2+android
  • all touch

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية [وضع الأكواد]

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
        <script type='text/javascript'>
           /*<![CDATA[*/
    !function(i){i.fn.theiaStickySidebar=function(t){var e,o,a,s,n,d;function r(t,e){return!0===t.initialized||!(i("body").width()<t.minWidth)&&(function(t,e){t.initialized=!0,0===i("#theia-sticky-sidebar-stylesheet-"+t.namespace).length&&i("head").append(i('<style id="theia-sticky-sidebar-stylesheet-'+t.namespace+'">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));e.each(function(){var e={};if(e.sidebar=i(this),e.options=t||{},e.container=i(e.options.containerSelector),0==e.container.length&&(e.container=e.sidebar.parent()),e.sidebar.parents().css("-webkit-transform","none"),e.sidebar.css({position:e.options.defaultPosition,overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),e.stickySidebar=e.sidebar.find(".theiaStickySidebar"),0==e.stickySidebar.length){var o=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;e.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(o)}).remove(),e.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(e.sidebar.children()),e.sidebar.append(e.stickySidebar)}e.marginBottom=parseInt(e.sidebar.css("margin-bottom")),e.paddingTop=parseInt(e.sidebar.css("padding-top")),e.paddingBottom=parseInt(e.sidebar.css("padding-bottom"));var a,s,n,d=e.stickySidebar.offset().top,r=e.stickySidebar.outerHeight();function p(){e.fixedScrollTop=0,e.sidebar.css({"min-height":"1px"}),e.stickySidebar.css({position:"static",width:"",transform:"none"})}e.stickySidebar.css("padding-top",1),e.stickySidebar.css("padding-bottom",1),d-=e.stickySidebar.offset().top,r=e.stickySidebar.outerHeight()-r-d,0==d?(e.stickySidebar.css("padding-top",0),e.stickySidebarPaddingTop=0):e.stickySidebarPaddingTop=1,0==r?(e.stickySidebar.css("padding-bottom",0),e.stickySidebarPaddingBottom=0):e.stickySidebarPaddingBottom=1,e.previousScrollTop=null,e.fixedScrollTop=0,p(),e.onScroll=function(e){if(e.stickySidebar.is(":visible"))if(i("body").width()<e.options.minWidth)p();else{if(e.options.disableOnResponsiveLayouts){var o=e.sidebar.outerWidth("none"==e.sidebar.css("float"));if(o+50>e.container.width())return void p()}var a,s,n=i(document).scrollTop(),d="static";if(n>=e.sidebar.offset().top+(e.paddingTop-e.options.additionalMarginTop)){var r,b=e.paddingTop+t.additionalMarginTop,l=e.paddingBottom+e.marginBottom+t.additionalMarginBottom,h=e.sidebar.offset().top,f=e.sidebar.offset().top+(a=e.container,s=a.height(),a.children().each(function(){s=Math.max(s,i(this).height())}),s),g=0+t.additionalMarginTop,S=e.stickySidebar.outerHeight()+b+l<i(window).height();r=S?g+e.stickySidebar.outerHeight():i(window).height()-e.marginBottom-e.paddingBottom-t.additionalMarginBottom;var m=h-n+e.paddingTop,y=f-n-e.paddingBottom-e.marginBottom,u=e.stickySidebar.offset().top-n,k=e.previousScrollTop-n;"fixed"==e.stickySidebar.css("position")&&"modern"==e.options.sidebarBehavior&&(u+=k),"stick-to-top"==e.options.sidebarBehavior&&(u=t.additionalMarginTop),"stick-to-bottom"==e.options.sidebarBehavior&&(u=r-e.stickySidebar.outerHeight()),u=k>0?Math.min(u,g):Math.max(u,r-e.stickySidebar.outerHeight()),u=Math.max(u,m),u=Math.min(u,y-e.stickySidebar.outerHeight());var v=e.container.height()==e.stickySidebar.outerHeight();d=(v||u!=g)&&(v||u!=r-e.stickySidebar.outerHeight())?n+u-e.sidebar.offset().top-e.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d){var x=i(document).scrollLeft();e.stickySidebar.css({position:"fixed",width:c(e.stickySidebar)+"px",transform:"translateY("+u+"px)",left:e.sidebar.offset().left+parseInt(e.sidebar.css("padding-left"))-x+"px",top:"0px"})}else if("absolute"==d){var T={};"absolute"!=e.stickySidebar.css("position")&&(T.position="absolute",T.transform="translateY("+(n+u-e.sidebar.offset().top-e.stickySidebarPaddingTop-e.stickySidebarPaddingBottom)+"px)",T.top="0px"),T.width=c(e.stickySidebar)+"px",T.left="",e.stickySidebar.css(T)}else"static"==d&&p();"static"!=d&&1==e.options.updateSidebarHeight&&e.sidebar.css({"min-height":e.stickySidebar.outerHeight()+e.stickySidebar.offset().top-e.sidebar.offset().top+e.paddingBottom}),e.previousScrollTop=n}},e.onScroll(e),i(document).on("scroll."+e.options.namespace,(a=e,function(){a.onScroll(a)})),i(window).on("resize."+e.options.namespace,(s=e,function(){s.stickySidebar.css({position:"static"}),s.onScroll(s)})),"undefined"!=typeof ResizeSensor&&new ResizeSensor(e.stickySidebar[0],(n=e,function(){n.onScroll(n)}))})}(t,e),!0)}function c(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return void 0===t&&(t=i.width()),t}return(t=i.extend({containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern",defaultPosition:"relative",namespace:"TSS"},t)).additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,r(e=t,o=this)||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).on("scroll."+e.namespace,(n=e,d=o,function(t){var e=r(n,d);e&&i(this).unbind(t)})),i(window).on("resize."+e.namespace,(a=e,s=o,function(t){var e=r(a,s);e&&i(this).unbind(t)}))),this}}(jQuery);
          /*]]>*/
        </script>
    

    إختياري / تستطيع تحميل السكريبت من خلال أداة التحميل في القائمة الجانبية كنسخة إحتياطية على جهازك.
  • أخيرا قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    
    <script type='text/javascript'>
    //<![CDATA[
    var $StickySidebar = jQuery.noConflict();
    $StickySidebar(document).ready(function(){
        "use strict";
    /*
     ---------------------
    //StickySidebar
     ---------------------
    */
        $StickySidebar(".sidebar-wrapper").theiaStickySidebar({
            additionalMarginTop: 30,
             additionalMarginBottom: 0,
        });
    
    }); // End $StickySidebar(document).ready(function(){
    
    //]]>
    </script>  
    

    الكود هو ترتيب المعلمات للميزة Sticky Sidebar أي من خلاله سنستطيع التحكم في الموضع العمودي للقائمة الجانبية والتي سنشرحها كالتالي ...
    التعديل على الكود
    الكود المحدد بهذا اللون خاص بتغيير نسبة البعد عن رأس القالب أفضل قيمة من 0 إلى 100
    الكود المحدد بهذا اللون خاص بتغيير نسبة البعد عن تذييل القالب أفضل قيمة هي 0
    الكلاس المحدد بهذا اللون خاص بالمعرف الإفتراضي للقائمة الجانبية ركز عليه لأنه إحتمال أن تغيره.



الأن بعد وضع الأكواد سننتقل لتفعيل السكريب على القائمة الجانبية للقالب أو تفعيله على أكثر من قائمة .

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة [تفعيل السكريب على القوائم]

  • قم بالبحث عن الوسم الرئيسي للقائمة الجانبية في الغالب يكون بهذا الإسم sidebar-wrapper ستحرص على أن يكون الكلاس هو نفسه الموجود في السكريبت مثال ..


  • لاحظ أن إسم الكلاس هو الرئيسي أي لايوجد قبله أي عنصر إحتواء وهذه نقطة مهمة حتى يشتغل السكريبت..ثانيا لاحظ معي وركز جيدا !! .. إسم الكلاس للقائمة الجانبية مختلف في الصورة فهو sidebar ما سنقوم به هو وضعه مكان sidebar-wrapper في السكريبت js
  • الآن قم بإضافة عنصر إحتواء جديد أسفل العنصر الرئيسي sidebar-wrapper للقائمة الجانبية الذي سبق التعديل عليه ثم نجعل الكلاس الخاص بالعنصر الجديد بهذا الإسم theiaStickySidebar وهذا مهم لتكون النتيجة كالآتي ..


  • 
         <div class='sidebar-wrapper'>
            <div class='theiaStickySidebar'> 
         
      ... موضع جميع الأدوات في القائمة الجانية ...
     
             </div><!-- /theiaStickySidebar -->
         </div><!-- /sidebar-wrapper -->
    

    الخطوة الأخيرة [تفعيل السكريب على قائمة ثانية]

    إذا كان قالب مدونتك يحتوى على قائمتين فتابع معي هذه الخطوة .. بنفس الخطوات التي قمنا بها سابقا سنطبقها على القائمة الثانية مع تعديل طفيف .. ستقوم أولا بإضافة العنصر المحتوى theiaStickySidebar تماما كالسابق ثم في حالة وجدت في القائمة الثانية الكلاس مختلف ولنفترض أنه sidebar-2 فقط قم بنسخه وتوجه إلى السكريب js وضعه بالشكل التالي ..مع مراعات الفاصلة , بين العنصرين 

    
    <script type='text/javascript'>
    //<![CDATA[
    var $StickySidebar = jQuery.noConflict();
    $StickySidebar(document).ready(function(){
        "use strict";
    /*
     ---------------------
    //StickySidebar
     ---------------------
    */
        $StickySidebar(".sidebar-wrapper, .sidebar-2").theiaStickySidebar({
            additionalMarginTop: 30,
             additionalMarginBottom: 0,
        });
    
    }); // End $StickySidebar(document).ready(function(){
    
    //]]>
    </script>