Bootstrap 4 modal that contains markdown header link
Clash Royale CLAN TAG#URR8PPP
Bootstrap 4 modal that contains markdown header link
I'm using the following code to open a bootstrap 4 modal that contains a Markdown header link. The modal opens correctly but does not scroll to the correct header. I think this is because the page loads before the modal opens. Is there an event for triggering the scroll to header? Would that event be within showdownjs (what I'm using) or is it a standard implemented within the browser?
let split_url = location.href.split('#');
$(".modal:has(#" + split_url[split_url.length - 1] + ")").modal('show');
Yes it finds it because the modal opens correctly it just doesn't scroll to the header.
– als9xd
Aug 8 at 18:44
Scroll to header?! It just shows the modal, why should it scroll to header?
– Majid Akbari
Aug 8 at 18:46
When the markdown is outside of a modal it scrolls automatically. Here is an example url github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images that scrolls to the
images
header– als9xd
Aug 8 at 18:47
images
So your modal content has a named tag and you want to scroll the content of the modal down, right? If yes, you cannot use the #url to scrool to your named tag. Use JQuery scroll.
– Majid Akbari
Aug 8 at 18:52
1 Answer
1
Here a workaround I eventually came up with.
let split_url = location.href.split('#');
let active_modal = $(".modal:has(#" + split_url[split_url.length - 1] + ")");
let offset_top;
active_modal.modal('show').on("shown.bs.modal", function (event)
setTimeout(function ()
if (typeof offset_top === 'undefined')
offset_top = $("#" + split_url[split_url.length - 1]).offset().top;
active_modal.animate( scrollTop: offset_top , 'slow');
,300)
);
It isn't perfect because the scroll is delayed. I couldn't get it to be instantaneous like it normally is.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Are you sure $(".modal:has(#" + split_url[split_url.length - 1] + ")") finds your modal? Add this code before that: if ($(".modal:has(#" + split_url[split_url.length - 1] + ")").length == 0)alert('not found');
– Majid Akbari
Aug 8 at 18:43