Specifying pop-up background color

**mickapoo** · 05-08-2004 12:48 PM

I would like to know how to properly specify the background color of a pop-up window. I have tried a couple of things that I found on the web, but none of them worked. I am a complete newbie when it comes to JS, so perhaps I am putting their suggestions in the wrong place. However, this is what I have so far. Can soneone tell me how I would specify the background color? Thank you.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

**gil davis** · 05-08-2004 06:00 PM

Windows do not have a background color that you can change. Just opening the window gives you the default color that the user has chosen.

However, you can change the background of the document in the window, and that will override the default empty window background (unless the user's browser has options to override it).

So the part that controls the background color of the window is the value that you place in "url". Whatever background color is specified in the document referenced by that "url" will appear. If the document has no background color specified (either in HTML or CSS), then the window will stay "plain".

Did that make sense, or did I give you too much information?

Make a text file out of this:

Code:

<body bgcolor="teal">
</body>

Save it with the extension ".htm" and then use that filename as the "url" in your other page. When the new window opens, the background color should be teal.

**mickapoo** · 05-08-2004 06:22 PM

Are you saying you cannot change the background color? Why can you do this on a regular page, and not a pop-up window? I really don't want to add a new file unless I absolutely have to. I thought you could specify the background color of a popup, just as you can specify other attributes such as the size of the pop-up, whether it has scrollbars or not, etc...

**Khalid Ali** · 05-08-2004 06:30 PM

Below is the possible approach that will solve your problem.

1. you will have to write code that will keep on checking that if the window is created and the document is loaded.
2. Once document is loaded then you can get reference to the body element

3. and set its background color, either by using Gil's suggestion or by something like this

PHP Code:


if(document.all){

bodyEl.style.backgroundColor="lightyellow";

      }else{

        bodyEl.setAttribute("STYLE","background-color:lightyellow");

      }

**gil davis** · 05-08-2004 06:57 PM

Originally posted by mickapoo
I thought you could specify the background color of a popup, just as you can specify other attributes such as the size of the pop-up, whether it has scrollbars or not, etc...

Sorry, no. See http://msdn.microsoft.com/workshop/a...ods/open_0.asp for a list of things that you can change. Like I said, it is the document that has a background color.

I did not mean to suggest that you needed another page, I was just showing you what determines the background color. You can change the background color in whatever page you use. You can use what Khalid posted to change it from the opening page as long as it is a page on the same domain.

For example:

Code:

<SCRIPT TYPE="text/javascript">
function popitup(url) {
  newwindow = window.open (url,'name','height=520,width=406,resizable=yes,scrollbars=yes');
// this is incorrect!
//  newwindow.onload = changeBGc();
// this is correct! (thanks, Khalid!)
  newwindow.onload = changeBGc;
}

function changeBGc() {
  newwindow.document.getElementsByTagName("body")[0].style.backgroundColor = "teal";
}
</SCRIPT>

I am afraid you have picked a relatively complex task for your first JS attempt.

**mickapoo** · 05-08-2004 07:35 PM

Thank you! Your solution worked perfectly. However, now it is not only opening my image in a new page, but it is also changing to the new page in the same window. How do I keep this from happening?

Thanks,
mickapoo

**gil davis** · 05-08-2004 08:00 PM

Insufficient data prevents an accurate answer.

I suspect you have used an onclick to activate the popup window and, as many before you, neglected to cancel the standard click action by using "return false" in the onclick handler.

**mickapoo** · 05-08-2004 08:04 PM

Sorry if it was incomplete. Here is what I have:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

**gil davis** · 05-08-2004 08:31 PM

In order to help you further we would need to see the whole page. There is nothing in what you have already posted that would actually do anything by itself. There must be something calling the function that you have not yet shared.

**Khalid Ali** · 05-09-2004 01:09 AM

make sure you change this line of code
newwindow.onload = changeBGc();

to the one below

newwindow.onload = changeBGc;

**gil davis** · 05-09-2004 07:42 AM

Originally posted by Khalid Ali
make sure you change this line of code
newwindow.onload = changeBGc();

to the one below

newwindow.onload = changeBGc;

Is that what causes it to change in the main window? Now that I see it, I know that the function will run immediately, but wouldn't that just open the new window?

**mickapoo** · 05-09-2004 08:28 AM

Ok, I did change that line of code.

I wanted to provide all data, so I have attached the file. It is opening the image in a pop-up, but still the current window is changing as well. So, the new page is coming up in the same window AND as a pop-up.

Any advice is appreciated.

Thank you.

**Khalid Ali** · 05-09-2004 10:35 AM

you only need to add return false at the end of the function so that it does not trigger default anchor behavior

function popitup(url)
{
newwindow=window.open(url, 'name', 'height=652,width=498,resizable=no,scrollbars=no');
newwindow.onload = changeBGc;
return false;
}

this will solve your problem.

**mickapoo** · 05-09-2004 11:38 AM

Originally posted by Khalid Ali
you only need to add return false at the end of the function so that it does not trigger default anchor behavior

function popitup(url)
{
newwindow=window.open(url, 'name', 'height=652,width=498,resizable=no,scrollbars=no');
newwindow.onload = changeBGc;
return false;
}

this will solve your problem.

I tried that, in conjunction with removing the () from
newwindow.onload = changeBGc();

as you previously suggested, but it did not work. What happened when I tried that is the pop-up window did not have the background color. I have attached the entire file for you to see.

**Paul Jr** · 05-09-2004 02:02 PM

Originally posted by mickapoo
What happened when I tried that is the pop-up window did not have the background color.

As Gil stated, you can’t change the background color of a window, but you can change the background color of a document. You’re not opening a document, you’re just opening a window containing an image. Unless you create a whole new document, you won’t be able to change the background color.

Thread: Specifying pop-up background color

Thread Tools

Display

Specifying pop-up background color

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions