Removing the title bar from a popup window

BoardBonobo

My hat is white(ish)!
Veteran
I've just finished some javascript that pops up a window containing a description when the user places the cursor over a link. I have removed the status bar etc etc, but what I want to do now is remove the title bar. I just want a box and now a window. Anybody got any clues??
 
I have no idea as to what the solution is, but <cheeky mode on> is there any possibility of sharing that code when you've found it out? I'm very interested in this for the site.
 
I don't know, you come to a forum to seek wisdom and help and what happens? People ask you for the solution to your own problem :D

Well I've got it sussed at last. I've finished the JS so that the window opens next to the mouse pointer and has no border or title. The trick was to open the window as full screen and then resize it. But you still get a scroll bar appearing on the right hand side even if you've switched off scroll bars in the window definition. What you need to do is include style=overflow:hidden in the body tag of the popup window. You can apply all the usual sorts of CSS stuff and DHTML things as you would an ordinary window.

I use it to display associated members from a mailing list database. Here's the code anyway (it's a bit long):

<script language="JavaScript">
<!--
var popupHandle;

function closePopup() {
if(popupHandle != null && !popupHandle.closed) popupHandle.close()
}


function displayPopup(text,name,height,width)
{
var desc=text
var v4=(navigator.appVersion.charAt(0)=="4");
var evnt=(v4 ? event:null)
var properties = "fullscreen=yes,status=0,toolbar=0,location=0,height="+height
properties = properties+",width="+width
var leftprop, topprop, screenX, screenY, cursorX, cursorY, padAmt

if(navigator.appName == "Microsoft Internet Explorer")
{
screenY = document.body.offsetHeight
screenX = window.screen.availWidth
}

cursorX = evnt.screenX
cursorY = evnt.screenY
padAmountX = 10
padAmountY = 10

if((cursorY + height + padAmountY) > screenY) {
padAmountY = (-30) + (height*-1);
}
if((cursorX + width + padAmountX) > screenX){
padAmountX = (-30) + (width*-1);
}

if(navigator.appName == "Microsoft Internet Explorer")
{
leftprop = cursorX + padAmountX
topprop = cursorY + padAmountY
}else{
leftprop = (cursorX - pageXOffset + padAmountX)
topprop = (cursorY - pageYOffset + padAmountY)
}
properties = properties+",left="+leftprop
properties = properties+",top="+topprop

closePopup()
popupHandle = open("",name,properties)
popupHandle.resizeTo(height,width)
popupHandle.moveTo(leftprop,topprop);
var d=popupHandle.document
d.write(desc)
}

I feed the text to display as a string variable built using perl (I'm using Apache ASP for my development). I'm using it like this:

&lt;a href="javascript:void(0)" onMouseOver="displayPopup('&lt;%=$Text%>','popup1',200,120)"onMouseOut="closePopup()">Yes</a>

where the $Text field consists of a string containing the html definition and the text to display e.g.

my $start="&lt;html>&lt;head>&lt;title>Popup Box&lt;/title>&lt;/head>&lt;body style=overflow:hidden bgcolor=eeeeee>";
my $text="some formatting and blah blah blah"
my $end="&lt;/body>&lt;/html>";
my $Final="$start$text$end";

You'll have to figure out a way of dynamically resizing the popup to fit whateevr it is you want to display but that shouldn't be to hard. Just count the number lines and multiply by the font point size and add bit for luck, the same goes for the width.

Hope that helps!!
 
I've had a complete rethink and a complete re-write. I haven't tested this code with Navigator as I will be using it on explorer based machines exclusively. It may have a problem with screen pos, but I'm not to sure. I've used the most common code I could.

Anyway the new and improved, and also a lot smaller code:

&lt;script ="JavaScript">
&lt;!-- Begin
// PopUp window script.
// R.Barrow '02
// pops up a borderless, untitled window
// at the cursor postion regardless of window size
function popup(t) {
var padamnty=30 //five pixels down from cursor
var padamntx=5 //thirty pixels away from cursor
var h=100 // height
var w=100 // width - there seems to be a minimum
var mx=window.event.screenX // grab relative to screen size coords
var my=window.event.screenY
var left=mx+padamntx; // slap on the padding
var top=my+padamnty;
popWin=open("","Test","fullscreen=yes,status=0,toolbar=0,location=0") // open full screen window to remove title bar
popWin.resizeTo(h,w) // and resize
popWin.moveTo(left,top) // and move to cursor
var text="&lt;html>&lt;head>&lt;title>Hello&lt;/title>&lt;body bgcolor=eeeeee style=overflow:hidden>&lt;h1>!" // including style=overflow:hidden removes scroll bar
text=text+t+"&lt;/h1>&lt;/body>&lt;/html>"
popWin.document.write(text) // write the window text
}

function closepopup(){
if(popWin != null &amp;&amp; !popWin.closed) popWin.close() // close the popup window
}
&lt;!-- End
&lt;/script>

And here's a sample page with script so you can play straight away :D

&lt;html>
&lt;head>
&lt;title>popuptest&lt;/title>
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;/head>
&lt;body bgcolor="#FFFFFF" text="#000000">


&lt;script ="JavaScript">
&lt;!-- Begin
// PopUp window script.
// R.Barrow '02
// pops up a borderless, untitled window
// at the cursor postion regardless of window size
function popup(t) {
var padamnty=30 //five pixels down from cursor
var padamntx=5 //thirty pixels away from cursor
var h=100 // height
var w=100 // width - there seems to be a minimum
var mx=window.event.screenX // grab relative to screen size coords
var my=window.event.screenY
var left=mx+padamntx; // slap on the padding
var top=my+padamnty;
popWin=open("","Test","fullscreen=yes,status=0,toolbar=0,location=0") // open full screen window to remove title bar
popWin.resizeTo(h,w) // and resize
popWin.moveTo(left,top) // and move to cursor
var text="&lt;html>&lt;head>&lt;title>Hello&lt;/title>&lt;body bgcolor=eeeeee style=overflow:hidden>&lt;h1>!" // including style=overflow:hidden removes scroll bar
text=text+t+"&lt;/h1>&lt;/body>&lt;/html>"
popWin.document.write(text) // write the window text
}

function closepopup(){
if(popWin != null &amp;&amp; !popWin.closed) popWin.close() // close the popup window
}
&lt;!-- End
&lt;/script>
&lt;table width="100%" border="0">
&lt;tr>
&lt;td>&lt;a href="javascript:void(0)" onMouseOver='popup("1")' onMouseOut='closepopup()'>test1&lt;/a>&lt;/td>
&lt;td>&lt;a href="javascript:void(0)" onMouseOver='popup("2")' onMouseOut='closepopup()'>test2&lt;/a>&lt;/td>
&lt;td>&lt;a href="javascript:void(0)" onMouseOver='popup("3")' onMouseOut='closepopup()'>test3&lt;/a>&lt;/td>
&lt;td>&lt;a href="javascript:void(0)" onMouseOver='popup("4")' onMouseOut='closepopup()'>test4&lt;/a>&lt;/td>
&lt;/tr>
&lt;/table>
&lt;/body>
&lt;/html>

Edit: Just disabled HTML in this post as the sample was being interpreted as code. Doh!
 
Back
Top