[Author Prev][Author Next][Thread Prev][Thread Next]
[Author Index (this month)][Thread Index (this month)][Top of Archive]

Re: HTML pop-ups?

Subject: Re: HTML pop-ups?
From: Raymond Chenier <rchenier -at- SYNAPSE -dot- NET>
Date: Tue, 31 Dec 1996 16:20:57 -0500

> Holiday Greetings!
> Does anyone know if there is a way to make a link on an HTML page open a
> separate, floating window (like it would if it were a pop-up in Winhelp)?
> Or is the only option to go to a separate page and then press Back to get
> back to the originating page? Basically, I'm wondering if you could
> define the size of the browser window that opens when a link is clicked.
> Thanks in advance,

Greetings back.

The example below is obviously overkill, but it does show you the immense
power at your fingertips with Javascript. Open the code below in a browser
and play. There is a snippet of Javascript (somewhere in my mess!) that
simply opens a popup. Let me know if you want it. It is available somwhere
from a winhelp resource page also.

All the best!

--------------------------------------
sample-- cut and save into a file named xyz.html
-------------------------------------

<HTML>
<HEAD><TITLE>Guide to Generating Windows</TITLE>

<SCRIPT LANGUAGE="Javascript">


<!-- Hide code from browsers
/******************************************************
* This script and all referencing pages were *
* developed by *
* Andy Augustine -- 2.13.96 *
* Frequency Graphics *
* http://www.his.com/~smithers/freq/ *
* *
* PERMISSION TO USE, COPY, AND DISTRIBUTE THIS *
* MATERIAL WITHOUT FEE MAY BE DONE SOLEY IF THIS *
* HEADER INFORMATION IS KEPT IN TACT *
* *
* Copyright (c) 1996 Frequency Graphics Inc. *
* All Rights Reserved. *
* *
*****************************************************/

var myWinOpts = new winOpts(0,0,0,1,0,1,0,0,300,200)
var myWin = new winObj('example.html','newWin',myWinOpts)

