[Pro] Can Target Show Hide Layer be set to dim rest of browser window?

tonzodehoo · September 12, 2013, 3:46pm

I’ve been using Target Show/Hide layers and was wondering if it possible to have the action combine with something other action to fade out the backdrop to the layer which is triggered to give it more prominence?

Either fade, blur, or shadow the backdrop would be a nice option to have once the layer is triggered.

Thanks. Hope all are well on the forums

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · September 12, 2013, 3:47pm

Are you looking for a sort of lightbox effect, where the entire page dims to give the overlay more prominence? There are several of those Actions in the Forge.

Walter

On Sep 12, 2013, at 11:46 AM, tonzodehoo wrote:

I’ve been using Target Show/Hide layers and was wondering if it possible to have the action combine with something other action to fade out the backdrop to the layer which is triggered to give it more prominence?

Either fade, blur, or shadow the backdrop would be a nice option to have once the layer is triggered.

Thanks. Hope all are well on the forums

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tonzodehoo · September 12, 2013, 4:05pm

Hello Walter,

Indeed that is the effect I was looking for.
The only issue with the lightbox actions is that there doesn’t appear to be a means to control where the actual window appears in the browser window whereas with the Target show/hide the position can be better specified.

My first preference was to use the lightbox3 action which for centrally placing items is excellent.

Thanks for your speedy response.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · September 12, 2013, 4:27pm

Well, there’s one way to do this that I can think of off the top of my head. If you click on each of your Show/Hide elements and use the Item / Extended dialog to add a common classname to all of them, you could then create a function that checks over and over to see if any of them are visible, and then raises a cover element to fade the page. The only issue then would be how do you dismiss those elements, since that cover “sheet” would absorb any clicks on the page. What method are you currently using to dismiss your Target Show/Hide elements?

Walter

On Sep 12, 2013, at 12:05 PM, tonzodehoo wrote:

Hello Walter,

Indeed that is the effect I was looking for.
The only issue with the lightbox actions is that there doesn’t appear to be a means to control where the actual window appears in the browser window whereas with the Target show/hide the position can be better specified.

My first preference was to use the lightbox3 action which for centrally placing items is excellent.

Thanks for your speedy response.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tonzodehoo · September 12, 2013, 5:25pm

I got the setup from a file Delta Dave had set up for wireguy here:
http://www.deltadesign.co/downloads/forwireguy.zip

The close button within the target show/hide layer makes an easy option to use.

The classname idea seems like a possible solution. Its not an area I am strong in understanding of but I’m willing to give it a go if it works within the setup as per the example above.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · September 12, 2013, 6:08pm

Here, give this a try:

On each of your target layers, click once on the layer so the handles show, then choose Item / Extended from the main menu.
In the Extended dialog, make sure the
(not
) tab is selected, then click Add.
In the Name field, enter ‘class’ (without the quotes) and in the Value field, enter ‘hider’ (also without the quotes).
Repeat for each of the target boxes.
Apply Protaculous 2 to the page. Click on the DOM Loaded Observer button, and paste in the following code:

gist.github.com

https://gist.github.com/walterdavis/6541447

gistfile1.js

var hiders = $$('.hider').invoke('setStyle', 'z-index: 500');
var overlay = new Element('div');
overlay.setStyle({
  position: 'fixed', backgroundColor: 'rgba(0,0,0,0.7)',
  zIndex: '499', top:'0', left: '0', width: '100%',
  height: '100%', display: 'none'
});
$(document.body).insert(overlay);
setInterval(function(){
  var visible = hiders.any(function(el){

This file has been truncated. show original

What this does is look through your page for anything with the classname ‘hider’ applied to it, and vault those elements to the z-index 500 (so they are above all the other elements).

Note also that this means that this layout trick will not work in an inline layout, nor in one with the RPL Action applied to the page.

Next, it inserts a new “cover sheet” element, set to 70% black fill, at the z-index 499. This item is initially hidden.

Finally, it creates a tight timing loop. Every 10 milliseconds, it looks to see if there are any “hider” elements visible on the page. If there are, the overlay is shown. If there aren’t, then the overlay is hidden.

Walter

On Sep 12, 2013, at 1:25 PM, tonzodehoo wrote:

I got the setup from a file Delta Dave had set up for wireguy here:
http://www.deltadesign.co/downloads/forwireguy.zip

The close button within the target show/hide layer makes an easy option to use.

The classname idea seems like a possible solution. Its not an area I am strong in understanding of but I’m willing to give it a go if it works within the setup as per the example above.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options