Trigger Show/Hide Layer

Freeway
1

Simple request -

The documentation does a great job of describing the Target Show/Hide action and how to apply it to a layer, but where in the documentation is there an explanation of how to trigger the action. I’ve gone through everything several times and I seem to have missed it. All I want to do is to click on an object to show a hidden layer.

Thanks

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

2

See if this helps

http://www.deltadesign.co/fw_examples/fwactions/rollover2.html

D

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

3

Very helpful.

Question 1:

What do I do if the object is a div? (an HTML5 animation within a markup item).

Question 2:

There are obviously things going on behind the scenes with the action but I assume that there is a string of some sort that I can use in the HTML5 animation to create a script that will hide/show a layer on the page.

How do I set up a boolean? (e.g., three buttons, three objects, any time one object is visible, the other two objects are hidden).

garbage code example:

onClick
if
visibility [objectOne] = true,
setVisibility [objectTwo] = false,
setVisibility [objectThree] = false,
endIf
endClick

Is there a simple way to do this in Freeway? (see cheap simulation at:
http://ohair.com/__Test/indexbtest.html (click on the green text link at the bottom)

Thanks,

TY

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

4

What do I do if the object is a div? (an HTML5 animation within a markup item).

Then you cant use the Action!

There are obviously things going on behind the scenes with the action but I assume that there is a string of some sort that I can use in the HTML5 animation to create a script that will hide/show a layer on the page.

Again I dont think that it is possible to get interaction between Hype and the Action.

How do I set up a boolean?

There are various settings in the Target Show/Hide Layer action for this ie Restore: Yes/No/Toggle/Sticky

D

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

5

Target Show/Hide Layer is designed to work on an HTML box (DIV) as well as any other layered content. You can set the trigger elements to be exclusive as you like. I forget the exact name, but fiddle around with Sticky and its friends in the Restore picker of the Rollover Action (which is what you will use to trigger the show/hide behavior).

But if the element is in the Hype animation, there is no way you can use those Actions.

If I were hand-coding it, I would follow the same technique I usually do (so as to end up with the least amount of code possible):

  1. Gather a reference to all of the elements.

  2. On any click, hide all of them, then show only the one I want.

    var ids = $w(‘one two three’);
    var layers = ids.map(function(i){ return $(i); }).invoke(‘hide’);
    layers.first().show();
    document.on(‘click’, ‘a[href*="#"]’, function(evt, elm){
    var id = elm.readAttribute(‘href’).split(’#’).last();
    if(ids.include(id)){
    evt.stop();
    layers.invoke(‘hide’);
    $(id).show();
    }
    });

I have an example posted: untitled

View source to see how it works.

Walter

On Feb 21, 2013, at 5:57 PM, Trey Yancy wrote:

Very helpful.

Question 1:

What do I do if the object is a div? (an HTML5 animation within a markup item).

Question 2:

There are obviously things going on behind the scenes with the action but I assume that there is a string of some sort that I can use in the HTML5 animation to create a script that will hide/show a layer on the page.

How do I set up a boolean? (e.g., three buttons, three objects, any time one object is visible, the other two objects are hidden).

garbage code example:

onClick
if
visibility [objectOne] = true,
setVisibility [objectTwo] = false,
setVisibility [objectThree] = false,
endIf
endClick

Is there a simple way to do this in Freeway? (see cheap simulation at:
http://ohair.com/__Test/indexbtest.html (click on the green text link at the bottom)

Thanks,

TY

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

6

Here’s a way to get the layers that isn’t quite so magical and hard to follow:

var layers = $$('#one, #two, #three').invoke('hide');

These functions rely on Prototype for their brevity and clarity. Use the Protaculous 2 Action to get that in your page and add the code in the DOM Loaded Observer dialog in that Action.

Walter

On Feb 21, 2013, at 7:31 PM, Walter Lee Davis wrote:

var layers = ids.map(function(i){ return $(i); }).invoke(‘hide’);

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