www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Specifying pop-up background color

  1. #1
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154

    Specifying pop-up background color

    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">
    <!--
    function popitup(url)
    {
    newwindow=window.open(url, 'name', 'height=520,width=406,resizable=yes,scrollbars=yes');
    if (window.focus) {newwindow.focus()}
    return false;
    }

    //-->
    </SCRIPT>

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    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.

  3. #3
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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...

  4. #4
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,136
    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");
          } 
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  5. #5
    Join Date
    Nov 2002
    Posts
    4,473
    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.
    Last edited by gil davis; 05-09-2004 at 08:45 AM.

  6. #6
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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

  7. #7
    Join Date
    Nov 2002
    Posts
    4,473
    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.

  8. #8
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    Sorry if it was incomplete. Here is what I have:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    function popitup(url)
    {
    newwindow=window.open(url, 'name', 'height=652,width=498,resizable=no,scrollbars=no');
    newwindow.onload = changeBGc();
    }
    function changeBGc() {
    newwindow.document.getElementsByTagName("body")[0].style.backgroundColor = "#FDF2F2";
    }
    //-->
    </SCRIPT>

  9. #9
    Join Date
    Nov 2002
    Posts
    4,473
    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.

  10. #10
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,136
    make sure you change this line of code
    newwindow.onload = changeBGc();

    to the one below

    newwindow.onload = changeBGc;
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  11. #11
    Join Date
    Nov 2002
    Posts
    4,473
    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?

  12. #12
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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.
    Attached Files Attached Files

  13. #13
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,136
    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.
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  14. #14
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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.
    Attached Files Attached Files

  15. #15
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles