[thelist] Window opening preference javascript

jeff jeff at members.evolt.org
Fri Dec 15 22:00:44 CST 2000


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





More information about the thelist mailing list