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:
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.
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?
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:
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: http://actionsforge.com/actions/html5-block-link
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.
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:
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.
