(2012-12-09 10.33.09 PM)
Pop-Open Windows :: Chromeless Windows :: Close Windows
I use pop-up windows quite often when I design. Feedback forms, maps, photos, all kinds of ways to use 'em. They are very easy to do with GoLive Actions. Let's get started.
Step One - Pop-Up / Open Window Action $ Removing the Chrome
How does one go about opening up a new window at a specific size and without all the browser chrome? Well, this is what we're going to do.
First, make a link on your page by typing in some text and clicking the make-link button in the inspector. An empty reference warning will be placed in the link window. Normally this is where you tell your link to go.
For this however, we just want to add a # in the reference because we are going to tell it where the link is with the action in the next step. Note however the Target options. The Open Window Action does not automatically put these in for you so you will need to know how these work. For this example we will use the _blank option later. This is just to show what the options are.
OK, now with your link still highlighted, go to your actions pallet and do the following:
1) Select the Mouse Click Event. 2) Hit the New Action button. 3) Select the action we want by opening up the list in the Action menu. 4) Scroll down to Link and then find the Open Window Action. This is what we want. Should look like this:
Once selected, your action pallet will give you these options you see in the pic below. Here's how we do it; 1) Tell GoLive where your link is going to or what page you will be opening. 2) Remember how nicely this filled it in for you above? Not sure why we don't have the same option here. No big deal really but we want to tell our link to open in a new blank window so type in the _blank like I've done. 3) Now we tell GoLive what pixel size we want our new window. I've entered 400 x 400 for a square window. Adjust this to your needs. 4) Chrome. This is where you tell the browser what you want to have displayed in the new window. I always leave the resize checked just to give users the option to expand the window if they really want. Especially useful if you plan on disabling scroll bars and in case something goes wrong and all your content does not display, this gives the user some control. For this example, I knew I was going to have lots of text and I wanted the user to be able to scroll so I left this selected. See the settings in the pic below.
Test your new window to make sure it is working how you hope and thats it. If it does not work how you hoped, then your hopes were in vain!
OPEN WINDOW EXAMPLE
Step Two - Options, Options
There is another action for opening windows built into GoLive, found in the same place as the one we just looked at. This one is called Slide New Window. It sets up the exact same way but this one, when opened, animates the window sliding to the center of the screen. Kinda cool if not over used I think.
SLIDE WINDOW EXAMPLE
OK, that's nice but what if I just want to pop open a window and have it be centered, without all the sliding? Lucky for us there are a number of smart people that have made some great free actions for GL. Many of these actions can be found on the AdobeXchange site. For centering windows or having them open to full screen, I like the Window Inner Size Action by Michael Ahgren. This action can be found on his page here. Finally, if you really need some serious pop-window information, Michael Ahgren also has by far the most extensive examples page here.
OPEN CENTER EXAMPLE
OPEN FULL SCREEN EXAMPLE
Step Three - Close Window
Finally, if we are going to be popping up windows, we should make it easy for our guests to close those window. Again, very easy with this handy GoLive action. Use text or an image as the button by making it a link. Then, assign it the close window action like I've pictured below.
That's it. Simple but very useful!
Back to Tutorials Page
Or visit «sad.ark»
©Jeff Seal 2002