Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Code for popping up quarter-page brower windows

Posted on 2000-05-03
6
Medium Priority
?
183 Views
Last Modified: 2010-04-09
I am looking for the html code (and basic instructions) that will pop a url into a new, quarter page browser window. I know that  <target =" _blank"> pops up a new window, but what about a new, quarter page window?
0
Comment
Question by:scupps
6 Comments
 
LVL 4

Expert Comment

by:mberumen
ID: 2775786
Here's the function I use

<script>
function openAWindow( pageToLoad, winName, width, height, center)

{
/* Opens a new window on the users desktop.   Arguments:
    pageToLoad - The URL of a page to load in the browser window.
                 This can be a relative URL or fully qualified.
    winName -        Name of the new window.
    width -        The horizontal size of the new window.
    height -        The vertical size of the new window.
    center -     toggle centering on 4.0 browsers.
                  1=centered window 0=no centering
    Values in the "args" section below can all be toggled in the
    same fashion as the center toggle.  Just modify the appropriate
    value in the args section to be either 0 or 1.
    A call to this function might look like this:
 
   Created by Glenn Davis of Project Cool, Inc. for general use.  If
   you use this routine please leave all comments in place so that
   others may benefit as well.*/                                   
   
   xposition=0; yposition=0;
    if ((parseInt(navigator.appVersion) >= 4 ) && (center)){
        xposition = (screen.width - width) / 2;
        yposition = (screen.height - height) / 2;    }
    args = "width=" + width + ","     + "height=" + height + ","
    + "location=0,"     + "menubar=0,"    + "resizable=1,"    + "scrollbars=0,"
    + "status=0,"     + "titlebar=0,"    + "toolbar=0,"    + "hotkeys=0,"
    + "screenx=" + xposition + ","  //NN Only
    + "screeny=" + yposition + ","  //NN Only
    + "left=" + xposition + ","     //IE Only
    + "top=" + yposition;           //IE Only
    window.open( pageToLoad,winName,args );
    }</script>


To call the page use this anchor tag

 <a href="javascript:openAWindow('newwindow.html','editvalues',310,120,1)">
(this would open a quarter size screen on a 640x480 screen
I need to look up the function that determines the size of the user's screen
then you can make it exactly one quarter of their screen size)

Hope this gets you started
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2776445
window.screen.availWidth
window.screen.availHeight

these work both with IE and Netscpae (for netscape only you can use window.innerWidth)

CJ
0
 
LVL 8

Accepted Solution

by:
xabi earned 600 total points
ID: 2776452
Here hoes the answer:

--- 8< -------- 8< ---------
<html>
<head>
<title>Example</title>
<script language="JavaScript">
<!--
function openWindow() {
    iWidth  = screen.width
    iHeight = screen.height
    msgWindow = window.open('newpahe.htm','newWin','width=' + iWidth/2 + ',height=' + iHeight/2 + ',screenX=' + iWidth/4 + ',screenY=' + iHeight/4 + ',top=' + iWidth/4 + ',left=' + iHeight/4);
}
//-->
</script>
</head>
<body>
 <form>
  <input type="button" onClick="openWindow()" value="Click Me">
 </form>
</body>
</html>
--------- 8< ------- 8< --------
xabi
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Expert Comment

by:xabi
ID: 2776471
Even better
---------------- 8< ---------- 8< -------------
<html>
<head>
<title>Example</title>
<script language="JavaScript">
<!--
function openWindow(sAddr, iDivX, iDivY) {
    iSwidth  = screen.width
    iSheight = screen.height
    iWwidth  = iSwidth  / iDivX
    iWheight = iSheight / iDivY
    iLeft   = (iSwidth  - iWwidth)  / 2
    iTop    = (iSheight - iWheight) / 2
    msgWindow = window.open(sAddr,'newWin','width=' + iWwidth + ',height=' + iWheight + ',screenX=' + iLeft + ',screenY=' + iTop + ',top=' + iTop + ',left=' + iLeft);
}
//-->
</script>
</head>
<body>
 <form>
  <input type="button" onClick="openWindow('newpahe.htm',3,3)" value="Click Me">
 </form>
</body>
</html>
---------------- 8< ---------- 8< -------------

As you can see you onlye need to change the values when calling the function "openWindow"
1st  value is the URL
2nd  value is the Axis X proportion
3thd value is the Axis Y proportion

xabi
0
 
LVL 7

Expert Comment

by:ssdesign
ID: 2778022
Write this code between the </Title> and <head> tag

<script language="JavaScript">
<!-- hide from JavaScript-challenged browsers
function openWindow(url) {
popupWin = window.open(url,
'remote','menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,dependent,width=400,height=200,left=50,top=50')}
// done hiding --></script>

In the body tag wgere you want to give the link for popup give this code

<a href="javascript:openWindow('xyz.htm');">popup</a>

As you can see you can set a lot of parameters as either true or false.

Hope this solves your problem in the easiest way.

0
 

Author Comment

by:scupps
ID: 2785102
Thank you.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question