Modifying a Popup Window

[nefarious2all]

I'm far from being fluent in JavaScript, sorta doing the trial and error thing with a bit of success.

So this is what I what to happen; Click on an image to bring up a smaller window of a certain size, but has scroll bars and can still be resized.

I have JavaScript that works when I want a popup to be a specific size with no scroll bars, and I've been able to modify that JS to include scroll bars but the problem that arises is that the popup doesn't size properly, it goes to the size of the original window.

Here's the code... where the popup doesn't size properly...

<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,scrollbars,features) { //v2.0
  window.open(theURL,winName,scrollbars,features);
}
//-->
</script>

And in the body...

<a area shape="rect" href="javascript:;" onclick="MM_openBrWindow('images/JK-ai06LG.html','ai06artLG','scrollbars','width=700,height=500')"> <img src="images/ai06art.png" width="600" height="350" border="0" /></a>

(Without 'scrollbars' in the code the popup opens to the correct size.)

Any help is appreciated!

[dan.technician]

By my guess of things, this code makes a pop-up window / dialogue box when you click on a link:

For the head:

<script language="javascript" type="text/javascript">
<!--

var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>

and for the body:

<a href="http://www.google.com" onclick="NewWindow(this.href,'windowname','size x','sizey','yes','center');return false" onfocus="this.blur()">Open Window</a>

just copy and paste the codes into the correct sections of the page and change 'sizex' and 'sizey' in the body code to the number of pixels you wish the windows to be sized. Replace 'yes' with 'no' in the body code to get rid of the scrollbar. Also in the body code replace 'Open Window' with what ever text you want e.g. 'Do Not Click!'. Good Luck.
Hope this helps. Dan.

[auntnini]

"Thau's JavaScript Tutorials" at WebMonkey and Cray's web tutorials were some of my early introductions to JavaScript. They are still informative. Here are links to their info on windows features:

http://www.webmonkey.com/tutorial/Ja...ial_-_Lesson_3

http://www.crays.com/learn/lesson14.htm
http://www.javascriptmall.com/jsc/jsPWin.htm

In WINDOW.OPEN function (arguments/parameters inside parentheses) the "URL" and "pooping" (separated by commas) are followed by the pop-window "features" -- comma-delimited in one set of "quotes" without spaces. Boolean 1=yes 0=no. You do not have to list all the features. If you want pop-window to be a certain size, specify the width=___, height=___.

You need to give attention to window FOCUS() for the pop or window BLUR() for the calling window so subsequent pop links to show in front of the larger original window.

For years I've used "myopen" function http://www.auntnini.com with WINDOW:BLUR()

//separate window for link
function myopen(url)
{ window.open (url, 'links', 'toolbar=0,location=1,directories=0,status=0,menubar=0,scrollbars=auto,resizable=yes,dependent=yes,width=400,height=400'); window.blur();
}
var links; //to avoid "undefined" message
//onUnload event handler
function clean() {
if (links != null) { links.close() };
}

But now, IE is not letting subsequent pops show. Therefore, I've been meaning to adapt something like http://www.jacquimorgan.com/hist/index.html

/*in BODY <a href="#nogo" onclick="loadpage('../things/___.jpg')">TEXT</a>*/

// JavaScript Document
var mypop=null;
function loadpage(url) {
if ((!mypop) || (mypop.close)) {
mypop = window.open (url, 'mypop', 'width=400px,height=375px,toolbar=0,resizable=1,screenx=0,left=20,screeny=0,top=20');
} else { mypop.document.location.href=url; }
mypop.focus(); return true;
}

A few years ago, an FIT/Illustration department slide show used something like THIS.ONFOCUS() = BLUR(), but I cannot find it now and need to research onFocus()/blur() more. Any expert info on this would be welcome.

Here are some other pop-window links:
http://www.yourhtmlsource.com/javasc...upwindows.html
http://www.pageresource.com/jscript/jwinopen.htm
http://www.javascript-coder.com/wind...dow-open.phtml

[dan.technician]

I will look into this

[nefarious2all]

Thank you for the help. Looks like I'm just going to switch what I'm using to one of these.

[auntnini]

Here are links to FIT student gallery I mentioned before.

Except for MAC Safari, there is a problem switching the focus to the pop window after clicking the first thumbnail. In years past, the pop window was larger and had a [CLOSE} button so it was not so obvious that pop was hidden on subsequent thumbnail clicks.
http://www.fitnyc.edu/aspx/Content.a...dentWebGallery

// -- BUG WORK AROUNDS -- \\
function HANDLE_FOCUS() { this.blur(); }
function HANDLE_LINKS() {
if ( !browsers[ "generic" ] && !browsers[ "netscape" ][ "minor" ] && !browsers[ "netscape" ][ "major" ] && !browsers[ "netscape" ][ "archaic" ] ) {
for ( x = 0; x < document.links.length; x++ ) {
document.links[ x ].onfocus = HANDLE_FOCUS;
}
}
}

The folllwing code is from pop-window http://www.fitnyc.edu/StudentWebGall...tration/9.html

<td width="16" height="16" align="left">
<a href="8.html" onfocus="this.blur();">
<img id="previous" src="../images/previous.gif" alt="" width="16" border="0"> </a></td>
<td width="2" height="16"><img src="../images/clear.gif" alt="" width="2" height="2" border="0"></td>
<td width="16" height="16" align="left">
<a href="1.html" onfocus="this.blur();" onmouseover="UpdateImage('X1', 'Xon'); return;" onmouseout="UpdateImage('X1', 'Xoff'); return;">
<img id="X1" src="../images/Xoff.gif" alt="" width="16" height="16" border="0"></a></td>

<td width="16" height="16" align="left">
<a href="2.htmluot&q onfocus="this.blur();" onmouseover="UpdateImage('X2', 'Xon'); return;" onmouseout="UpdateImage('X2', 'Xoff'); return;">
<img id="X2" src="../images/Xoff.gif" alt="" width="16" height="16" border="0"></a></td>

<td width="16" height="16" align="left">
<a href="3.html" onfocus="this.blur();" onmouseover="UpdateImage('X3', 'Xon'); return;" onmouseout="UpdateImage('X3', 'Xoff'); return;">