[Pro] Spawn New Window and _blank

Robert_B · March 9, 2011, 2:51pm

What’s the difference between using Spawn New Window and targeting the link to _blank other than the customizing of that new window with the action?

Is there any other reasons to use one over the other?

Thanks.

Bob

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

waltd · March 9, 2011, 3:04pm

SNW allows you to control the dimensions and position (and other options) of the resulting popup window. _blank does not. It also follows more closely to the rules of the road as defined by the W3C: HTML for structure, CSS for layout, JavaScript for behavior.

Furthermore, _blank cannot be used in a Strict DOCTYPE, only a Transitional one, while SNW will work anywhere. This may not matter to you at all, but it’s worth pointing out why the Target picker in the Hyperlink dialog may appear disabled in certain documents. Also, just to add further confusion, the latest version of SNW actually “falls back” to use _blank if JavaScript is disabled.

My personal opinion is this: you should not open a new window by default. Design your pages/application to work without new windows. Then, for added spice, layer on an unobtrusive window management system which can improve the site for those who have enabled JavaScript. This philosophy is known as “progressive enhancement” and its central tenet is that you should never lock anyone out if you can help it. By making your site work without new windows, you will often also make better choices about navigation and application flow, too. Constraints force you to work harder so your visitors don’t have to.

Walter

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

Robert_B · March 9, 2011, 3:13pm

Thanks, Walt.

When using a site, I almost always right-click and open in new window, but I see your point. We will have our basic navigation on these new pages, but they will be different than our main pages.

How do you go about making a “layer on an unobtrusive window management system”?

Bob

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

waltd · March 9, 2011, 5:02pm

The idea is that you decorate your links with additional data that describes the behavior you want. Some people use classes for this, I like to use the rel attribute. Freeway doesn’t write this by default, but you can add it using the Extended sub-dialog in the Hyperlink dialog. You would highlight your link text or select the graphic which holds your link, press Apple-K to open the Hyperlink dialog, press the Extended button, then New, and in the resulting sub-sub-sub dialog (can you tell I’m still angry about this “feature” of Freeway?), add the following:

Name: rel
Value: new_window,name:foo,width:400,height:200

If you wanted any more options in there, you could add them in the same manner, scrollbars:0,resizable:yes, etc. There’s a full list of the options you can tell the function at W3Schools: Window open() Method

Then you’d add the Protaculous Action to your page, and choose prototype-packed from the Library picker. Click on the top Function Body button, and paste in this:

gist.github.com

https://gist.github.com/walterdavis/862521

gistfile1.js

