ScriptyLightbox2

joseph · March 31, 2011, 4:49pm

Is there a simple change (meaning a non-programmer) could do to remove the black borders from a modal window generated with ScriptyLightbox2?

Thanks, Joseph

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

waltd · March 31, 2011, 5:46pm

Sure. Create the following style (probably easiest to copy and paste
this into the Before /head portion of the Page / HTML Markup dialog):

<style type="text/css">
	.overlay {
		background-color: #fff !important;
	}
</style>

That’s going to give you a white background (so pick the color you
like and add it as a hex color). If you look at the CSS that the
Action creates in the head of your page, you may notice other things
you want to fiddle with. Using the !important keyword within the
definition of the rule will cause it to override the Action-generated
settings, even if those settings are inserted into the head of the
page after your hand-written rule. Usually it’s “Last Rule Wins”.

Walter

On Mar 31, 2011, at 12:49 PM, joseph wrote:

Is there a simple change (meaning a non-programmer) could do to
remove the black borders from a modal window generated with
ScriptyLightbox2?

Thanks, Joseph

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

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

joseph · March 31, 2011, 7:08pm

Thanks for your reply Walter.

Stupid question two: I’ve never looked at the code Freeway generates, how can I access it?

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

waltd · March 31, 2011, 7:26pm

If you have a programmer’s text editor, like the free and wonderful
TextWrangler from http://barebones.com then you can tell Freeway that
it’s a “browser”. Pull down the File menu to Preview in Browser, then
in the submenu, choose Browser Setup. In the resulting dialog, simply
add TextWrangler as if it was a browser. Now you can preview into TW
instead of Safari or Firefox.

Another, perhaps simpler way, is just to preview into your favorite
browser, then choose View / View Source from the main menu.

Either way, if you have your Document Setup / Output preferences set
to More Efficient, you will be confronted by a tortured mass of code
with very few line-breaks in it. Switch to More Readable and publish
again, and you will see something that at least makes some tiny
concession to your humanity.

Walter

On Mar 31, 2011, at 3:08 PM, joseph wrote:

Thanks for your reply Walter.

Stupid question two: I’ve never looked at the code Freeway
generates, how can I access it?

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

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

joseph · March 31, 2011, 11:41pm

Very cool. I found the HTML Mark Up option in the Freeway Page menu. I just pasted your code in and now the border’s white.

But what if I wanted to get rid of the border altogether? I think I can see the measurements in the code, but I have no idea how to access it. And even if I could, how would I get it back into Freeway?

Is there another action that can easily make a borderless modal?

Thanks,

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

waltd · March 31, 2011, 11:51pm

The borders are there to accommodate QuickTime movies when played in
the new QuickTime X plugin on Snow Leopard. There’s no other way to
get the movie to show up without cropping off its controller unless
you add those. Plus, they were kind of part of the aesthetic I wanted
for the Action. If you want to turn off all of the effects, you could
try changing the code you just pasted so that the inner part reads
like this: (you can leave the black background alone now, since it
won’t show once the image loads, and it’s the proper color to show off
the spinner while the image is loading)

-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
padding: 0px !important;

Don’t forget to put this inside the script tags, don’t just leave it
alone by itself in the HTML markup dialog.

Walter

On Mar 31, 2011, at 7:41 PM, joseph wrote:

Very cool. I found the HTML Mark Up option in the Freeway Page menu.
I just pasted your code in and now the border’s white.

But what if I wanted to get rid of the border altogether? I think I
can see the measurements in the code, but I have no idea how to
access it. And even if I could, how would I get it back into Freeway?

Is there another action that can easily make a borderless modal?

Thanks,

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

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

joseph · May 5, 2011, 6:02pm

Walter,

Two last questions regarding videos:

Is there a way to make mov files to rescale similar to what happens with jpegs?

Is there a way to make the video load without starting?

Thanks,

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

waltd · May 5, 2011, 6:12pm

On May 5, 2011, at 2:02 PM, joseph wrote:

Walter,

Two last questions regarding videos:

