Results 1 to 8 of 8

Thread: Power List Menu with many lazy loading nodes adds hundreds of header attributes

  1. #1
    Join Date
    Sep 2016
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Power List Menu with many lazy loading nodes adds hundreds of header attributes

    1) Script Title: Power List Menu

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/powerlistmenu.htm

    3) Describe problem: I have a huge menu structure (above 10000 nodes), the top level is defined in the html code, all other submenus are lazy-loaded. (A single menu page has 2-60 child nodes). It means, on the top level, and on other levels too there are several lazy-loaded child nodes.
    Moving around in the menu tree i noticed, that the reaction slowed down. Looking into the resulting HTML with Firebug i saw, that all top level lazy-loading nodes got several "headerx" class attributes (the numbers counting up) - the maximum i saw was above 400 attributes for each top level lazy-loading nodes, and also the right arrow behind the text ( <span class="right fa fa-angle-right"></span> ) was multiple times inserted after each node text. Such multiple class attributes and right arrows were also in lower level menus, when since their opening other submenu were opened too.

    I am sorry, but the lazy loading pages are delivered by a dynamic server code, and it is running at the moment only on my own computer, so i cannot give you the environement causing the problem, but i hope placing several lazy loading nodes near each other in the same submenu, and also into the lower level submenus one can reproduce the error.

    Here the Firebug screen: Click image for larger version. 

Name:	Image2.jpg 
Views:	301 
Size:	19.2 KB 
ID:	5948

  2. #2
    Join Date
    Sep 2016
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I've posted it in normal size (876 x 549), i guess the forum software resized it.

    I copy-paste the text from firebug here. It is not so nice (no icons, no coloring), but the information is there.
    It is only a part of the content, but you can see the problem.

    HTML Code:
    <body style="margin:0;">
    <div style="width: 100%; overflow: hidden;">
    <nav id="mnu1" class="powerlistmenu" style="width: 230px; float: left; height: 53px;">
    <div class="drawer" style="left: -100%; z-index: 1009;">
    <ul>
    <li class="header header0">
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/0">
    <a href="#">
    Hungary
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    </a>
    </li>
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/1">
    <a href="#">
    Germany
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    </a>
    </li>
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/2">
    <a href="#">
    Switzerland
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    <span class="right fa fa-angle-right"></span>
    </a>
    </li>
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/3">
    <li class="header header1 header2 header3">
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/5">
    <li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/6">
    Last edited by jscheuer1; 09-18-2016 at 01:11 PM. Reason: format code

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm it's hard to tell much from the code you posted (all I can see is that it's polluted), though based on your initial description it sounds like the script may be fetching and building the dynamic menus multiple times (instead of just once for each external file (ie: /plm/2). A couple of things:

    1) Make sure the markup for your entire menu (initially and after a sub menu is fetched and injected) is valid. A missing closing tag for example may lead to the erratic behavior observed).

    2) We need to see a demo of the issue you're talking about in order to pinpoint the problem. If you could create a stripped down, minimal version of the menu with the issues intact and post it on codepen.io for example, that wound really help.
    DD Admin

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ddadmin View Post
    Hmm it's hard to tell much from the code you posted (all I can see is that it's polluted), though based on your initial description it sounds like the script may be fetching and building the dynamic menus multiple times (instead of just once for each external file (ie: /plm/2). A couple of things:

    1) Make sure the markup for your entire menu (initially and after a sub menu is fetched and injected) is valid. A missing closing tag for example may lead to the erratic behavior observed).

    2) We need to see a demo of the issue you're talking about in order to pinpoint the problem. If you could create a stripped down, minimal version of the menu with the issues intact and post it on codepen.io for example, that wound really help.
    One thing that just occurred to me is that you might be initializing the menu more than once. DD Admin's ideas are also important to go over. And, like he says, without seeing the demo we really have little chance of pinpointing the issue(s). Is there any chance you could publish it (or at least enough of it to see the problem in action) somewhere we could have a look at it?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2016
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I had no luck with codepen.io, so i uploaded a stripped-down example to http://traffic.pxtr.de/tmp/pc4.htm . Selecting the different country names after each other, and returning to the top level already causes the problem, you do not need to dive deeper into the menu structure.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok, I've confirmed there is a bug with the script when it comes to the "lazy-load" option. Try the following updated .js file and let me know if it fixes the issue.
    Attached Files Attached Files
    DD Admin

  7. The Following User Says Thank You to ddadmin For This Useful Post:

    godeny (09-20-2016)

  8. #7
    Join Date
    Sep 2016
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you, the problem is fixed in the original, large menu too.

  9. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You're welcome, and thanks for bringing this to my attention. Original .js file on DD also updated with fix.
    DD Admin

Similar Threads

  1. Lazy loading of images
    By JennyWong in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-14-2016, 07:59 AM
  2. Replies: 3
    Last Post: 02-04-2013, 11:07 PM
  3. List Menu controls two textboxes individual attributes simultaneously
    By Tedah3143 in forum Looking for such a script or service
    Replies: 1
    Last Post: 01-20-2010, 10:35 AM
  4. Margin between header in Bullet List Accordion Menu
    By sogood in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-26-2008, 06:39 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •