[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Frameless Popup Window in Javascript

Posted on 2005-05-09
6
Medium Priority
?
765 Views
Last Modified: 2012-06-21
HI

I am trying to have a frameless popup window in javascript.(No borders etc)

I have got the code from codelifter.com. But the popup window is opening in a fullscreen.
Here what I need is  I should be able to open the popup window in desired size.

Below is the code from CodeLifter.com

==============================================================
Script:     Amazing Frameless Popup Window - Version I

Functions:  In IE4 and later, this script launches a popup
            window without the Windows frame or titlebar
            (that is, a "containerless" window).  In other
            browsers, it launches a standard popup window.
            Position, width, and height are settable.
            Automatic closing of the window on leaving the
            page may also be optionally set.

Browsers:   IE4 and later
            Degrades fully functionally in other browsers

Author:     etLux
==============================================================

STEP 1.
Inserting the <script> in your page

Put the following <script> </script> in the head
section of your launching page.  

Set the variables as indicated in the script.

<script>

// Amazing Frameless Popup Window - Version I
// (C) 2000 www.CodeLifter.com
// Free for all users, but leave in this  header

// set the popup window width and height

var windowW=214 // wide
var windowH=398 // high

// set the screen position where the popup should appear

var windowX = 260 // from left
var windowY = 100 // from top

// set the url of the page to show in the popup

var urlPop = "www.yahoo.com"

// set the title of the page

var title =  "This Is A Frameless Popup Window"

// set this to true if the popup should close
// upon leaving the launching page; else, false

var autoclose = true

// ============================
// do not edit below this line
// ============================

s = "width="+windowW+",height="+windowH;
var beIE = document.all?true:false

function openFrameless(){
  if (beIE){
    NFW = window.open("","popFrameless","fullscreen,"+s)    
    NFW.blur()
    window.focus()      
    NFW.resizeTo(windowW,windowH)
    NFW.moveTo(windowX,windowY)
    var frameString=""+
"<html>"+
"<head>"+
"<title>"+title+"</title>"+
"</head>"+
"<frameset rows='*,0' framespacing=0 border=0 frameborder=0>"+
"<frame name='top' src='"+urlPop+"' scrolling=auto>"+
"<frame name='bottom' src='about:blank' scrolling='no'>"+
"</frameset>"+
"</html>"
    NFW.document.open();
    NFW.document.write(frameString)
    NFW.document.close()
  } else {
    NFW=window.open(urlPop,"popFrameless","scrollbars,"+s)
    NFW.blur()
    window.focus()
    NFW.resizeTo(windowW,windowH)
    NFW.moveTo(windowX,windowY)
  }  
  NFW.focus()  
  if (autoclose){
    window.onunload = function(){NFW.close()}
  }
}

</script>

==============================================================

STEP 2.
Triggering the popup window

Call the openFrameless function from a link, like this:

<a href="javascript:openFrameless()">click here</a>

==============================================================

STEP 3.
Conditioning the page that goes in the popup window

Add the following call to the <body> tag of the page that
will open in the popup *if* your popup does not come to the
front after it loads.  This is occasionally needed in early
versions of IE4, and with certain types of page content that
manipulate focus. If in doubt, put it in -- it can't hurt.

<body onload="top.window.focus()">

==============================================================

ADDENDUM 2/22/2001
Making the Frameless Popup Center on the Screen Automatically

We've had numerous requests for this, and a minor modification
of the script can do it.  Here's how...

Comment out the two lines as shown, and add the two shown below
them.

// set the screen position where the popup should appear

//var windowX = 260 // from left
//var windowY = 100 // from top
var windowX = (screen.width/2)-(windowW/2);
var windowY = (screen.height/2)-(windowH/2);

==============================================================
0
Comment
Question by:sk5567
6 Comments
 
LVL 13

Expert Comment

by:davidlars99
ID: 13960377
due to the security risk that feature has been disabled in Win XP SP2
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13960384
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13960400
I'll give you something else to have fun with   :)


<html>
<head>
<script language=Javascript>

var myWin=null,c=[],tmr=null,ct=1,url="";

function openWin(str){
      url=str;
      var ml=(screen.width/2)-50;
      var mt=(screen.height/2)-50;
        var cX,cY,cW,cH,frames=9;
      var x=0,y=0;
      var w=screen.width,h=screen.height-25;
        cW=w/(frames*4);
        cH=h/(frames*4);
        cX=x+(w/2);
        cY=y+(h/2);          
                                                 
        for(var i=0;i<((frames*4)+4);i+=4){
             c[i]  =Math.round(cX-((cW*i)/2));
             c[i+1]=Math.round(cY-((cH*i)/2));
             c[i+2]=Math.round(cW*i);
             c[i+3]=Math.round(cH*i)
        }  
      //self.moveTo(-2000,-2000);
      myWin=window.open("","childWin","height=100,width=100,toolbar=no,menubar=no,scrollbars=no,status=no,resizable=no,dialog=no,minimizable=no,left="+ml+",top="+mt);      
      animate();
}
function animate(){
      if(ct==10){
            ct=1;
            myWin.location.href=url;
            return true;
      }
      myWin.moveTo(c[ct*4], c[(ct*4)+1]);
      myWin.resizeTo(c[(ct*4)+2], c[(ct*4)+3]);
      ct++;
      setTimeout('animate()',7);
}
</script>
</head>
<body>
<button onclick="openWin('http://www.yahoo.com')">Open</button>
</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 36

Expert Comment

by:Zyloch
ID: 13975664
You may be interested in trying the createPopup IE-only function :)
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 15697315
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
    PAQ - No Refund

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk
EE Cleanup Volunteer
0
 

Accepted Solution

by:
CetusMOD earned 0 total points
ID: 15733705
PAQed with no points refunded (of 125)

CetusMOD
Community Support Moderator
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 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