[thelist] Window opening preference javascript

Jacob Stetser lists at icongarden.com
Sat Dec 16 08:49:43 CST 2000


Jeff,

This is great stuff. Actually, preferably better than just finding 
someone else's because it's simple and along the way you taught me 
how to do it.

I've actually modified the code to write a cookie that stores your 
choice. Then when you go to new pages on the site, your preference is 
automatically remembered!

Now to go do some testing...

Jake

p.s. stuff like this is why I love being part of evolt.

>jacob,
>
>:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>: From: Jacob Stetser
>:
>: Does anyone have (or know where I can find) code
>: for the javascript that lets you choose whether you
>: open links in the existing window, one new window,
>: or new windows for each link?
>:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>
>how about we just write one?
>
>let's think of some possible solutions.
>
>we could add an onClick event handler to every link on the page that you
>want this functionality attached to and then call a function that would
>determine what to do based on which option was checked (same window, new
>window for all, or new window for each).
>
>or, better yet, we could just alter the value of the target attribute for
>every link in the page.  we don't want to affect the behavior of onsite
>links though so we'll have to take that into account when we do this.
>
>so, this is going to happen when you select one of the choices.  for
>simplicity let's make them a group of radio buttons.
>
>[<input
>    type="radio"
>    name="target"
>    id="target_self"
>    value="_self"
>    tabindex="1"
>    title="Open links in this window"
>    onClick="setTarget(this.value)"
>    checked
>>  <label
>    for="target_self"
>    accesskey="s"
>    title="Open links in this window"
>><u>S</u>elf</label>]
>
>[<input
>    type="radio"
>    name="target"
>    id="target_same"
>    value="_same"
>    tabindex="2"
>    title="Open links in the same new window"
>    onClick="setTarget(this.value)"
>>  <label
>    for="target_same"
>    accesskey="a"
>    title="Open links in same new window"
>>S<u>a</u>me</label>]
>
>[<input
>    type="radio"
>    name="target"
>    id="target_new"
>    value="_new"
>    tabindex="3"
>    title="Open links in a new window"
>    onClick="setTarget(this.value)"
>>  <label
>    for="target_self"
>    accesskey="n"
>    title="Open links in a new window"
>><u>N</u>ew</label>]
>
>
>now, we're going to need to write that function we're referencing in the
>onClick event handler of the radio buttons.  put this in the head of your
>document:
>
><script language="JavaScript" type="text/javascript">
><!--
>   function setTarget(target)
>   {
>     for(a = 0; a < document.links.length; a++)
>     {
>       document.links[a].target = target;
>     }
>   }
>// -->
></script>
>
>
>there's one icky side-effect to this though.  all the links on the page will
>now be targetted the same.  we need to come up with some sort of method to
>only set the target of certain links.  the solution is to give each link you
>want to be affected by this the same value for the name attribute.
>
><a
>   href="http://www.evolt.org/"
>   name="target"
>>evolt.org</a>
>
><a
>   href="http://www.slashdot.org/"
>   name="target"
>>/.</a>
>
><a
>   href="http://www.microsoft.com/"
>   name="target"
>>Microsoft</a>
>
><a
>   href="links_2.html"
>>Page 2</a>
>
>now, we'll need to modify our setTarget() function slightly to only change
>the targets of those links that have a name of "target".
>
><script language="JavaScript" type="text/javascript">
><!--
>   function setTarget(target)
>   {
>     for(a = 0; a < document.links.length; a++)
>     {
>       if(document.links[a].name == 'target')
>         document.links[a].target = target;
>     }
>   }
>// -->
></script>
>
>if you wanted to get really creative and have different groups of radio
>buttons change the target for different groups of links you could pass in
>the value of the name attribute you were changing the targets for.
>
>you'd change the call to the setTarget() function in your radio buttons'
>onClick event handler to look like this:
>
>setTarget(this.value, 'myLinks')
>
>and then have some links with a name value of "myLinks".
>
>your new setTarget() function would look like this:
>
><script language="JavaScript" type="text/javascript">
><!--
>   function setTarget(target, name)
>   {
>     for(a = 0; a < document.links.length; a++)
>     {
>       if(document.links[a].name == name)
>         document.links[a].target = target;
>     }
>   }
>// -->
></script>
>
>or, if, in addition, you wanted to have a set of radio buttons that
>controlled *all* the links targets, you'd call it like this from your radio
>buttons' onClick event handler for those radio buttons that you wanted to
>control all the links:
>
>setTarget(this.value, null)
>
>you'd still use the call in the previous example for those radio buttons
>that controlled only certain links.
>
>then you'd modify your setTargets() function to check whether or not the
>value of the name argument is null and if so change everything.  this new
>function would look like this:
>
><script language="JavaScript" type="text/javascript">
><!--
>   function setTarget(target, name)
>   {
>     for(a = 0; a < document.links.length; a++)
>     {
>       if(name == null || document.links[a].name == name)
>         document.links[a].target = target;
>     }
>   }
>// -->
></script>
>
>don't forget that each set of radio buttons must be within <form> tags or
>they won't show up for netscape users.
>
>have fun,
>
>.jeff
>
>name://jeff.howden
>game://web.development
>http://www.evolt.org/
>mailto:jeff at members.evolt.org
>
>
>---------------------------------------
>For unsubscribe and other options, including
>the Tip Harvester and archive of TheList go to:
>http://lists.evolt.org Workers of the Web, evolt !

-- 
=================================================
Appreciation is a wonderful thing; it makes what is excellent in others
belong to us as well. -Voltaire, philosopher, historian, satirist,
dramatist, and essayist (1694-1778)
=================================================
   icongarden.com || littleblueeasy.com :: emailme at icongarden.com
=================================================




More information about the thelist mailing list