I am using your timeline divider page as a template.
I am attempting to call a specific post on the page by adding a unique Id to the page URL. This works on larger screen devices, but it goes to the bottom of the page on a mobile device. The page I’m working on is https://hummingbirdcasitas.com/about-us-our-history.html#most-recent
You’ll see it works fine on a larger screen device, but not on mobile. I suspect the issue is with the CSS for the timeline template page, but I can’t find it.
Issue with calling a URL with an ID on a mobile device
7 replies · opened Nov 30, 2020
Hello,
Apologies for the Inconvenience caused!
We have tried looking into this and the issue appears to be with the IsoTope Plugin being initialized on the Container of the Timeline and then changing its Height which might why it is jumping to the bottom of the Page. Consider adding the following code inside the jQuery(window).on('load') JS Block at the bottom of the Page:
[ch_pre]setTimeout( function(){
let locationHash = window.location.hash;
if( typeof locationHash !== 'undefined' ) {
let offset = $(locationHash).offset();
$('html,body').stop(true, true).animate({
'scrollTop': offset.top - 80
}, 1250, 'easeInQuad');
console.log( offset.top );
}
}, 500);[/ch_pre]
Additionally, consider placing your #most-recent DIV inside one of the .entry Elements. Consider testing this out. We have tried this code and appears to be working well for us.
Hope this Helps!
Let us know if you face any further issues with this.
I tried both suggestions, no luck.
I even played with placing the code before and after the window load function, didn't make a difference. You can see the updated page on the website. Did I do it wrong?
Hello,
We have just checked out your Website and there are some errors in your JS Codes. Please make sure that the Quotes in the JS Codes are properly formatted and then try checking this again. You can check the exact line of the error in your Browser's Developer Console.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Sorry,
I just copied the code you sent and didn't realize that you used the wrong quotes.
I changed the quotes, but no luck.
What am I doing wrong?
Hello,
Apologies about this! The Code markup changes the Quotes to this Fancy Format which generates the error. We are working on resolving this.
The Console still displays a JS error. Consider using this code again:
setTimeout( function(){
let locationHash = window.location.hash;
if( typeof locationHash !== 'undefined' ) {
let offset = $(locationHash).offset();
$('html,body').stop(true, true).animate({
'scrollTop': offset.top - 80
}, 1250, 'easeInQuad');
console.log( offset.top );
}
}, 500);
And let us know if this works. Thanks for your Continued Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
That worked, THANKS!
Hello,
That's great news! Glad that the issue was resolved. Apologies for the unnecessary delays and thanks for your Patience!
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard