CODEWITHSUNDEEP
jquerywordpressflashflickerfouc
es1
es1

Reputation: 1556

jQuery Vertical mega menu sub menus flashing on load. How to stop it from flashing in wordpress

I have a wordpress web site with Twenty Eleven Child Theme. In my sidebar I've embedded a jQuery Vertical Mega Menu widget from:

http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/

The menu works fine. The only problem is that when the web site loads there is a short FOUC (Flashing of unstyled content).

http://en.wikipedia.org/wiki/Flash_of_unstyled_content

I don't know how to prevent it from flashing. I read a few similar questions with solutions but I can't figure out how to apply it to my child theme.

Some say you have to add jQuery(document).ready(function() {. But where in? I tried to add it into my child theme's functions.php:

<?php 
....
.....


function id_scripts() {
   jQuery(document).ready(function() { echo 'test'});
}
add_action('wp_enqueue_scripts', 'id_scripts');

>

But it gives me a parse error saying:

Parse error: syntax error, unexpected T_FUNCTION, expecting ')' in /..../functions.php on line 28

Upvotes: 6

Views: 2004

Answers (2)

joshleecreates
joshleecreates

Reputation: 85

As a followup to CWSpear's answer, I would recommend creating a custom CSS class for this purpose that you can also apply to any other elements that should be hidden until activated by JS. I like to name this class .js-hide — Twitter Bootstrap uses .collapse.

Upvotes: 0

CWSpear
CWSpear

Reputation: 3250

First off, it appears you're adding JavaScript to PHP. That's why you have the error.

Regarding the issue with the flashing menu, you should set the submenu to display: none; in the CSS. Looking at the plugin, it is setting it (the submenu) to display: none;, but it doesn't fire until after the DOM is loaded (which afters a short time after the page starts loading, but enough to see that "flash"), so by setting it to display: none; in the CSS, it will load hidden and will open when hovered over.

Specifically, by looking at the plugin in the link, try adding the following to your CSS:

.dcjq-vertical-mega-menu .sub-container {
    display: none;
}

Upvotes: 0

Related Questions