• Hi,
    The smooth scrolling between sections on my homepage doesn’t work anymore. Is the update has change settings?
    Regards

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter jacquesjphoto

    (@jacquesjphoto)

    I use this snippet code :

    function ps2id_mousewheel_options($opt){
      $opts = array(
            //set the ids of pages or posts that you want the mousewheel functionality to be enabled 
            //and set the target sections URLs for each of your sections of each page
            'ps2id_mousewheel_pages' => array( 
                //page with id 1 and its target sections URLs
                '7993' => array(
                    //page mousewheel sections URLs (e.g. #section-1 or http://site.com/#section-1 or /page/#section-1)
    				'#section1', 
                    '#section1', 
                    '#section2', 
                    '#section3',
    Thread Starter jacquesjphoto

    (@jacquesjphoto)

    //set the default target sections URLs
    ‘ps2id_mousewheel_default_sections’ => array(
    ‘#section1’,
    ),
    //Special options for the mouse-wheel smooth scrolling (these overwrite the ones in plugin settings)
    //Scroll type/easing
    ‘ps2id_mousewheel_scroll_easing’ => “easeOutQuint”,
    //Scroll duration (in milliseconds)
    ‘ps2id_mousewheel_scroll_duration’ => 800,
    //Keep the current element highlighted until the next one comes into view (this is needed if the page has non-adjacent sections, i.e. when not all sections are next to one another)
    ‘ps2id_mousewheel_keep_highlight_until_next’ => true,
    //Allow only one highlighted element at a time (should be disabled when $ps2id_mousewheel_keep_highlight_until_next is set to true)
    ‘ps2id_mousewheel_force_single_highlight’ => false,
    //Append the clicked link’s hash value (e.g. #id) to browser’s URL/address bar (this should normally be disabled for better UX)
    ‘ps2id_mousewheel_append_hash’ => false
    );
    $r = (isset($opt) && !empty($opt)) ? $opts[$opt] : $opts;
    return $r;
    }

    function ps2id_mw_condition($pages_arr){
    //set the condition for the mousewheel functionality
    //add the WordPress conditional tags you want (https://codex.wordpress.org/Conditional_Tags)
    return is_single( $pages_arr ) || is_page( $pages_arr )
    //|| is_category() //example: uncomment to enable for categories (with the default target sections URLs set in ps2id_mousewheel_default_sections option)
    //|| is_home() //example: uncomment to enable for homepage (with the default target sections URLs set in ps2id_mousewheel_default_sections option)
    ;
    }

    //—– HTML —–

    add_action(‘wp_footer’, ‘ps2id_mw_html’);

    function ps2id_mw_html(){
    ?>
    <?php if(class_exists(‘malihuPageScroll2id’)) : ?>
    <?php
    $pages_arr = ps2id_mw_get_pages();
    $page_id = get_queried_object_id();
    $sections_arr = is_singular() && in_array($page_id, $pages_arr) ? ps2id_mousewheel_options(‘ps2id_mousewheel_pages’)[$page_id] : ps2id_mousewheel_options(‘ps2id_mousewheel_default_sections’);
    ?>
    <?php if(ps2id_mw_condition($pages_arr)) : ?>
    <?php if(!is_null($sections_arr)) : ?>
    <div id=”ps2id-mw-sections-bullets”>
    <?php
    foreach($sections_arr as $section){
    ?>
    ” class=”ps2id-mw-section-bullet”>
    <?php
    }
    ?>
    </div>
    <?php endif; ?>
    <style>

    /* aside bullets section */
    @media (min-width: 799px) {
    #ps2id-mw-sections-bullets{
    position: fixed;
    right: 2em;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    }
    }

    /* aside bullets */
    @media (min-width: 799px) {
    .ps2id-mw-section-bullet{
    display: block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    border-radius: 100%;
    margin: 0 auto;
    opacity: .6;
    }
    }

    @media (min-width: 799px) {
    .ps2id-mw-section-bullet::before{
    content: “”;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: .4em;
    border-radius: 100%;
    border: 6px solid;
    color: #c2c2d6
    }
    }

    @media (min-width: 799px) {
    .ps2id-mw-section-bullet:hover,
    .ps2id-mw-section-bullet.mPS2id-highlight:not(.mPS2id-highlight-first):not(.mPS2id-highlight-last),
    .ps2id-mw-section-bullet.mPS2id-highlight-first{
    opacity: 1;
    }
    }

    </style>
    <?php endif; ?>
    <?php endif; ?>
    <?php
    };

    //—– Javascript —–

    add_action( ‘wp_enqueue_scripts’, ‘ps2id_special_params’, 1 );

    function ps2id_special_params(){
    if(class_exists(‘malihuPageScroll2id’)){
    $pages_arr = ps2id_mw_get_pages();
    if(ps2id_mw_condition($pages_arr)) :
    wp_register_script( ‘page-scroll-to-id-mw-js-init’, ”, array(), ‘0.0.1’, false );
    wp_enqueue_script( ‘page-scroll-to-id-mw-js-init’ );
    wp_add_inline_script( ‘page-scroll-to-id-mw-js-init’, ‘window.ps2id_special_params={
    highlightSelector: “.ps2id-mw-section-bullet”, //mouse-wheel script highlight selector
    scrollEasing: “‘.ps2id_mousewheel_options(‘ps2id_mousewheel_scroll_easing’).'”, //set a more fitting scroll easing for mousewheel smooth scrolling
    scrollSpeed: ‘.ps2id_mousewheel_options(‘ps2id_mousewheel_scroll_duration’).’, //set a more fitting scrolling duration for mousewheel smooth scrolling
    keepHighlightUntilNext: “‘.json_encode(ps2id_mousewheel_options(‘ps2id_mousewheel_keep_highlight_until_next’)).'”, //this is needed if the page has non-adjacent sections (i.e. when not all sections are next to one another)
    forceSingleHighlight: “‘.json_encode(ps2id_mousewheel_options(‘ps2id_mousewheel_force_single_highlight’)).'”, //should be disabled when keepHighlightUntilNext is enabled
    appendHash: “‘.json_encode(ps2id_mousewheel_options(‘ps2id_mousewheel_append_hash’)).'” //should normally be disabled for better UX
    };’);
    endif;
    }
    }

    add_action( ‘wp_enqueue_scripts’, ‘ps2id_mw_js’, 99 );

    function ps2id_mw_js(){
    if(class_exists(‘malihuPageScroll2id’)){
    $pages_arr = ps2id_mw_get_pages();
    if(ps2id_mw_condition($pages_arr)) :
    if(PS2ID_MINIFIED_JS){
    $deps = array(‘jquery’,’page-scroll-to-id-mw-js-init’,’page-scroll-to-id-plugin-script’);
    }else{
    $deps = array(‘jquery’,’page-scroll-to-id-mw-js-init’,’page-scroll-to-id-plugin-init-script’,’page-scroll-to-id-plugin-script’);
    }
    wp_register_script( ‘page-scroll-to-id-mw-js’, ”, $deps, ‘0.0.1’, true );
    wp_enqueue_script( ‘page-scroll-to-id-mw-js’ );
    wp_add_inline_script( ‘page-scroll-to-id-mw-js’, ‘(function($){
    $(window).on(“load”,function(){

    var doc=$(document),
    mPS2idData=doc.data(“mPS2id”),
    mPS2idExt;

    if(!mPS2idData){
    console.log(“Error: \’Page scroll to id\’ plugin not present or activated. Please run the code after plugin is loaded.”);
    return;
    }

    if(!$(“._mPS2id-t”).length) return;

    doc.data(“mPS2idExtend”,{
    selector: “._mPS2id-h”,
    currentSelector: function(){
    return this.index($(“.mPS2id-highlight-first”).length ? $(“.mPS2id-highlight-first”) : $(“.mPS2id-highlight”).length ? $(“.mPS2id-highlight”) : $(“.mPS2id-wheel-init”));
    },
    target: function(){
    var curr=$(“.mPS2id-target-first”).length ? $(“.mPS2id-target-first”) : $(“.mPS2id-target”).length ? $(“.mPS2id-target”) : $(“.mPS2id-clicked”).length ? $(“#”+$(“.mPS2id-clicked”).attr(“href”).split(“#”)[1]) : false;
    if(!curr.length){
    //if no current target exists, get the next and previous closest sections
    var max=999999999,
    min=-999999999;
    $(“._mPS2id-t”).each(function(){
    var pos=mPS2idData.layout===”horizontal” ? this.getBoundingClientRect().left : this.getBoundingClientRect().top;
    if(pos < 0 && pos > min){
    min=pos;
    curr=$(“._mPS2id-t[data-psid-wheel-section=\'”+($(this).data(“psid-wheel-section”)+1)+”\’]”);
    }else if(pos > 0 && pos < max){
    max=pos;
    curr=$(“._mPS2id-t[data-psid-wheel-section=\'”+($(this).data(“psid-wheel-section”)-1)+”\’]”);
    }
    });
    $(“._mPS2id-h[data-psid-wheel-link=\'”+curr.data(“psid-wheel-section”)+”\’]”).addClass(“mPS2id-wheel-init”);
    }
    return [
    $(“._mPS2id-t[data-psid-wheel-section=\'”+(curr.data(“psid-wheel-section”)-1)+”\’]”), //previous target
    curr, //current target
    $(“._mPS2id-t[data-psid-wheel-section=\'”+(curr.data(“psid-wheel-section”)+1)+”\’]”), //next target
    ];
    },
    needScroll: function(dir){
    if($(“html,body”).is(“:animated”)) return;
    if(dir > 0){ //scrolled fw
    var el=mPS2idExt.target.call()[2][0]; //next adjacent target
    if(mPS2idData.layout===”horizontal”){
    return el ? el.getBoundingClientRect().left > (window.innerWidth || document.documentElement.clientWidth) : true; //next target is after viewport
    }else{
    return el ? el.getBoundingClientRect().top > (window.innerHeight || document.documentElement.clientHeight) : true; //next target is below viewport
    }
    }else if(dir < 0){ //scrolled bw
    var el=mPS2idExt.target.call()[0][0]; //previous adjacent target
    if(mPS2idData.layout===”horizontal”){
    return el ? el.getBoundingClientRect().right < 0 : true; //previous target is before viewport
    }else{
    return el ? el.getBoundingClientRect().bottom < 0 : true; //previous target is above viewport
    }
    }
    },
    input:{
    y: null,
    x: null
    },
    i: null,
    time: null,
    debounce:{
    prevTime: 0
    },
    support:{
    wheel: false
    }
    }).on(“ps2id-scrollSection”,function(e,dlt,i){
    var sel=$(mPS2idExt.selector);
    if(!$(“html,body”).is(“:animated”)){
    if(!i) i=mPS2idExt.currentSelector.call(sel);
    if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger(“click.mPS2id”);
    }
    }).on(“keydown”,function(e){ //keyboard
    var code=e.keyCode ? e.keyCode : e.which,
    keys=$(this).data(“mPS2id”).layout===”horizontal” ? [37,39] : [38,40];
    if(code===keys[0] || code===keys[1]){
    if(!mPS2idExt.needScroll((code > 38 ? 1 : -1))){ //check if normal scrolling is needed to reach adjacent targets
    if($(mPS2idExt.selector).length) e.preventDefault();
    $(this).trigger(“ps2id-scrollSection”,(code===keys[0] ? 1 : -1));
    }
    }
    })
    //touch events (remove the following code if you don\’t want to apply the touch functionality)
    .on(“pointerdown touchstart”,function(e){ //touch (optional)
    var o=e.originalEvent;
    if(o.pointerType===”touch” || e.type===”touchstart”){
    var y=o.screenY || o.changedTouches[0].screenY;
    mPS2idExt.input.y=y;
    if($(this).data(“mPS2id”).layout===”horizontal”){
    var x=o.screenX || o.changedTouches[0].screenX;
    mPS2idExt.input.x=x;
    }
    mPS2idExt.time=o.timeStamp;
    mPS2idExt.i=mPS2idExt.currentSelector.call($(mPS2idExt.selector));
    }
    }).on(“pointerup touchend”,function(e){
    var o=e.originalEvent;
    if(o.pointerType===”touch” || e.type===”touchend”){
    var y=o.screenY || o.changedTouches[0].screenY,
    diff=mPS2idExt.input.y-y,
    time=o.timeStamp-mPS2idExt.time,
    i=mPS2idExt.currentSelector.call($(mPS2idExt.selector));
    if($(this).data(“mPS2id”).layout===”horizontal”){
    var x=o.screenX || o.changedTouches[0].screenX,
    diff=mPS2idExt.input.x-x;
    }
    if(Math.abs(diff)<2) return;
    var _switch=function(){
    return time<200 && i===mPS2idExt.i;
    };
    var dir=diff > 0 ? 1 : -1;
    if(time < 500 && Math.abs(diff) > 50) $(this).trigger(“ps2id-scrollSection”,[(diff>0 && _switch() ? -1 : diff<0 && _switch() ? 1 : 0),(_switch() ? mPS2idExt.i : i)]);
    }
    })
    // —–
    .on(“ps2id-wheel-init”,function(){
    //script initialization
    mPS2idExt=$(this).data(“mPS2idExtend”);
    $(“._mPS2id-t”).each(function(index){
    $(this).attr(“data-psid-wheel-section”,index);
    });
    $(“._mPS2id-h”).each(function(index){
    $(this).attr(“data-psid-wheel-link”,index);
    });
    //vanilla js mousewheel event (https://github.com/jquery/jquery/issues/2871)
    document.addEventListener(\’wheel\’, wheel, {passive: false}, false);
    document.addEventListener(\’mousewheel\’, wheel, {passive: false}, false);
    document.addEventListener(\’DOMMouseScroll\’, wheel, {passive: false}, false);
    function wheel(e){
    if(e.type == “wheel”){
    mPS2idExt.support.wheel = true;
    }else if(mPS2idExt.support.wheel){
    return;
    }
    if(!mPS2idExt.needScroll((mPS2idData.layout===”horizontal” ? e.deltaX : e.deltaY))){ //check if normal scrolling is needed to reach adjacent targets
    if($(mPS2idExt.selector).length) e.preventDefault();
    if((mPS2idData.layout===”vertical” && e.deltaY==-0) || (mPS2idData.layout===”horizontal” && e.deltaX==-0)) return;
    //trackpad fix (https://stackoverflow.com/a/26514147)
    var curTime=new Date().getTime();
    if(typeof mPS2idExt.debounce.prevTime !== “undefined”){
    if((curTime-mPS2idExt.debounce.prevTime)>200) doc.trigger(“ps2id-scrollSection”,((e.detail<0 || e.wheelDelta>0 || e.deltaY<0 || e.deltaX<0) ? 1 : -1));
    }
    mPS2idExt.debounce.prevTime=curTime;
    }
    };
    }).trigger(“ps2id-wheel-init”);
    });

    })(jQuery);’);
    endif;
    }
    }

    function ps2id_mw_get_pages(){
    //get pages ids as array
    $pages_arr = array();
    foreach(ps2id_mousewheel_options(‘ps2id_mousewheel_pages’) as $k => $v) {
    $pages_arr[] = $k;
    }
    return $pages_arr;
    }
    /* —————————————- */

    Thread Starter jacquesjphoto

    (@jacquesjphoto)

    I’ve enabled Force scroll type/easing but it doesn’t work too

    I use the theme Oceanwp

    • This reply was modified 3 years, 11 months ago by jacquesjphoto.
    Plugin Author malihu

    (@malihu)

    Hi,

    I just checked your page’s source and I can’t find the custom script/snippet in the HTML.

    What update you did?
    Where/how did you add the custom script/snippet?
    Do you have any plugin/script that conpresses/concatenates javascript files?

    Thread Starter jacquesjphoto

    (@jacquesjphoto)

    Thanks for the reply.
    I’ve made the update of your plugin today Version 1.7.5
    I use Code snippets plugin and it was working few days ago.
    I use Jetpack boost just to Defer Non-Essential JavaScript. I’ve disabled it but it still doesn’t work…
    The code works because the bullets for sections display properly on the right

    • This reply was modified 3 years, 11 months ago by jacquesjphoto.
    • This reply was modified 3 years, 11 months ago by jacquesjphoto.
    Plugin Author malihu

    (@malihu)

    Plugin update does not or should not affect the custom code/snippet.

    The PHP code works (that’s why you see the bullets) but the javascript is not appended in the page, meaning that something else, like another plugin/script handles javascript in some way.

    I don’t know exactly what Jetpack boost does but all javascript are still concatenated when I view your page’s HTML source.

    Does Jetpack boost does anything else? Can you temporarily disabled it?
    Which other script (other than jetpack) might concatenate (i.e. merge) the site’s javascript files?
    Did you update your theme or something else recently?

    Thread Starter jacquesjphoto

    (@jacquesjphoto)

    I’ve disabled Jetpack Boost and Asset cleanup. I don’t use this one for Javascript.
    And yes, the theme had important updates this week. So maybe a javascript is disabled in Oceanwp options

    • This reply was modified 3 years, 11 months ago by jacquesjphoto.
    Thread Starter jacquesjphoto

    (@jacquesjphoto)

    I’ve just fix the issue. It is the plugin Page Optimize by Automattic (not updated since 6 months) who makes conflict. I’ve disabled it and it works now.
    Thanks a lot for support.

    Plugin Author malihu

    (@malihu)

    You’re welcome πŸ™‚

    The “Page Optimize by Automattic” plugin should normally have a way to exclude scripts from being optimized. You could check if it does and exclude “Code snippets” and/or “Page scroll to id” plugin if you want to test it and keep it activated.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Scrolling between sections just stop working’ is closed to new replies.