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

[kylewassink]

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

[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 <[email protected]

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.

[email protected]

On Mon, Jan 28, 2013 at 12:37 AM, Dominick Bellizzi <
[email protected]> 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.