Is there a way to make mov files to rescale similar to what happens
with jpegs?

Not at this time.

Is there a way to make the video load without starting?

It shouldn’t do this. Could you please post a link? Also any details
about the computer where this happens – OS and version, QuickTime
version, etc.

Walter

Thanks,

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

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

Julio_C_Collazo · May 5, 2011, 6:20pm

Video must be render at the target screen size, QuickTime works great
in FW, at the inspector you can select video “control” to add
buttons “play, stop etc.”

On May 5, 2011, at 2:02 PM, joseph wrote:

Walter,

Two last questions regarding videos:

Is there a way to make mov files to rescale similar to what happens
with jpegs?

Is there a way to make the video load without starting?

Thanks,

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

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

joseph · May 5, 2011, 8:13pm

Not posted yet. (Should have it up this weekend.) I’m running Snow Leopard 10.6.7 with Quicktime Version 10.0 on a Aluminum Unibody MacBook 2.4 GHz Core Duo w/4G RAM. But I’ve QA’d on a couple of different Macs with the same result. On older machines the video will start running, sometimes just the audio, while the modal window is rendering. BTW, The videos are 640x, with an approximate 1300 bps framerate. If you have any thoughts now, that would be helpful.

Thanks,

Joseph

P.S. Can I access the inspector buttons for the modal that Julio describes or is that only for HTML pages?

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

waltd · May 5, 2011, 8:19pm

This will only work on a movie you place directly on the page in
Freeway, so not one that appears in a gallery style display like
ScriptyLightbox.

Walter

On May 5, 2011, at 4:13 PM, joseph wrote:

P.S. Can I access the inspector buttons for the modal that Julio
describes or is that only for HTML pages?

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

joseph · May 5, 2011, 8:29pm

Do the stats I gave give you any indication of why the videos might be auto running, or would you have to wait until I have a live site?

Joseph

On 5 May 2011, 8:19 pm, waltd wrote:

This will only work on a movie you place directly on the page in
Freeway, so not one that appears in a gallery style display like
ScriptyLightbox.

Walter

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

waltd · May 5, 2011, 8:41pm

No, I investigated further, and it appears that not only did I
remember wrong how it was supposed to work, I also forgot to add the
autoplay=“false” attribute to the QuickTime popup. It’s been added, so
download version 0.4 and see if that improves things for you.

Walter

On May 5, 2011, at 4:29 PM, joseph wrote:

Do the stats I gave give you any indication of why the videos might
be auto running, or would you have to wait until I have a live site?

Joseph

On 5 May 2011, 8:19 pm, waltd wrote:

This will only work on a movie you place directly on the page in
Freeway, so not one that appears in a gallery style display like
ScriptyLightbox.

Walter

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

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

joseph · May 6, 2011, 2:37am

Glad I could help. (grin)

Just so I have this straight, with version 0.4 the user will have to start the video, correct?

Thanks for all your help, Joseph

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

waltd · May 6, 2011, 10:47am

Yes. That’s what I thought the default was, so I didn’t set the value explicitly. But apparently that changed, so I have added the flag to the code so it’s belt-and-suspenders.

Walter

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

JDW · October 11, 2011, 4:41am

Walter, you suggested the following HTML markup code to change the color to white and to remove the borders:

<style type="text/css">
    .overlay {
        background-color: #fff !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        padding: 0px !important;
    }
</style>

Here are my questions:

How do I eliminate the background color altogether and make it transparent instead?
How can I make it so that I can click anywhere inside my graphic to make it vanish, rather than be forced to click the X in the upper left?
How can I prevent JPEG and GIF graphics from being scaled down when the browser window is too small? (I want my graphic to open up and be a fixed size, regardless of how small the browser window may be.)

With regard to my first two questions, here is an example web page (using a different script) that offers transparent backgrounds and click-to-close anywhere inside the object (click the block of icons that are below the big “735HB”):
http://kiramek.com/japanese/products/735.html

Thank you,

James Wages

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

waltd · October 11, 2011, 1:36pm

On Oct 11, 2011, at 12:41 AM, JDW wrote:

