Pop-up windows - yup, I'm a Javascript newbie!

Numerous pop-up windows from one function...

[RosscoPK]

Hey All,

I'm really new to Javascripting and am hoping that this will be very simple to resolve....

I can make a pop-up window, simple enough, using the code below:

<script language="JavaScript">
<!--
function popup1()
{
window.open("popup_url.htm","page","toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resisable=no,width=450,height=400");
}
//-->
</script>

Then linking using <a href="javascript:popup1()" target="_self">

But what I'd really like to do is have a script where I could pass a variable so that I can have any number of pop-up windows running off just the one Javascript function, instead of having ten functions for ten pop-up windows.

I've looking at numerous examples via. Googling, but they all show bascially the example code I've given here.

Any help would be appreciated.

[BlobFisk]

Change the function to take in the url and the window name:

<script type="text/javascript">
function popup(url, title) {
window.open(url,title,"toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resisable=no,width=450,height=400");

This means that when you call the function you must supply it with 2 parameters, namely the URL and the title. (Also, language is deprecated and has been replaced with type).

Then, in your html:

<a href="link/to/page.html" onClick="popup('link/to/page.html','PageTitle'); return false" title="Link Title">..</a>

For accessibility reasons I have used onClick to launch the function, with return false overriding the default href action.

HTH

[Bernard Marx]

Here's one that will do just about anything for you.

It makes use of objects to hold, or modify your preferences, so once your have filled in the template, you don't have to put in the various properties into the function call as arguments, but you can easily change window size etc by various means.

It may take a little getting used to, and is bound to have a bug somewhere.
The only reason it's so long is that it allows you to specify more dynamic positioning, like 'center' (+ some debugging messages)

Try it.

..but change ¦ for proper pipes (shift \)

+------------------ popUp.js------------------------------+

// last arg optional
// 3rd arg optional if defaultTemplate exists
function popUp(url,name,modifier,template)
{
//-- magic numbers for nudging window position --+
var magicRight = -15
var magicBottom = -30 // 'availHeight' property is sometimes useless
//-----------------------------------------------+
 var props = ""
 var propsList = template ¦¦ popUp.defaultTemplate ¦¦ null
 
 // merge template with modifier
 if(modifier && propsList)
  for(var p in modifier)
   propsList[p] = modifier[p]
 
 // +--- dynamic positioning. Remove if not needed ----+
 if(propsList.position)
 {
  switch(propsList.position[0])
  {
   case 'left':
    propsList.left = 0;
    break
   case 'center':
    propsList.left = (screen.availWidth-propsList.width)/2
    break
   case 'right':
    propsList.left = screen.availWidth-propsList.width 
        + magicRight
    break
   // debug
   case 'bottom':
   case 'top':
    alert('Fn:popUp()\nLegal vertical position parameter,'
      +propsList.position[0]+'\nin horizontal position')
    break
   default:
    alert('Fn:popUp()\nUnknown left position parameter')
  }
  
  switch(propsList.position[1])
  {
   case 'top':
    propsList.top = 0;
    break
   case 'center':
    propsList.top = (screen.availHeight-propsList.height)/2
    break
   case 'bottom':
    propsList.top = screen.availHeight-propsList.height
        + magicBottom
    break
   case 'left':
   case 'right':
    alert('Fn:popUp()\nLegal horizontal position parameter,\n'
      +propsList.position[1]+'\nin vertical position')
    break
   // debug
   default:
    alert('fn:popUp()\nUnknown top position parameter')
  }
 }
 // +--- end dynamic positioning --------------------------------+
 
 for(var p in propsList)
 {
  props += (","+p+"="+propsList[p])
  //alert(props)
 }
 
 props = props.replace(",","")  
 var popW = window.open(url,name,props);
}
popUp.defaultTemplate =
{
 'position' :null, // ['left'¦'center'¦'right','top','center','bottom']
 'width'  :400,
 'height' :200,
 'left'  :400,
 'top'  :100,
 'status' :0,
 'toolbar' :0,
 'scrollbars':0, // 0¦1¦'auto'
 'resizable' :1 // no comma here 
}
// +-------------------- end script -----------------------+
// +--------- example modifiers and calls -----------------+
template2 =
{
 'position' :['left','center']
 'width'  :150,
 'height' :200,
 'status' :1,
 'toolbar' :0,
 'scrollbars':0, // 0¦1¦'auto'
 'resizable' :0 // no comma here 
}
mod1 = {width:150,height:300}
// calls
// Using default template
popUp('page1.htm','win1')
// Modifying default template
// with prepared modifier
popUp('page1.htm','win1',mod1)
// Modifying default template
// with literal modifier 
popUp('page1.htm','win1',{'position':['center','center'],width:400})
// Using modifier and different template
popUp('page1.htm','win1',mod1,template2)
// Modify template (for permanent change)
popUp.defaultTemplate.width = 500
// Swap template (and save the old one)
var oldTemplate = popUp.defaultTemplate
popUp.defaultTemplate = template2

[RosscoPK]

Fantastic - thanks for the help.