Search code examples
jqueryoverlayz-indeximpromptu

Overlay Page but Exclude specific div - jQuery Impromptu

I am using jQuery impromptu to create an 'overlay tour' on my site. Here's the source page: http://trentrichardson.com/Impromptu/

I would like to change the z-index of a div so that when it is featured in the tour, it is placed ABOVE the overlay (or some other way so that the overlay does not apply to this div).

Here's a working example of my code (I would like the second list item placed above the overlay): http://jsfiddle.net/bTxng/2/

Solution

  • Under the same function you can use the .css method on li id & change the z index of that to 1000(according to your code), For example :

    $('#listitem2').css({'z-index':'1000'});

    where listitem2 is the id for your second list item.

    PS: Edit:

    try this in your CSS:

    li#impromptuVerticalNav {
  position: relative;
  z-index: 1000;
}

    if this works, Change 

    <a href="#" onClick="$.prompt(tourStates);">Take Tour</a>

    to 

    <a id="take-tour" href="#">Take Tour</a>

    then add this to the < head >< /head > section of your html.

    $(document).ready(function () {
  $('#take-tour').click(function() {
    $('#impromptuVerticalNav').css({'position':'relative', 'z-index':'1000'});
    $.prompt(tourStates);
  });
});