function winOpts(tb,loc,dir,st,mb,scb,rs,ch,w,h) {
this.tb = tb //toolbars
this.loc = loc //loacation
this.dir = dir //directories
this.st = st //status
this.mb = mb //menubar
this.scb = scb //scrollbars
this.rs = rs //resizable
this.ch = ch //copyhistory
this.w = w //width
this.h = h //height
this.list = 'toolbar=' + this.tb
+ ',location=' + this.loc
+ ',directories=' + this.dir
+ ',status=' + this.st
+ ',menubar=' + this.mb
+ ',scrollbars=' + this.scb
+ ',resizable=' + this.rs
+ ',copyhistory=' + this.ch
+ ',width=' + this.w
+ ',height=' + this.h
this.makeOptsList = makeOptsList


function makeOptsList() {
this.list = 'toolbar=' + this.tb
+ ',location=' + this.loc
+ ',directories=' + this.dir
+ ',status=' + this.st
+ ',menubar=' + this.mb
+ ',scrollbars=' + this.scb
+ ',resizable=' + this.rs
+ ',copyhistory=' + this.ch
+ ',width=' + this.w
+ ',height=' + this.h


function update(field) {
//
// Should this be a function for winOpts instead of myWin??
//
var prop=field.name
if (prop=='w' || prop=='h')
this.winOpts[prop] = field.value
else {
// alert('myWin.winOpts.'+prop+'=
'+this.winOpts[prop]+'\n'+prop+'='+(0+field.checked))
if (field.checked)
this.winOpts[prop] = field.value
else
this.winOpts[prop] = 0 + !field.value
} //end else
// alert('myWin.' + prop + '= ' + this.winOpts[prop])


function checkOpen() {
// alert(this.created)
if (this.created) {
var warning = 'That window is already open!\n'
+ '(It may just be hidden behind the current window)\n'
+ 'You must close it before re-opening.'
alert(warning)
// if (confirm(warning)) {
//alert('You selected yes')
// this.doClose()
// this.doOpen()
// }
}
else this.doOpen()


function doOpen() {
this.winOpts.makeOptsList() //should this be a function of myWin
//instead of myWin.winOpts????
//alert('window.open('+ this.url +','+ this.name +','+ this.winOpts.list
+')')
this.myRealWin = window.open('',this.name,this.winOpts.list)
//alert('Opening new window')
this.myRealWin = window.open(this.url,this.name) //fix for macs
// this.myRealWin.location = this.url
this.myRealWin.creator = self
this.created = 1


function doClose() {
// This is broken.
// It always works when called from CLOSE BUTTON,
// but only every other call from checkOpen will close the window!?!?
// I tried to call this.myRealWin.close() twice but didn't change effect

this.myRealWin.close()
//this.myRealWin = null

//this.myRealWin.close()
//
//Tried to test for existance of open window with the following but it will
//never be null because its been created as an object in my SCRIPT.
//How could I modify this to work??
//I'm using myWin.created as a flag (1=open/0=closed), but it doesn't really
//test for window existance.
//NOTE: if the user closes the window using their GUI instead of the close
//button, the this.created will be WRONG!
//
if (this.myRealWin == null)
alert('The window was successfully closed.\nClick to continue. . .')
this.created = 0


function showSource() {
var sourceWinOpts = new winOpts(0,0,0,1,1,1,0,0,700,100)
var sourceWin = new winObj('','sourceWin',sourceWinOpts)
sourceWin.doOpen()
// Tried to do a with(sourceWin) {...}
// but it still wrote to the current window?
sourceWin.myRealWin.defaultStatus = 'Copy and Paste this into your own
Web Page'
sourceWin.myRealWin.document.write('<HTML><BODY BGCOLOR="#FFFFFF"><PRE>')
sourceWin.myRealWin.document.write("var newWinObj = window.open('")
sourceWin.myRealWin.document.write(this.url +"','")
sourceWin.myRealWin.document.write(this.name + "',<BR> '")
sourceWin.myRealWin.document.write(this.winOpts.list + "')<BR>")
sourceWin.myRealWin.document.write("newWinObj = window.open('")
sourceWin.myRealWin.document.write(this.url +"','")
sourceWin.myRealWin.document.write(this.name + "')")
sourceWin.myRealWin.document.write(' //REDUNDANT CALL TO FIX MAC BUG')
sourceWin.myRealWin.document.write('</PRE></BODY></HTML>')
sourceWin.myRealWin.document.close()


function winObj(url,name,winOpts) {
// properties
this.url = url // URL for new window
this.name = name // name for new window
this.winOpts = winOpts // string of window options
this.created = 0 // 1:its open already / 0:ok to open
this.myRealWin = Object // hold obj of window thats created
this.creator = self // hold obj of window that created this
// methods
this.update = update // refresh this.list
this.checkOpen = checkOpen // check (if exist ?close()open() :open())
this.doOpen = doOpen // open
this.doClose = doClose // close
this.showSource = showSource // make window & show Javascript source


function save() {
// document.persistent.data.value='test'
document.persistent.data.value=myWin.myRealWin


function check() {
alert(document.persistent.data.value)
alert(dumpProps(myWin.myRealWin,'myWin.myRealWin'))


function load() {
myWin.myRealWin = eval('document.persistent.data.value')
alert(document.persistent.data.value)
// myWin.myRealWin=document.persistent.data.value



function dumpProps(obj,obj_name) {
var result = "", i =""
for (i in obj)
result += obj_name +"."+ i +" = "+ obj[i] +"\n"
return result


function isNum(entry) {
var str = entry.value;
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.') {
alert("You must enter a number.")
entry.focus()
entry.select()
return false
}
}
return true


// DONE HIDING -->


</SCRIPT>
</HEAD>

<BODY
link=abFFaa

alink=ab6599

vlink=FFFFEE

BGCOLOR="#000000"
TEXT="#ffffff">
<CENTER>
<FONT SIZE="+4" COLOR=yellow><B>JavaScript 411</B></FONT>
<BR><FONT SIZE="+3">=Generating Windows=</FONT>
</CENTER><P>
<FONT SIZE="+2">Opening and closing a window</FONT>
<BR>
Use this form to modify the Options for a new window. Everything works
(I think) except every other click on 'Open New Window' fails
to work if a window is already open. (IOW make sure you
use the 'Close New Window' button unless your helping me debug).
Try it a few times and then look at my code.

<P>If you want to see the <I>exact</I> Javascript that was used to open
your customized window, click the '<B>How did I do that?</B>' button.
But most importantly, VIEW THE SOURCE.

<P><FONT SIZE="-1">NOTE: If you cannot see the checkboxes below due to the
black background, use our <A HREF="window_white.html">alternative
layout</a>.</FONT>

<CENTER><TABLE><FORM NAME="winForm">
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="tb"
VALUE=1 onClick="myWin.update(this)">Toolbar<BR>
<TD>
<INPUT TYPE="checkbox" NAME="loc"
VALUE=1 onClick="myWin.update(this)">Location<BR>
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="dir"
VALUE=1 onClick="myWin.update(this)">Directories<BR>
<TD>
<INPUT TYPE="checkbox" NAME="st"
VALUE=1 onClick="myWin.update(this)" CHECKED>Status<BR>
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="mb"
VALUE=1 onClick="myWin.update(this)">Menubar<BR>
<TD>
<INPUT TYPE="checkbox" NAME="scb"
VALUE=1 onClick="myWin.update(this)" CHECKED>Scrollbars<BR>
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="rs"
VALUE=1 onClick="myWin.update(this)">Resizable<BR>
<TD>
<INPUT TYPE="checkbox" NAME="ch"
VALUE=1 onClick="myWin.update(this)">Copyhistory<BR>
<TR>
<TD>
Width =
<INPUT NAME="w" SIZE=3
VALUE=300 onChange="if(isNum(this)) myWin.update(this)"><BR>
<TD>
Height =
<INPUT NAME="h" SIZE=3

VALUE=200 onChange="if(isNum(this)) myWin.update(this)"><BR>
<TR>
<TD COLSPAN=2>
Full URL =
<INPUT NAME="url" VALUE="example.html"
onChange="myWin.url=this.value;alert('New URL is ' +myWin.url)"><BR>
<TR>
<TD>
<INPUT TYPE="button" NAME="openMyWin" VALUE="Open New window"
onClick="myWin.checkOpen()">
<TD>
<INPUT TYPE="button" NAME="closeMyWin" VALUE="Close New Window"
onClick="myWin.doClose()">

<TR>
<TD ALIGN=center COLSPAN=2>
<INPUT TYPE="BUTTON" NAME="showsource" VALUE="How did I do that??"
onClick="myWin.showSource()">

<TR>
<TD COLSPAN=2>
<INPUT TYPE="button" NAME="dumpWinObj" VALUE="Dump Window Options Object
to screen"
onClick="alert(dumpProps(myWin.winOpts,'myWin'))">
</TR>
</FORM></TABLE></CENTER>
<P>


<HR>
<P><CENTER>
<A HREF="library.html"><IMG SRC="images/library.gif" HEIGHT=30 WIDTH=94
BORDER=0></A>
<A HREF="tutorial.html"><IMG SRC="images/tutorial.gif" HEIGHT=30 WIDTH=94
BORDER=0></A>
<A HREF="jsfaq.html"><IMG SRC="images/faq.gif" HEIGHT=30 WIDTH=94
BORDER=0></A>
<A HREF="submit.html"><IMG SRC="images/submit.gif" HEIGHT=30 WIDTH=94
BORDER=0></A>
<A HREF="search.html"><IMG SRC="images/search.gif" HEIGHT=30 WIDTH=94
BORDER=0></A>
</CENTER><P>

<P>
<CENTER><FONT SIZE="-1">
Send comments to <I><A HREF="mailto:mohammed -at- freqgrafx -dot- com">Andy
Augustine</A></I>
</FONT></CENTER>

<TABLE ALIGN=left><TR><TD><FONT SIZE="-1">
<IMG SRC="/cgi-bin/Count.cgi?df=411.window&dd=B&ft=0&md=5"
HEIGHT=20 WIDTH=75>
</FONT></TD></TR></TABLE>
<TABLE ALIGN=right><TR><TD><FONT SIZE="-1">
&#169; 1996
<A HREF="http://www.freqgrafx.com/";>Frequency Graphics</A>
</FONT></TD></TR></TABLE>
<HR>
</BODY>
</HTML>

-----------------------------------
end of code
----------------------------------

Previous by Author: job shop--non-compete clause??
Next by Author: Re: flat fee question...
Previous by Thread: HTML pop-ups?
Next by Thread: Re: HTML pop-ups?

[Top of Archive] | [Author Index (this month)] | [Thread Index (this month)]

What this post helpful? Share it with friends and colleagues:

Sponsored Ads