New Window: No Title Bar

By Joe Burns

Use these to jump around or read it all...

[Button Code [The Script]
[OnLoad the Window]

In my tutorial dedicated to opening new windows through JavaScript, I made the statement you could not open a new window that didn't have a title bar. Don't check. It doesn't say that any more.

A reader saw that statement and informed me that he knew of a method and gave me the basics. I took those steps and put together the script in this tutorial. It's a new window that opens without a title bar. The effect is created by using the open.window JavaScript along with the fullscreen code discussed in this tutorial.

Sorry to say that even though the fullscreen and JavaScript commands work in Netscape, the loss-of-title-bar effect only works in Internet Explorer. However, I've bulked up the script so that not only do you have control over the title bar, but also o over the window's size and placement on the screen. It's a neat little piece of work. Dig this:

Neat effect, eh?

Hey, did you get a scrollbar? Yeah. Me too. I have the scrollbars set to "no" but that thing still pops up. Strange, huh? If you'd like to get rid of the scrollbar too, then follow a tip given to me by Neil Brocklebank.

In the page that opens in the new window put the style command:

style="overflow:hidden"

...in the BODY tag. Now, remember. That goes in the BODY tag of the page that is opening inside the new window, not the page that contains the script. That's real important.


Button Code

It goes like this:

<CENTER>
<FORM>
<input type="button" VALUE="click me!" onClick="goNewWin()">
</FORM>
</CENTER>

It's a basic FORM button that is set up to fire a function named "goNewWin()". That's about all there is to it. Let's see that script.


The Script Code

The script is inside of a function. Here it is:

<script language="JavaScript">

function goNewWin() {

// Set height and width
var NewWinHeight=200;
var NewWinWidth=200;

// Place the window
var NewWinPutX=10;
var NewWinPutY=10;

//Get what is below onto one line

TheNewWin =window.open("untitled.html",'TheNewpop',
'fullscreen=yes,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');

//Get what is above onto one line

TheNewWin.resizeTo(NewWinHeight,NewWinWidth);
TheNewWin.moveTo(NewWinPutX,NewWinPutY);

}
</script>

We start by setting four parameters:

// Set height and width
var NewWinHeight=200;
var NewWinWidth=200;

// Place the window
var NewWinPutX=10;
var NewWinPutY=10;

Right now, I have the height and width of the new window set to 200. I have the position of the window set to ten pixels down from the top and ten pixels in from the left. Keep the basic format, but feel free to set the numbers to whatever positions and parameters you'd like.

Next we set the open window code to the variable, "TheNewWin". By doing that, we can then manipulate the window by manipulating the variable name.

//Get what is below onto one line

TheNewWin =window.open("untitled.html",'TheNewpop',
'fullscreen=yes,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');

//Get what is above onto one line

See the two comments that suggest all of that should be on one line? Pay attention to that. If you're getting errors with this script, I'll bet dollars to donuts that's your problem.

Notice you can set all of the parameters just like any other new window code. Notice also that the "fullscreen" parameter is now stuck in there. That's what does the no-title bar trick.

Now let's play with the parameters you set at the top of the script.

TheNewWin.resizeTo(NewWinHeight,NewWinWidth);
TheNewWin.moveTo(NewWinPutX,NewWinPutY);

Se how the variables of the height and width, top and left, are brought into play affecting "TheNewWin"? That's how to apply the parameters to the new window.

Very cool.


OnLoad the Window

I have the script set up to fire when a button is clicked. I get that by putting the script into a function format. If you'd like the script to fire as soon as the page loads, you'll need to get it out of the function format and place it into the HEAD section of the page. The script will look like this:

<script language="JavaScript">

// Set height and width
var NewWinHeight=200;
var NewWinWidth=200;

// Place the window
var NewWinPutX=10;
var NewWinPutY=10;

//Get what is below onto one line

TheNewWin =window.open("untitled.html",'TheNewpop',
'fullscreen=yes,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');

//Get what is above onto one line

TheNewWin.resizeTo(NewWinHeight,NewWinWidth);
TheNewWin.moveTo(NewWinPutX,NewWinPutY);

</script>

Notice it's just the same script without the function code and button. This way the script will fire when it's loaded into RAM.


That's That!

Thanks for reading and have fun with the script. I think you'll find it one you can use and manipulate a great deal.

  Enjoy!

[Button Code]
[The Script]
[OnLoad the Window]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •