Maxxius Posted November 19, 2019 Share Posted November 19, 2019 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 🙂 Meddysong 1 Link to comment Share on other sites More sharing options...
Martin A. Posted November 19, 2019 Share Posted November 19, 2019 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 ] ); }); Â Maxxius, Adriano Faria and Meddysong 3 Link to comment Share on other sites More sharing options...
kmk Posted November 19, 2019 Share Posted November 19, 2019 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? Link to comment Share on other sites More sharing options...
Martin A. Posted November 19, 2019 Share Posted November 19, 2019 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. Link to comment Share on other sites More sharing options...
Maxxius Posted October 6, 2020 Author Share Posted October 6, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Maxxius Posted January 28, 2021 Author Share Posted January 28, 2021 @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? Link to comment Share on other sites More sharing options...
Martin A. Posted January 28, 2021 Share Posted January 28, 2021 What does your JS look like now, @Maxxius? Link to comment Share on other sites More sharing options...
Maxxius Posted January 29, 2021 Author Share Posted January 29, 2021 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. Â Link to comment Share on other sites More sharing options...
Daniel F Posted January 29, 2021 Share Posted January 29, 2021 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, Meddysong and Jordan Miller 3 Link to comment Share on other sites More sharing options...
Maxxius Posted January 30, 2021 Author Share Posted January 30, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts