Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dokipen3d opened this issue Aug 30, 2021 · 4 comments
Open

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

dokipen3d opened this issue Aug 30, 2021 · 4 comments

Comments

@dokipen3d
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

dokipen3d commented Aug 30, 2021

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
Copy link
Owner

baden03 commented Sep 1, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants