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

[kylewassink]

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.

[dbellizzi]

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: https://github.com/dbellizzi/jquery-mask

[dtuite]

@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?

  jobDocket:
    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: ->
      $('#guiders_overlay').mask(@attachTo)

[dbellizzi]

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().

[dbellizzi]

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

  guiders._highlightElement = function(selector) {
    $(document).mask(selector);
  };

  guiders._dehighlightElement = function(selector) {
    $(document).mask(false);
  };

[pickhardt]

@dbellizzi How reliable is https://github.com/dbellizzi/jquery-mask? I am working on a major version upgrade to guiders.js and am considering using jquery mask by default.

[pickhardt]

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

[pickhardt]

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.

[dbellizzi]

We're using it with Guiders-JS in production at Wikispaces.com, 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?

[pickhardt]

Maybe I'm not using it right? Here is some test code that doesn't show the
#div1 over the overlay, and causes Chrome to have horizontal and vertical
scroll bars.

<style type="text/css"> body { margin: 0; padding: 0; } #div1 { border: 2px solid red; width: 400px; } #overlay { background-color: #000; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); z-index: 800001; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-mask.js"></script>

My div here

<script type="text/javascript"> $("body").mask("#div1") </script>

On Sun, Jan 27, 2013 at 8:01 PM, Dominick Bellizzi <notifications@github.com

wrote:

We're using it with Guiders-JS in production at Wikispaces.com, 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?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-12767941.

[dbellizzi]

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.

[pickhardt]

Great, I get it now -- when I use it right! It's very cool. I didn't
realize what the mask was at first, because your readme says it's "Useful
for pulling elements up through an overlay"... I just assumed I would have
an overlay. If I were you, I'd add a png showing visually that multiple
new divs with the mask class are going to be built around your elements,
instead of an overlay.

I'm planning to add optional support for this in guiders.js. What I'm
going to do is something like:

if ($.mask) {
$("body").mask(myGuider);
} else {
// show overlay
}

Then I'm going to mention it in the docs as an optional plug in instead of
the overlay.

pickhardt@gmail.com

On Mon, Jan 28, 2013 at 12:37 AM, Dominick Bellizzi <
notifications@github.com> wrote:

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.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-12772422.