Results 1 to 6 of 6

Thread: Nav button Z-index issue

  1. #1
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Nav button Z-index issue

    1) Script Title: Step Carousel Viewer v1.9

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

    3) Describe problem: Step carousel Nav buttons are ALWAYS visible even when content with a higher z-index overlaps them.

    http://devstaging.dewalt.com/pages/home.aspx

    There are some drop down menus that appear BEHIND the Previous and Next buttons in the step carousel. I checked the z-index of the elements via Firebug and it SEEMS like the menu should overlap the buttons but it doesn't. I even tried dynamically resetting the #siteNav div to a higher z order but no luck.

  2. #2
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I figured out that the reason the buttons are always on top of the z stack is that they are being appended to the body tag. I have tried appending them to other elements in my document ( header div, content div, the div that houses the step carousel itself but it screws up the positioning of the buttons

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

    Default

    OK, then make the menu a direct child of the body as well, move all of this:

    Code:
    <!-- begin cascading site menu -->
    <div id="siteNav" style="left: 50%; margin-left: -499px;">
        <ul id="navigation-1">
            
                    <li class="tools">
                        <a id="ctl00_ctl00_BodyContentPlaceHolder_ctlHeader_Dropdowns_rptTopLevelNodes_ctl00_lnkTopLevelNode"></a>
                        <a href="/tools.aspx">
                            TOOLS</a>
                        <div class="navigation-2 ">
                            <div c . . .
    
     . . .         </ul>
    
    
                            </div>
                        </div>
                    </li>
                
        </ul>
    </div>
    <!-- end cascading site menu -->
    To here and add the highlighted style as shown or put its rules in the stylesheet for that element:

    Code:
     . . .     </script>
    
        <!-- End SBD Global Google analytics tracking code -->
    <title>
    	DEWALT | Power Tools, Contractor Tools and Accessories
    </title></head>
    <body id="ctl00_ctl00_mybody">
        <!-- ClickTale Top part -->
        <script type="text/javascript">
            var WRInitTime = (new Date()).getTime();
        </script>
        <!-- ClickTale end of Top part -->
    <!-- begin cascading site menu -->
    <div id="siteNav" style="left: 50%; margin-left: -499px;">
        <ul id="navigation-1">
            
                    <li class="tools">
                        <a id="ctl00_ctl0 . . .
    Alternate Method:

    Or you can skip all that and just add this script as shown:

    Code:
        <!-- consolidated root.Master js -->
        <script type="text/javascript" src="../assets/js/rootMaster.js"></script>
        <script type="text/javascript">
    	jQuery(function($){
    		$('body').prepend($('#siteNav').css({left: '50%', marginLeft: -499}));
    	});
        </script>
        <!-- CSS: jQuery-UI: core + effects + theme -->
        <link type="text/css" href="../assets/lib/jquery-ui/jquery-ui-1.7.2.css" rel="stylesheet" />
    Last edited by jscheuer1; 11-16-2011 at 07:14 AM. Reason: add alternate method
    - John
    ________________________

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

  4. #4
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the suggestions but unfortunately I can't mess with the rest of the page structure as those are part of the .net master pages and would require I recheck every page in the site for conflicts. Is there a way I can disable the code that adds the default buttons and then add my own directly in the html and bind them to the stepBy function manually?

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

    Default

    Use the alternate method then:

    Quote Originally Posted by jscheuer1 View Post
    Alternate Method:

    Or you can skip all that and just add this script as shown:

    Code:
        <!-- consolidated root.Master js -->
        <script type="text/javascript" src="../assets/js/rootMaster.js"></script>
        <script type="text/javascript">
    	jQuery(function($){
    		$('body').prepend($('#siteNav').css({left: '50%', marginLeft: -499}));
    	});
        </script>
        <!-- CSS: jQuery-UI: core + effects + theme -->
        <link type="text/css" href="../assets/lib/jquery-ui/jquery-ui-1.7.2.css" rel="stylesheet" />
    It doesn't have to go right there, it can come anywhere after the:

    Code:
    <script type="text/javascript" src="../assets/js/rootMaster.js"></script>
    tag. Or its code (minus the opening and closing script tags) can go in an external script that executes after rootMaster.js

    There are no parts of the form or scripts in that section, so it should not harm the functioning of the page in any way.
    Last edited by jscheuer1; 11-16-2011 at 06:43 PM. Reason: add - There are no parts of . . .
    - John
    ________________________

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

  6. #6
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I just set the default buttons to enabled: false and added my own buttons. Thanks anyway!

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
  •