$$('a[rel^="new_window"]').invoke('observe','click',function(evt){
  evt.stop();
  var opts = this.rel.split(',').invoke('strip');
  opts.shift(); //get rid of new_window 
  var name = 'popup';
  opts.each(function(opt,idx){
    var pair = opt.split(':').invoke('strip');
    if (pair[0] == 'name'){
      name = pair[1];
      delete opts[idx];

This file has been truncated. show original

What this does is set up all links on your page that you have “decorated” with the extended rel attribute to spawn a new window, following the recipe you added to the links. The beautiful thing about this is that you don’t have to fuss with the links beyond adding the rel attribute. Any link that gets this treatment will be covered with this one blob of code. It’s called unobtrusive because you’re not littering your HTML with little islands of JavaScript, which is how SNW works. View source, and you’ll see onclick="whole bunch of javascript here" in each one of the links where you’ve applied it. The other point of unobtrusive scripting is that it can be safely ignored. Turn off JavaScript in your browser, and everything still works, it just doesn’t pop open a new window.

If you wanted all links on the same page to be exactly the same, behavior-wise, say to all pop open the same “daughter” window (re-use it if necessary) or all open to the same dimensions, then you could modify the defaults in this code so that all you’d need to do is add rel=“new_window” to your links and the script would do the rest.

Walter

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

Robert_B · March 9, 2011, 6:28pm

Thanks for all that info, Walter. Never knew there was that much to it.

I’ll try that out.

Bob

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

Fontfitter · March 14, 2011, 6:24pm

Walter,

I have FW Pro 5.4.3. When I do as you suggest:
Select text, Cmd K… Extended > New:
Name: rel
Value: new_window,name:foo,width:400,height:200
I can say OK to this Extended attributes dialog.

But the main ‘Edit Hyperlink’ dialog does not offer me an active OK button. Its always dimmed. So the rel/value is not stored.
Is there some step missing from these instructions?
I use a few pop-ups but would rather not, so this would be the ideal solution.

Thanks,
Adrian

On 9 Mar 2011, at 17:02, waltd wrote:

The idea is that you decorate your links with additional data that describes the behavior you want. Some people use classes for this, I like to use the rel attribute. Freeway doesn’t write this by default, but you can add it using the Extended sub-dialog in the Hyperlink dialog. You would highlight your link text or select the graphic which holds your link, press Apple-K to open the Hyperlink dialog, press the Extended button, then New, and in the resulting sub-sub-sub dialog (can you tell I’m still angry about this “feature” of Freeway?), add the following:

Name: rel

Value: new_window,name:foo,width:400,height:200

If you wanted any more options in there, you could add them in the same manner, scrollbars:0,resizable:yes, etc. There’s a full list of the options you can tell the function at W3Schools: Window open() Method

Then you’d add the Protaculous Action to your page, and choose prototype-packed from the Library picker. Click on the top Function Body button, and paste in this:

gist:862521 · GitHub

What this does is set up all links on your page that you have “decorated” with the extended rel attribute to spawn a new window, following the recipe you added to the links. The beautiful thing about this is that you don’t have to fuss with the links beyond adding the rel attribute. Any link that gets this treatment will be covered with this one blob of code. It’s called unobtrusive because you’re not littering your HTML with little islands of JavaScript, which is how SNW works. View source, and you’ll see onclick="whole bunch of javascript here" in each one of the links where you’ve applied it. The other point of unobtrusive scripting is that it can be safely ignored. Turn off JavaScript in your browser, and everything still works, it just doesn’t pop open a new window.

If you wanted all links on the same page to be exactly the same, behavior-wise, say to all pop open the same “daughter” window (re-use it if necessary) or all open to the same dimensions, then you could modify the defaults in this code so that all you’d need to do is add rel=“new_window” to your links and the script would do the rest.

Walter

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

waltd · March 14, 2011, 7:57pm

You also have to enter a link to your popup window’s content. So if
you have created that content as a page in your site, choose it from
the list of pages in the Hyperlink dialog. If you have created it
somewhere else, click on the External tab of the Hyperlink dialog and
type in the URL there.

Walter

On Mar 14, 2011, at 2:24 PM, Adrian Williams wrote:

Walter,

I have FW Pro 5.4.3. When I do as you suggest:
Select text, Cmd K… Extended > New:
Name: rel
Value: new_window,name:foo,width:400,height:200
I can say OK to this Extended attributes dialog.

But the main ‘Edit Hyperlink’ dialog does not offer me an active OK
button. Its always dimmed. So the rel/value is not stored.
Is there some step missing from these instructions?
I use a few pop-ups but would rather not, so this would be the ideal
solution.

Thanks,
Adrian

On 9 Mar 2011, at 17:02, waltd wrote:

The idea is that you decorate your links with additional data that
describes the behavior you want. Some people use classes for this,
I like to use the rel attribute. Freeway doesn’t write this by
default, but you can add it using the Extended sub-dialog in the
Hyperlink dialog. You would highlight your link text or select the
graphic which holds your link, press Apple-K to open the Hyperlink
dialog, press the Extended button, then New, and in the resulting
sub-sub-sub dialog (can you tell I’m still angry about this
“feature” of Freeway?), add the following:

Name: rel

Value: new_window,name:foo,width:400,height:200

If you wanted any more options in there, you could add them in the
same manner, scrollbars:0,resizable:yes, etc. There’s a full list
of the options you can tell the function at W3Schools: Window open() Method

Then you’d add the Protaculous Action to your page, and choose
prototype-packed from the Library picker. Click on the top Function
Body button, and paste in this:

gist:862521 · GitHub

What this does is set up all links on your page that you have
“decorated” with the extended rel attribute to spawn a new window,
following the recipe you added to the links. The beautiful thing
about this is that you don’t have to fuss with the links beyond
adding the rel attribute. Any link that gets this treatment will be
covered with this one blob of code. It’s called unobtrusive because
you’re not littering your HTML with little islands of JavaScript,
which is how SNW works. View source, and you’ll see onclick="whole bunch of javascript here" in each one of the links where you’ve
applied it. The other point of unobtrusive scripting is that it can
be safely ignored. Turn off JavaScript in your browser, and
everything still works, it just doesn’t pop open a new window.

If you wanted all links on the same page to be exactly the same,
behavior-wise, say to all pop open the same “daughter” window (re-
use it if necessary) or all open to the same dimensions, then you
could modify the defaults in this code so that all you’d need to do
is add rel=“new_window” to your links and the script would do the
rest.

Walter

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

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

Fontfitter · March 15, 2011, 11:21am

Hi,
I have three issues. Confused about the order in which things should be done.

I tried SNW and two windows open:
The page on which the action text is displayed.
The target page that pops up controlled by snw parameters.
How can I stop the parent page from opening as well as the target page?
I want to decorate the text with no underline.
Edit Hyperlink > Name: rel, Value new_window > OK
Isn’t this the same kinda thing that SNW does?

Thanks,
Adrian

On 9 Mar 2011, at 17:02, waltd wrote:

The idea is that you decorate your links with additional data that describes the behavior you want. Some people use classes for this, I like to use the rel attribute. Freeway doesn’t write this by default, but you can add it using the Extended sub-dialog in the Hyperlink dialog. You would highlight your link text or select the graphic which holds your link, press Apple-K to open the Hyperlink dialog, press the Extended button, then New, and in the resulting sub-sub-sub dialog (can you tell I’m still angry about this “feature” of Freeway?), add the following:

Name: rel

Value: new_window,name:foo,width:400,height:200

If you wanted any more options in there, you could add them in the same manner, scrollbars:0,resizable:yes, etc. There’s a full list of the options you can tell the function at W3Schools: Window open() Method

Then you’d add the Protaculous Action to your page, and choose prototype-packed from the Library picker. Click on the top Function Body button, and paste in this:

gist:862521 · GitHub

What this does is set up all links on your page that you have “decorated” with the extended rel attribute to spawn a new window, following the recipe you added to the links. The beautiful thing about this is that you don’t have to fuss with the links beyond adding the rel attribute. Any link that gets this treatment will be covered with this one blob of code. It’s called unobtrusive because you’re not littering your HTML with little islands of JavaScript, which is how SNW works. View source, and you’ll see onclick="whole bunch of javascript here" in each one of the links where you’ve applied it. The other point of unobtrusive scripting is that it can be safely ignored. Turn off JavaScript in your browser, and everything still works, it just doesn’t pop open a new window.

If you wanted all links on the same page to be exactly the same, behavior-wise, say to all pop open the same “daughter” window (re-use it if necessary) or all open to the same dimensions, then you could modify the defaults in this code so that all you’d need to do is add rel=“new_window” to your links and the script would do the rest.

Walter

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

waltd · March 15, 2011, 3:01pm

First, this is an either/or thing. Use SNW, or use my code and
Protaculous, but don’t use both.

Second, I can’t visualize or imagine what you mean by two windows
open. Can you post a link to an example?

Walter

On Mar 15, 2011, at 7:21 AM, Adrian Williams wrote:

Hi,
I have three issues. Confused about the order in which things should
be done.

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

Fontfitter · March 15, 2011, 5:16pm

OK. Only SNW in use. Styling the text is the issue…
http://www.clubtype.co.uk/form/snw.html

I can style the text by placing this in the HEAD…

A:link {text-decoration: none; color: gray} A:visited {text-decoration: none; color: gray} A:active {text-decoration: none; color: orange} A:hover {text-decoration: none; color: orange;} I use this method to globally style menus on the rest of the site... http://www.clubtype.co.uk/design/design.html Is there a way to style just that block of text? ~~~ The parent window issue seems to have gone away. It was as if the 'link page' checkbox (that I've seen somewhere) had been checked. ~~~ Adrian

On 15 Mar 2011, at 15:01, Walter Lee Davis wrote:

First, this is an either/or thing. Use SNW, or use my code and Protaculous, but don’t use both.

Second, I can’t visualize or imagine what you mean by two windows open. Can you post a link to an example?

Walter

On Mar 15, 2011, at 7:21 AM, Adrian Williams wrote:

Hi,
I have three issues. Confused about the order in which things should be done.

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

waltd · March 15, 2011, 5:25pm

As long as your links are not styled manually (by selecting the link
text and trying to color it somehow) then the link styles will be
defined on the parent element. If you’re inside an HTML box (with a
text cursor), click elsewhere, then click once on that HTML box. In
the Style tab of the Inspector, open up the Links segment and then
press the More button. You’ll have a very complete set of controls for
defining link styles.
On Mar 15, 2011, at 1:16 PM, Adrian Williams wrote:

OK. Only SNW in use. Styling the text is the issue…
http://www.clubtype.co.uk/form/snw.html

I can style the text by placing this in the HEAD…
A:link {text-decoration: none; color: gray} A:visited {text-decoration: none; color: gray} A:active {text-decoration: none; color: orange} A:hover {text-decoration: none; color: orange;}

Use the same method as outlined above, only click on the pasteboard so
that nothing is selected first – then you’re editing the global
styles, just as your hand-coded CSS does – and you have the fine-
grained control of the Style palette to work with. Plus, then you’ll
see your styles in the design view, rather than needing to switch over
to Preview to appreciate them.

Walter

I use this method to globally style menus on the rest of the site…
http://www.clubtype.co.uk/design/design.html
Is there a way to style just that block of text?
The parent window issue seems to have gone away. It was as if the  
'link page' checkbox (that I've seen somewhere) had been checked.
Adrian

On 15 Mar 2011, at 15:01, Walter Lee Davis wrote:

First, this is an either/or thing. Use SNW, or use my code and
Protaculous, but don’t use both.

Second, I can’t visualize or imagine what you mean by two windows
open. Can you post a link to an example?

Walter

On Mar 15, 2011, at 7:21 AM, Adrian Williams wrote:

Hi,
I have three issues. Confused about the order in which things
should be done.

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

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

Fontfitter · March 15, 2011, 6:14pm

Those pesky underlines are still there! Can’t find anything in Styles to change them.
Click on bounding box > Style Tab (Inspector) > Links > More…
active, hover, link, visited appear in list. “Select” allows editing of each, but nothing removes the underline.
Sooo, frustrating.
Do I need to click ‘Extended’ and add some other stuff?
Adrian

On 15 Mar 2011, at 17:25, Walter Lee Davis wrote:

As long as your links are not styled manually (by selecting the link text and trying to color it somehow) then the link styles will be defined on the parent element. If you’re inside an HTML box (with a text cursor), click elsewhere, then click once on that HTML box. In the Style tab of the Inspector, open up the Links segment and then press the More button. You’ll have a very complete set of controls for defining link styles.
On Mar 15, 2011, at 1:16 PM, Adrian Williams wrote:

OK. Only SNW in use. Styling the text is the issue…
http://www.clubtype.co.uk/form/snw.html

I can style the text by placing this in the HEAD…
A:link {text-decoration: none; color: gray} A:visited {text-decoration: none; color: gray} A:active {text-decoration: none; color: orange} A:hover {text-decoration: none; color: orange;}

Use the same method as outlined above, only click on the pasteboard so that nothing is selected first – then you’re editing the global styles, just as your hand-coded CSS does – and you have the fine-grained control of the Style palette to work with. Plus, then you’ll see your styles in the design view, rather than needing to switch over to Preview to appreciate them.

Walter
I use this method to globally style menus on the rest of the site…
http://www.clubtype.co.uk/design/design.html
Is there a way to style just that block of text?
The parent window issue seems to have gone away. It was as if the 'link page' checkbox (that I've seen somewhere) had been checked.
Adrian

On 15 Mar 2011, at 15:01, Walter Lee Davis wrote:

First, this is an either/or thing. Use SNW, or use my code and Protaculous, but don’t use both.

Second, I can’t visualize or imagine what you mean by two windows open. Can you post a link to an example?

Walter

On Mar 15, 2011, at 7:21 AM, Adrian Williams wrote:

Hi,
I have three issues. Confused about the order in which things should be done.

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
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

David_McCallum · March 15, 2011, 7:11pm

In the link styler in the inspector there is an underlined U at the right hand side of each Link State - clicking on the U will change its state - one click is underlining off. It is not easy to see the different button states and you are best to try it and then look at the link on the FW page.

David

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

Fontfitter · March 16, 2011, 8:20am

Got it. Thanks Dave!

On 15 Mar 2011, at 19:11, DeltaDave wrote:

In the link styler in the inspector there is an underlined U at the right hand side of each Link State - clicking on the U will change its state - one click is underlining off. It is not easy to see the different button states and you are best to try it and then look at the link on the FW page.

David

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

Trevor_Reaveley · March 16, 2011, 8:28am

I really wish Softpress would give the link styler ‘U’ more defined
changes when clicked - it keeps catching me out.
Trev

On 16 Mar 2011, at 08:20, Adrian Williams wrote:

Got it. Thanks Dave!

On 15 Mar 2011, at 19:11, DeltaDave wrote:

In the link styler in the inspector there is an underlined U at the
right hand side of each Link State - clicking on the U will change
its state - one click is underlining off. It is not easy to see the
different button states and you are best to try it and then look at
the link on the FW page.

David

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

Frank_H · March 18, 2011, 10:49pm

Hello,

I was very frustrated trying to hyperlink text in text boxes in a way that would not take viewers away from my page, and spent some time with SNW trying to do that, before looking in this forum. COOL!

Works great, Walter! An unexpected bonus (one of the pages is actually a web based PDF) is the Page Fit, Length Fit, Enlarge, Reduce - strip in the lower right of the page. Where did that come from?

When you have time, I have a few questions, no urgency.
You commented that

...same “daughter” window (re-use it if necessary) or all open to the same dimensions, then you could modify the defaults in this code so that all you’d need to do is add rel=”new_window” ...

I assume you mean the paste-into Protalculous code; is there an example - and can I change where windows open i.e. center of screen?

Also, at Window open() Method
some of the variables read as such,
left=pixels The left position of the window
Where would the equilavent of that be in the Protalculous?

Whenever…

Thanks Frank

On 9 Mar 2011, 1:52 pm, Robert B wrote:

What’s the difference between using Spawn New Window and targeting the link to _blank other than the customizing of that new window with the action?

Is there any other reasons to use one over the other?

Thanks.

Bob

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

waltd · March 21, 2011, 2:09pm

On Mar 18, 2011, at 6:49 PM, Frank H wrote:

Hello,

I was very frustrated trying to hyperlink text in text boxes in a
way that would not take viewers away from my page, and spent some
time with SNW trying to do that, before looking in this forum. COOL!

Works great, Walter! An unexpected bonus (one of the pages is
actually a web based PDF) is the Page Fit, Length Fit, Enlarge,
Reduce - strip in the lower right of the page. Where did that come
from?

Your browser has a plug-in installed for PDF viewing, either the Apple
Preview version or the Adobe Acrobat version. These controls are drawn
by the plug-in, and they will be different on other browsers and
operating systems. In some cases, you will find that an embedded PDF
does not work the way you see here, and instead forces a new window to
open in a helper application like Adobe Reader.

When you have time, I have a few questions, no urgency.
You commented that
...same “daughter” window (re-use it if necessary) or all open to  
the same dimensions, then you could modify the defaults in this code  
so that all you’d need to do is add rel=”new_window” ...
I assume you mean the paste-into Protalculous code; is there an
example - and can I change where windows open i.e. center of screen?

In the Protaculous code, all of these options are set using the rel
attribute on the link. So if you wanted your window to open 25px from
the left, you would add left:25 to the rel attribute, separated from
the other attributes by a comma. But if you wanted to modify this code
so that certain attributes were defaulted to sensible values, you
could then just leave them out of the attributes altogether. Here’s
one way to do this:

gist.github.com

https://gist.github.com/walterdavis/879485

gistfile1.js

$$('a[rel^="new_window"]').invoke('observe','click',function(evt){
  evt.stop();
  var opts = this.rel.split(',').invoke('strip');
  opts.shift(); //get rid of new_window
  var name = 'popup';
  var defaults = $w('left=25 top=25 width=400 height=300');
  opts.each(function(opt,idx){
    var pair = opt.split(':').invoke('strip');
    if (pair[0] == 'name'){
      name = pair[1];

This file has been truncated. show original

Line 6 sets up the defaults that you don’t want to type over and over.
Now if all you do is set rel=“new_window” and leave everything else
out of the rel, you will get a window that has the code for a window
named ‘popup’ that is 400 x 300 at 25,25 offsets from the top-left
corner of the screen.

If you want to center the popup window, you’ll need to do some math
and also delve into the vagaries of cross-browser scripting. While
Prototype has a nice abstraction of the window’s dimensions in its
document.viewport.getDimensions() call, it has no similar notion of
the screen.

Walter

Also, at Window open() Method
some of the variables read as such,
left=pixels The left position of the window
Where would the equilavent of that be in the Protalculous?

Whenever…

Thanks Frank

On 9 Mar 2011, 1:52 pm, Robert B wrote:

What’s the difference between using Spawn New Window and targeting
the link to _blank other than the customizing of that new window
with the action?

Is there any other reasons to use one over the other?

Thanks.

Bob

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