Two issues when attaching to elements nested in fixed div's #69

kylewassink opened this Issue Jun 19, 2012 · 11 comments


None yet

4 participants


Elements nested within a fixed element can have guiders attached to them no problem, the "bubble" shows up where it should (at first). Under the following two conditions, however, I ran into a few snags. Solved the second (mentioned here as more of a note in case others have the same issue), but the first is still causing problems.

1) If 'overlay = true' and 'highlight=[insert selector for element nested in fixed div]', the element inside of a fixed element is not highlighted at all and remains inaccessible/darkened behind the guider_overlay div. I have ruled out spelling mistakes (sounds dumb, but it happens). Making the child element any other position style does not resolve the issue. The only solution I found was to change the parent element's position to something other than fixed, which is a problem in my particular situation as the page header needs to be fixed.

2) If the page is large enough to require scrolling, the guider does not stay fixed with the nested element (which also remains fixed on the page), it scrolls up with the page. I was unable to get the 'useFixedPosition' feature (mentioned in a resolved issue) to work, couldn't find it in the documentation or .js file either. Solution that worked? Explicitly state the position of the nested element as fixed. Fixed the scrolling problem, but not the aforementioned one.


Regarding number 1, the highlight code uses z-index to "pop" the element through the overlay. Unfortunately, z-index is scoped to the closest "positioned" element (absolute, fixed, relative), so it will never move out of the scope of that element. If you aren't highlighting the positioned element itself, a sub element won't come through the overlay.

I wrote a different highlighting function that uses masking instead of z-index to work around this limitation:


@dbellizzi Could you briefly explain how to use jquery-mask with guiders as I'm having a lot of trouble.

I don't really understand that the container's role is in $(container).mask(selector). Should it be the #guiders_overlay or what?

Basically what I'm trying to do is to mask the element that the guider attaches to when it opens. It doesn't seem to work no matter what I do. Any help would be appreciated?

    attachTo: '#gen-job-docket'
    position: 6
    overlay: true
    title: 'Some title'
    description: 'To do some stuff, read this.'
    buttons: [{
      name: 'Okay, got it'
      onclick: -> doSomething()
    onShow: ->

You might have them reversed. If you do: $('body').mask('#gen-job-docket') it will hide all of "body" and allow "#gen-job-docket" to show through. Container is the outer container, nothing outside that will be touched, everything inside there will be hidden except for the stuff listed inside mask().


And just to show you how I used it with Guiders-JS, I changed the default behavior of highlighting:

  guiders._highlightElement = function(selector) {

  guiders._dehighlightElement = function(selector) {

@dbellizzi How reliable is I am working on a major version upgrade to guiders.js and am considering using jquery mask by default.


(This would introduce a dependency though... something I have so far avoided, other than depending on jQuery.)


For example, in my testing with Google Chrome, I find calling mask adds a scroll bar to the window. I'm looking for a good solution to make highlighting more consistent.


We're using it with Guiders-JS in production at, and we haven't had any problems with it, but I haven't heard of anyone else using it. I don't see the Chrome scrollbar issue, but I'm happy to debug it. Do you have a test page that shows the problem that you can send me?


You don't need an overlay div, and if you include it, it is on top of everything, so I would get rid of that first. Next, you need to adjust the overlay style to apply to the "mask" class, or just use the one that I've been using, since it doesn't require the positioning items:

.mask {
z-index: 500000;
position: absolute;
background-color: #000;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

I wasn't able to see any scrollbars in Chrome though. I'm running the latest chrome 24 on Windows 7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment