I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div using Javascript. In my real application this array comes from PHP.
I am using insertAdjacentHTML(‘beforeend’, “link content”) to set the content.
To style the same I am using “accordion slider” and “Perfect Scrollbar”, I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren’t loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn’t find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
Hi @trytry4215, the problem seems to be that you’re inserting the dynamic HTML on the load event, but initialising the scrollbar on DOMContentReady (jQuery’s $(document).ready() function) – which gets usually triggered before the load event. So to solve this, put everything in the same callback… or just put it at the end of the body w/o any load or ready events at all (see here).
BTW, that Scrollbar library you’re using seems to append some divs to those .sub-menus… this results in invalid HTML, ul elements can only have li elements as their direct children. Maybe try wrapping these in an additional container div, or apply the scrollbar to the parent li elements instead.
