jquery & smartmenus: can't build mega menu at the beginning of the document

Question

I think I'll just start of

Explanation:

I'm currently building a Site written in jQuery and I'm using multiple techniques wich allows the site to construct itself like Ajax Object returning functions inside a normal class not singleton, but i also have singleton based classes in other areas of the page which are loaded asynchronously via Ajax and so on...

At the beginning i call a self made function that is a chain of functions which each are attached to other functions, classes and variables declared within and out of my singleton Page-Class Construct (But all still on the same Document|Window). "Page is the actual name of the class".. So on

$(window).load();

i call 

Page.SetupPage();

• Loading some Cookies with md5 encrypted data (WORKS)
• Loading The Site Menu Bar via Ajax which contains : "the Site Menu which is getting its data from a DB", "the Search Panel(jQuery autocomplete) drop down menu", "the user panel and the shopping cart HTML Drop Down Menus" <-- (THE PROBLEM IS HERE), then turning it in to a smart menu Element with the jQuery smart menus Plugin.
• Loading The Pages Body in a Div Container which properties are set within the first step (WORKS)

THE PROBLEM:

If I'm trying to access a existing Div inside the MegaMenu HtmlDropDown Div inside the Smartmenu formated element, i am not able to build further elements in to that dropdown menu because I'm calling the userPanel at the beginning of the page, wich also had the same problem with my auto user recognition unless i call the API with 'itemActivate' a#mydiv, the plugin sets any other open mega menus CSS display properties to none

SO: I'm currently also including a second js script that has a singleton class named ShoppingCart which has a function named ShoppingCart()... If i call that on $(window).load() i get the json response object and can fill it into an array... but unless I'm not setting the css property of the shoppingCart DropDown UL Tag to "display" -> "block" i can't access the div inside that smartmenu html dropdown megamenu and append items to that div and further more: i cannot call the jScrollPane plugin at the end of the append inside the mega menu HTML drop down div wich i'm trying to access, because i use an other focus on a other menu button to make sure everything is loaded as it shoul!

THE FUNNY THING:

    $('#main-menu').smartmenus('itemActivate', $('a#shoppingPanel')); 
    $('#ShoppingCartDiv').css({ 'min-width' : 300, 'height' : 200 }).attr({ 'class' : 'scroll-pane' });
    $('#ShoppingCartDiv .jspContainer').css({ 'min-width'  : 300, 'height' : 200 });
    $('#ShoppingCartDiv .jspPane').css({ 'min-width'  : 300, 'height' : cartItems.length*64 });
    $('.scroll-pane').jScrollPane();
    $('#main-menu').smartmenus('enable', $('a#shoppingPanel'));

if I'm adding these lines inside the each append function of my "setShopingCartItems" function and afterwards calling the jScrollPane function, it works... but when i'm changing to another area which contains a scroll pane element, it breaks the scroll pane in the cart area...

Do you have any suggestions how to append and style elements without the display of the parent is set to block? Or how do i achieve that goal best and in a more cleaner way?

All Answers are appreciated! Thanks in advance!

*EDIT* Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1...

Answer 1

Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1... For whatever reason! CLOSED