3

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/

adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • 2
    wow, impromptu is awesome. +1 for showing us that. – Kristian May 18 '12 at 16:43
  • That's a really good idea - if we can't come up with solution, I suggest you contact the developer and suggest it. That would be a great feature on an impressive plugin. – Surreal Dreams May 18 '12 at 16:51
  • I have it working in the fiddle... but when I apply the z-index and position:relative to my actual code, it does not work. http://jsfiddle.net/bTxng/4/ Any Ideas?? – adamdehaven May 18 '12 at 17:00

1 Answers1

1

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);
  });
});
Amyth
  • 32,527
  • 26
  • 93
  • 135
  • I'm not sure where you're telling me to add this... ? But when I change the z-index even inline on the page, it doesn't seem to do anything? – adamdehaven May 18 '12 at 18:28
  • also try setting the position to relative. See my answer. – Amyth May 18 '12 at 18:57
  • Setting the z-index on my actual site doesn't seem to do anything. Is there any explanation for that? – adamdehaven May 18 '12 at 19:02
  • Check the answer now. Also could you give me the link to your site, so that i could check. – Amyth May 18 '12 at 19:09
  • i am quiet sure it is to do with the positioning as z-index only works on positioned elements, Ex: (position:absolute, position:relative, or position:fixed) Refer to this : www.w3schools.com/cssref/pr_pos_z-index.asp – Amyth May 18 '12 at 19:14
  • I did your last edit, but still, changing the z-index doesn't do anything for me. And as for your last comment, if I'm telling it to be positioned (inline or with jQuery) shouldn't that take care of the positioning problem? – adamdehaven May 18 '12 at 19:14
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11440/discussion-between-adamdehaven-and-amyth) – adamdehaven May 18 '12 at 19:17