IPRelease Notes suggestion I made back in the day

[Maxxius]

hi, I have a suggestion about your website - IPS and its section - Release notes.

https://invisioncommunity.com/release-notes/

Its a fine page to track all the changes, I love it. But it misses one vital user experience enriching function. When you for example scroll down some more and you click on for example on

4.1.19.2
Released 04/11/2017

The information loads but you have to manually scroll back up to see it. That is not a good user experience. IMHO whenever a tab with a version is clicked you have to be scrolled back up to the top automatically so you can see what was done in that version. 🙂

hope you come up with a fix, share it on https://invisioncommunity.com/4guides/suite-applications/pages/recreating-the-release-notes-section/introduction-r101/ so I can make one myself 🙂

[Martin A.]

If you have this issue yourself, and wondering how to solve it, the change would be on this part:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

Change it to:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });
					
					window.scrollTo( 0, 0 );					
					//$( 'body, html' ).animate({ scrollTop: 0 }); // Or this if you want to animate the effect. 

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

 

[kmk]

2 hours ago, Martin A. said:

If you have this issue yourself, and wondering how to solve it, the change would be on this part:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

Change it to:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });
					
					window.scrollTo( 0, 0 );					
					//$( 'body, html' ).animate({ scrollTop: 0 }); // Or this if you want to animate the effect. 

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

 

Which file? 

Can I apply this for my website? 

[Martin A.]

7 hours ago, kmk said:

Which file? 

Can I apply this for my website? 

https://invisioncommunity.com/4guides/suite-applications/pages/recreating-the-release-notes-section/making-it-interactive-with-javascript-r148/

It's a change to the javascript used there.

[Maxxius]

On 11/19/2019 at 11:17 AM, Martin A. said:

If you have this issue yourself, and wondering how to solve it, the change would be on this part:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

Change it to:

this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });
					
					window.scrollTo( 0, 0 );					
					//$( 'body, html' ).animate({ scrollTop: 0 }); // Or this if you want to animate the effect. 

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});

 

Hello, it has been awhile but today I got to testing that code. It actually worked but there's a few quirks.

For example if I set window.scrollTo( 0, 440 );

which would scroll the right amount to the start of the version changes text on a desktop. But if you are on a mobile - this begins to miss the correct height because of different layout.

also another thing is when you first access the page it also scrolls down to the set height automatically without pressing on any version. That's not cool unless you use scrollTo (0,0).

Do you believe there is a way to take advantage of this exact script or funcitonality which works when you click on a pagination link. It always gets the right height to scroll back to:

Also I fixed the code for animated scrolling:

it should look like this:

					$('body,html').animate({scrollTop: 0}, 0);

the first zero is for how much you need it to scroll down and second zero is for speed. I use:

					$('body,html').animate({scrollTop: 484}, 600);

but what irks me is that when I visit the release page by clicking a link in the footer I get instantly scrolled down. I do not need that behavior. only it need to happen when you click on a release note tab.

I think it would be best if the scroller would actually be smart enough to scroll until it finds the DIV of the release log window instead of relying on pixels which are different for every device.

Edited October 6, 2020 by Maxxius

[Maxxius]

@Martin A. hello there 🙂 Its been some time perhaps you got a minute or ten to help me figure this out? Check my post above this one. Perhaps javascript can be changed so it would return upwards to a particular <div> like for example

<div class="ipsAreaBackground ipsPad_half" data-resort="listResort" data-controller="core.global.core.table,core.front.core.moderation">

so despite any device the script would always jump back to the correct place?

@onlyME I believe you have implemented this in your apps when I suggested it almost a couple of years ago. Have you any ideas?

[Martin A.]

What does your JS look like now, @Maxxius?

[Maxxius]

10 hours ago, Martin A. said:

What does your JS look like now, @Maxxius?

I have set it back to default configuration which is how IPS detailed in the tutorial. - https://invisioncommunity.com/4guides/suite-applications/pages/recreating-the-release-notes-section/making-it-interactive-with-javascript-r148/

like I mentioned it before changing

$('body,html').animate({scrollTop: 0}, 0);

perhaps its possible to make it scroll to a certain DIV instead of coordinates for a lack of a better term.

 

[Daniel F]

4 minutes ago, Maxxius said:

perhaps its possible to make it scroll to a certain DIV instead of coordinates for a lack of a better term.

Absolutely 🙂 Just get the position of the element you want to scroll to via .offset() https://api.jquery.com/offset/  😉

Something like following code should work: 

$('html, body').animate({
                    scrollTop: $("#yourElemSelector").offset().top
                });

 

[Maxxius]

On 1/29/2021 at 10:43 AM, Daniel F said:

Absolutely 🙂 Just get the position of the element you want to scroll to via .offset() https://api.jquery.com/offset/  😉

Something like following code should work: 

$('html, body').animate({
                    scrollTop: $("#yourElemSelector").offset().top
                });

 

Great! This works nicely! Thank you so much @Daniel F

...And it somehow introduced a small bug. Thing is when the release page is first opened by clicking a link in the footer and the page is loaded for the first time - the javascript is somehow executed and scrolls down immediately down a bit as if I have clicked on any version number. If there a way to stop this behavior on first load and only to scroll when a version number is clicked.