[Pro] Using HTML Item as Trigger

This might be near impossible with Freeway, but does anybody know how to use a HTML item (inline) as the trigger for a rollover?

Thanks in advance!


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

Can you explain a bit more about what you are trying to do.

David


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

I’m not sure what you’re trying to do, but you can apply a hover effect to an HTML item via CSS. Simply, div#idname:hover { attribute:value }


Ernie Simpson

On Sep 15, 2012, at 1:48 AM, “Caleb G” email@hidden wrote:

This might be near impossible with Freeway, but does anybody know how to use a HTML item (inline) as the trigger for a rollover?

Thanks in advance!


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

On 15 Sep 2012, 5:50 am, DeltaDave wrote:

Can you explain a bit more about what you are trying to do.

David

Sure. I want to use a html box as a trigger for a show/hide target actions. Much akin to what you see at subtlepatterns.com when you mouseover one of the patterns, except I want to use a html item as the trigger.


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

You can’t do that directly with Freeway, since you can’t apply an A (link) to a DIV (HTML layer). You could replace the Target Show/Hide and Rollover Actions with Protaculous and some hand-code, if you feel up to that. Please let me know and I’ll put something together for you.

Walter

On Sep 15, 2012, at 9:45 AM, Caleb G wrote:

On 15 Sep 2012, 5:50 am, DeltaDave wrote:

Can you explain a bit more about what you are trying to do.

David

Sure. I want to use a html box as a trigger for a show/hide target actions. Much akin to what you see at subtlepatterns.com when you mouseover one of the patterns, except I want to use a html item as the trigger.


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

Walter,

If you would be so kind, I would greatly appreciate it. I don’t have to have it on the site I’m building, but would love to know how for future reference.

Thanks!


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

Here you go:

http://scripty.walterdavisstudio.com/unobtrusive-target-show-hide

Freeway document is here:

http://scripty.walterdavisstudio.com/unobtrusive-target-show-hide/unobtrusive-target-show-hide.freeway.zip

Things to note:

  1. There are three custom styles, trigger, tooltip, and trigger.hover. These provide both the visual styling and the links needed by JavaScript to create the effect.

  2. The trigger elements are in the same layer order as the tooltips they relate to, and there are precisely as many of each. Without these two rules, there would need to be a lot more code and fiddly bits in the Freeway interface to tell the system which trigger refers to which tooltip.

  3. The Protaculous Action is applied to the page, and the magic code is in the top Function Body dialog in that Action. Be sure you have the latest version installed before you open this document. Here’s the code with comments added to explain what does what.

Hope this helps.

Walter

On Sep 15, 2012, at 12:11 PM, Caleb G wrote:

Walter,

If you would be so kind, I would greatly appreciate it. I don’t have to have it on the site I’m building, but would love to know how for future reference.

Thanks!


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

Walter,

W-O-W. You are amazing.

I do have one question: how does it link to the right trigger to the right tool-tip? It seems as though it must be reading my mind. :smiley:


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

As I mentioned in my earlier e-mail, it uses the source order of the page (which translates in Freeway from the stacking order of the layers). So if you create 4 tooltips, stacked from bottom to top as 1-4, and you create four trigger elements, similarly stacked, then the two arrays are populated in the same order when the page loads. Since Freeway keeps the order based on when you created the elements (newer elements above older), then as long as you created the boxes in order, this script will be able to read your mind.

To translate the script:

$$('.tooltip')

means

Starting from the top of the page "tree", find all
elements with the class attribute including 'tooltip'
and store them in an array.

Since arrays have a defined order, and that order never changes after it was created, then when we next run through:

$$('.trigger')

we are doing the exact same thing with a different classname, and get another array of elements also in source order. As long as the two groups of elements are in the same source order (first to last or last to first, makes no difference, and there can be intermediate elements as well) then the trick will Just Work(™).

Walter

On Sep 17, 2012, at 1:20 PM, Caleb G wrote:

Walter,

W-O-W. You are amazing.

I do have one question: how does it link to the right trigger to the right tool-tip? It seems as though it must be reading my mind. :smiley:


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