Nav button Z-index issue

**rsauchuck** · 11-15-2011, 03:55 PM

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.

**rsauchuck** · 11-15-2011, 09:49 PM

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

**jscheuer1** · 11-16-2011, 06:50 AM

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" />

**rsauchuck** · 11-16-2011, 04:52 PM

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?

**jscheuer1** · 11-16-2011, 06:25 PM

Use the alternate method then:

Originally Posted by jscheuer1

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.

**rsauchuck** · 11-16-2011, 07:54 PM

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

Thread: Nav button Z-index issue

Thread Tools

Search Thread

Nav button Z-index issue

Bookmarks

Bookmarks

Posting Permissions