jQuery mega menu showing some blocks on slow connection. how to fix it?

Question

I am using mega menu on this. [DUE TO THE SECURITY and BAcklinks I delete the link - In case if any one needs the link just PM me]

I am using mega menu for the navigation.

Only the following script I am using for this.

And I placed the mega menu jQuery script just before the </body> tag

<script type="text/javascript">
$(function(){
    $('#mega-menu-3').dcMegaMenu({
        rowItems: '2',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

But some block are displayed at the navigation area till the page or JS files load I guess.

I could clearly see those odd blocks on slow connections.

How can I fix this guys?

score 3 · Accepted Answer · answered Mar 06 '14 at 12:46

3

CSS:

#mega-menu-3 {
    display: none;
}

JS:

$(window).load(function(){
    $('#mega-menu-3').show();
});

If it doesn't work, try this (and ignore the CSS I suggested above):

$(document).ready(function(){
    $('#mega-menu-3').hide();
});

$(window).load(function(){
    $('#mega-menu-3').show();
});

Now it will only show when the page is fully loaded. Hope this helps. :)

answered Mar 06 '14 at 12:46

tkore

1,101
12
31

thanks a lot. 1st one is working fine. I do not check 2nd solution – Riffaz Starr Mar 07 '14 at 05:30
@RiffazStarr - Try putting the $('#mega-menu-3').hide(); code in a document ready event, as I suggested above. Just take the 2nd code block I gave you and try it. :) – tkore Mar 07 '14 at 21:29

score 0 · Answer 2 · answered Mar 06 '14 at 12:08

0

You can hide blocks in css, and then on document.ready just set display:block to elements.

answered Mar 06 '14 at 12:08

Sergey92zp

589
4
22

jQuery mega menu showing some blocks on slow connection. how to fix it?

2 Answers2