[Pro] Can a Form Button trigger overlay content?

I normally use Walter’s ScriptyLightBox3 (SLB3) Action applied to a graphic that when clicked displays content as an overlay (popover) on the same page. Here’s the action:

http://actionsforge.com/actions/scriptylightbox3

But I want to know how I can use a Form Button to accomplish the same as SLB3 applied to a graphic.

When using Form Buttons as links to new pages, I style them with CSS via HTML Markup, and then I manually apply the Class and Link in the Extended dialog as:

Name: class
Value: RoundBtn
Name: onclick
Value: window.location.href='http://www.mydomain.com/page.html';

That works great when I want to click a button and open a new web page. But what I want to do instead is click the button and make overlay content appear above the existing page. Again, the only way I’ve done that before is using ScriptyLightBox, but that doesn’t work on Form Buttons.

How do I accomplish my aim?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Still scratching my head on this.

I see that the SLB3 action generates the following page code:

<a href="OBD.html" data-border="#E7E7E7" data-size="1" data-radius="13" rel="600x390" class="popup"><img src="hv-2004.gif" border=0 width=71 height=57 alt="item4" style="float:left" title="">
</a>

It doesn’t seem to be possible for me to include all that inside my “window.location.href” value (in the extended dialog). So I am at a loss as to what to do.

While going through a Freeway document someone made for me in another thread, I see they created a button by sketching an HTML box and applying the “HTML5 element” action to it. But the “data-:” fields were not filled in, so I don’t know how to use such a button.

Again, all I want to do is create a button that when clicked will display overlay content above the existing page. The only way I know how to create overlay content is with Walter’s SLB3 action, but if there is another way, I am all ears. If I’m stuck with SLB3, then can someone please tell me how to create a button in Freeway that can trigger the overlay content?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Well, it seems that none of you know how to resolve my Form Button problem, so I’m now mulling a purely CSS button instead. Sadly, there are caveats to that kind of button too. Please see the following web page and Freeway document:

http://kiramek.com/21test95/FW7/CSS/

I’d appreciate hearing your ideas.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi James,

There’s an Action that Walter created that lets yo turn a regular HTML item into a link, something that’s now permitted in HTML5. Goes off to look Here it is: HTML5 Block Link - ActionsForge

That should solve your problem by making the whole item clickable.

There is another way, but that requires a bunch of custom CSS to make it work. You’d need to move the padding from the button to the link. The link’s display type would need to be block (it’s inline by default, since links are mostly used in text). You’d then need to make the width of the button slightly larger since it would now need to accommodate the extra padding.

Hope this helps!
Joe

On 27 May 2016, at 09:17, JDW email@hidden wrote:

Well, it seems that none of you know how to resolve my Form Button problem, so I’m now mulling a purely CSS button instead. Sadly, there are caveats to that kind of button too. Please see the following web page and Freeway document:

CSS Button Example

I’d appreciate hearing your ideas.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Well, it seems that none of you know how to resolve my Form Button problem

Not between 3:30 and 9:17 GMT

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thank you, Joe. And my apologies, Dave! :slight_smile:

So basically it is confirmed that a regular Form Button cannot be used as a ScriptyLightbox3 trigger, correct?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:

You could use the inline form of the SL3 Action, and then add some JavaScript to turn the Action-generated link (a) tag into a button or input tag. You could also just use a little CSS to turn <a class="popup">Text</a> into a button-looking thing. Really there’s no reason to use an input tag anywhere but inside a form. The button tag is semantically similar to an tag, but it shifts the meaning away from linking to something to causing an action to happen (as in the context of a Web application). It comes down to how you interpret the semantics of the SL3 Action. It is somewhat Web app-like, but it can also be seen as linking to content without navigating away to a different page. I’d say tomato, tomahto on that angle.

Maybe try this:

a.popup {
  display: inline-block;
  text-decoration: none;
  color: black;
  background-color: #eee;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 5px;
  box-shadow: inset 0 0 3px #999;
  font: 10px 'Lucida Grande', 'Lucida Sans Unicode', Lucida, sans-serif;
}

Note that this is also going to affect every other SL3 trigger element, even those that wrap around images, so if you have more links in your page that you don’t want to be affected, you will need to “scope” this rule so it only applies to the ones you want to look like buttons. If you have put this “button” in an HTML box, use the Name/ID of that box to make your rule more specific – change the a.popup part to #theBoxId a.popup, and then the rule will only affect the links inside that box.

Walter

On May 27, 2016, at 10:00 PM, JDW email@hidden wrote:

Thank you, Joe. And my apologies, Dave! :slight_smile:

So basically it is confirmed that a regular Form Button cannot be used as a ScriptyLightbox3 trigger, correct?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thank you, Walter.

I used a Form Button initially because I a very serious WYSIWYG guy. I like what I see in Freeway’s Page View to bear at least some resemblance to the Preview output. However, I get your point.

In the end, the solution to the ScriptyLightBox3 problem is, as you said, to use the “inline” version of that action inside an HTML box (or even inside a Table cell, for those who sometimes are naughty like me), styled with CSS inside the HTML Markup dialog, and with the appropriate “popup” class added to the Extended dialog. That solves my problem completely.

This thread has been a great learning experience. My humble thanks to all who so kindly made time to contribute.

Sincerely,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at: