baden03 / collapse-o-matic

Collapse-O-Matic is a WordPress plugin that removes clutter and saves space. Display and hide additional content in a SEO friendly way by wrapping content in an [expand] shortcode.
GNU General Public License v2.0
6 stars 7 forks source link

Request: find me target to jump to bottom of expanded element #8

Open dokipen3d opened 3 years ago

dokipen3d commented 3 years ago

Hi there. Hopefully this is an ok place to make requests.

I am trying to use the findme feature to have expanded blocks open up and automatically scroll to the bottom of the block.

I've tried a few things (using the roll your own example) but the current behaviour (from looking at the code) seems to use the top of the element as the scroll position.

Would it be possible to add an option to set the scroll so that the end of the block ends up where the initial expand text was?

Thanks

dokipen3d commented 3 years ago

I kind of am getting somewhere by adding an actual target id to jump to.....

                         //deal with any findme links
            if(trig_id && jQuery('#'+trig_id).is('.find-me.colomat-close')){
                //offset_top = jQuery('#find-'+trig_id).attr('name');
                findme = jQuery('#'+trig_id).attr('data-findme');
                target_offset = jQuery('#'+trig_id).offset();
                target_height = jQuery('#'+trig_id).outerHeight(true);
                target_element_id = jQuery('#'+trig_id).attr('target-element');

                if( findme == 'auto' || findme == 'target'){
                    target_offset = jQuery('#'+target_element_id).offset();
                }
                if( findme == 'trigger'){
                    target_offset = jQuery('#'+trig_id).offset();
                }

                jQuery('html, body').animate({scrollTop:target_offset.top}, 500);
            }
dokipen3d commented 3 years ago

and here is the code that does exactly what I want. It calculates the offset from the current expand element relative to the window, then gets the target element and subtracts that offset so it jumps to where you clicked.

            if(trig_id && jQuery('#'+trig_id).is('.find-me.colomat-close')){
                findme = jQuery('#'+trig_id).attr('data-findme');
                target_offset = jQuery('#'+trig_id).offset();
                target_height = jQuery('#'+trig_id).outerHeight(true);
                target_element_id = jQuery('#'+trig_id).attr('target-element');

                //offset from expand button to window
                relOffset = target_offset.top - jQuery(window).scrollTop();

                if( findme == 'auto' || findme == 'target'){
                    target_offset = jQuery('#'+target_element_id).offset();
                    //target_offset = jQuery('#target-'+trig_id).offset();
                }
                if( findme == 'trigger'){
                    target_offset = jQuery('#'+trig_id).offset();
                }

                newOffset = target_offset.top - relOffset;
                jQuery('html, body').animate({scrollTop:newOffset}, 500);
            }
dokipen3d commented 3 years ago

Also made it so that scroll-to-trigger causes the scroll position to go back to where the button was clicked...

        else if(id.indexOf('bot-') != '-1'){
            id = id.substr(4);
            jQuery('#'+id).toggleClass('colomat-close');

            //deal with any scroll to links from the Internal Collapse Trigger
            if(jQuery(this).hasClass('scroll-to-trigger')){
                var target_offset = jQuery('#'+id).offset();
                offset_top = target_offset.top - jQuery(window).scrollTop();
            }

            //deal with any scroll to links from the Title Trigger
            if(jQuery('#'+id).hasClass('scroll-to-trigger')){
                offset_top = jQuery('#scrollonclose-'+id).attr('name');
                if (offset_top == 'auto') {
                    var target_offset = jQuery('#'+id).offset();
                    offset_top = target_offset.top - jQuery(window).scrollTop();
                }
            }
        }
baden03 commented 3 years ago

Please read this: https://spacedonkey.de/3915/collapse-o-matic-new-findme-options/ and the feature in the pro version: https://spacedonkey.de/3044/collapse-pro-matic-scroll-target/