Walter, you suggested the following HTML markup code to change the color to white and to remove the borders:
<style type="text/css">
>    .overlay {
>        background-color: #fff !important;
>        -moz-border-radius: 0px !important;
>        -webkit-border-radius: 0px !important;
>        border-radius: 0px !important;
>        padding: 0px !important;
>    }
> </style>
Here are my questions:

How do I eliminate the background color altogether and make it transparent instead?

You can use the keyword ‘transparent’ instead of a color number or name. So background-color: transparent !important; should do the trick.

How can I make it so that I can click anywhere inside my graphic to make it vanish, rather than be forced to click the X in the upper left?

The reason why the Action works this way is because one of its big use-cases was QuickTime movies. Those you have to click on in order to control (start/stop/seek) so I needed a discrete close control.

If you want to force the other behavior, add the following rule to your style block:

#_closer { display:none !important; }

That gets rid of the close box.

Then add this through Protaculous (choose prototype-packed from the Library picker):

document.observe('click',function(evt){
	var elm;
	if(elm = evt.findElement('#_player'))
		elm.remove();
});
document.observe('touchstart',function(evt){
	var elm;
	if(elm = evt.findElement('#_player'))
		elm.remove();
});

I haven’t tested this, but it ought to work. All it’s doing is setting a handler to close the popup whenever it is clicked.

How can I prevent JPEG and GIF graphics from being scaled down when the browser window is too small? (I want my graphic to open up and be a fixed size, regardless of how small the browser window may be.)

If you remove this feature, there won’t be much of anything left to the Action. You could very easily use Spawn New Window or even target =“_blank” at this rate! I don’t see a way to remove this without fundamentally rewriting the Action. Plus, it would be a usability nightmare on the iPad.

Walter

With regard to my first two questions, here is an example web page (using a different script) that offers transparent backgrounds and click-to-close anywhere inside the object (click the block of icons that are below the big “735HB”):
SCIBORG® 735HB: CAN-BUS専用ハイブリッド・セキュリティ

Thank you,

James Wages

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

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

JDW · October 12, 2011, 5:27am

Thanks for the code tips, Walter.

The transparency code works perfectly. And the code to allow click-to-close anywhere in the open object works great too. Despite what you said, it actually does not eliminate the “X” close box in the upper left. But I am not bothered by that. I mainly wanted a dummy-proof way to close the zoomed object (people are sometimes too stupid to find a small close box).

At the end of your post, you suggested using Spawn New Window instead of your Action, in cases where I don’t want my graphic objects to be resized automatically. But that does not achieve what I want. I want to use your Action because it allows me to click on an object on my web page, and then your Action will zoom open a graphic of my choice which explains the object just clicked. I don’t want the zoomed object to look like a new window at all. I want the zoomed object to appear to be a part of the main page content, just floating above the page and with a drop shadow. I cannot achieve that effect with Spawn New Window (not that I know if anyway) but I can achieve that with your action. And since some of my objects contain text, I don’t want them to be scaled down such that the text is hard to read, which is why I was even concerned about down-scaling at all.

Thanks,

James Wages

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

David_McCallum · October 12, 2011, 5:30pm

I cannot achieve that effect with Spawn New Window (not that I know if anyway) but I can achieve that with your action.

You could use Target Show/Hide Layer and have any content you want in there.

David

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

JDW · October 12, 2011, 9:35pm

But, David, wouldn’t the use of Target Show/Hide Layer result in a large web page overall, versus the use of Walter’s Action?

As I said, I seek a drop shadow. To elegantly achieve that with Target Show/Hide Layer would dictate the use of a 24-bit PNG file. Depending on the dimensions of the graphic in question, the filesize could be rather large.

Further, there are issues pertaining to how to make that “pop-out” graphic go away. Walter’s Action offers a nice zoom effect similar to what you see here when you click on the icons:
http://kiramek.com/japanese/products/735.html

You won’t get the zoom effect in Target Show/Hide Layer, although one could use Fade, I suppose.

–James Wages

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