SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Member adam_v's Avatar
    Join Date
    Feb 2005
    Location
    Ithaca, NY
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help: Visibility & Nested Divs

    Hi,

    I am building a custom set of menus generated using the spry framework for ajax for a client's website. The navigation occurs all in one page through a combination of ajax scripting and javascript/css to build layered, multiple level menus.

    here's a WIP version to get you acquatined

    http://www.adamvana.com/mdeas

    When you click the major tabs (profile/projects/features/contact), it opens up a menu in the negative space. From here, some of these menu items lead to submenus. The submenus load in the same area of the page. (in the WIP only the projects>buildings path works)

    The concept of the navigation is to remain static - that is I don't want the menus to disappear onmouseout or appear on mouseover - everything is done through clicks, as if it were separate pages, but it is really one page with xml generated dynamic content.


    Now, when you click a different menu I want all menu divs to be hidden except the chosen menu. However, I want to do this intelligently, without turning off every single div with a separate line of code.

    So i have the top level submenu divs nested within one "top level" div, and then the deeper level submenus are nested within their own divs. Then I want to hide these levels of divs all at once by hiding the outer div when I navigate to the other level.

    But for whatever reason when my script hides the outer div the inner divs stay visible.


    So I guess I am looking for a way to fix this so when you hide the outer div all the inner divs hide as well (i can't use inherit because they need to act on their own as well) I want to avoid this situation of manually hiding every individual div:

    Code:
      	<div class="nav1">
            <img 
            style="cursor:pointer" 
            src="images/nav_profile.jpg" 
            alt="PROFILE" 
            name="img_profile" 
            width="30" 
            height="100" 
            border="0" 
            id="profile" 
            onclick="
                swapImage('projects','','images/nav_projects.jpg',1);	
                swapImage('features','','images/nav_features.jpg',1);	
                swapImage('contact','','images/nav_contact.jpg',1);	
    			changeProp('m_profile','','visibility','visible','DIV'); 
                changeProp('m_projects','','visibility','hidden','DIV');
                changeProp('m_features','','visibility','hidden','DIV');
                changeProp('m_contact','','visibility','hidden','DIV');
                changeProp('m_commercial','','visibility','hidden','DIV');
                changeProp('m_institutional','','visibility','hidden','DIV');
    			changeProp('m_residential','','visibility','hidden','DIV');
    			changeProp('m_corporate','','visibility','hidden','DIV');
                changeProp('info_commercial','','visibility','hidden','DIV');
                changeProp('info_institutional','','visibility','hidden','DIV');
                changeProp('info_residential','','visibility','hidden','DIV');
                changeProp('info_corporate','','visibility','hidden','DIV');
                changeProp('info','','visibility','hidden','DIV');"
            onmouseover="
                swapImage('profile','','images/nav_profile_over.jpg',1)" 
            onmouseout="
                testRestore('m_profile')"
            />
    if you could recommend a way to script this simply it would be helpful

    -adam
    Last edited by adam_v; Aug 3, 2007 at 11:17.


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
  •