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

Thread: Change DIV Background using JavaScript

  1. #1
    Join Date
    May 2011
    Posts
    7

    Change DIV Background using JavaScript

    I currently have a web site in which I am using some Javascript to change the Background of a DIV.

    The DIV is defined as follows :

    <div id="outerscreen">
    <div id="mainscreen">
    </div>
    </div>


    and the Javascript I am using is as follows :

    var docEl = document.getElementById('outerscreen'); docEl.style.backgroundImage = "url('pics/intro.gif')";

    My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.

    Can anyone shed any light on what the problem is and how I might be able to resovle this.

    Thanks in advance Chris

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there swatchwatch,

    and a warm welcome to these forums.

    Unfortunately, you have not supplied enough information for us to solve your problem.

    Do you have a link to the site in question or failing that the full code - ( css, html and javascript ) .

    coothead

  3. #3
    Join Date
    Feb 2005
    Posts
    345
    the problem might be that IE expands the container div (which is a bug), while the other browsers don&#180;t (which is correct behaviour).
    Last edited by jogol; 05-18-2011 at 04:07 AM.
    free music: comatronic

  4. #4
    Join Date
    May 2011
    Posts
    7

    http://www.frances-white.com/

    firstly thank you for your cordial greeting, it is a pleasure to meet your acquaintance.

    The website is here http://www.frances-white.com/ it works just dandy in IE, however when in Chrome or FF the image does not load.

    Because i have a redirect on the URL it may be better seen here http://www.whitecoles.co.uk/lifecoaching/

    The source code in question appears on line 12 - 13 or there abouts

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    CSS:
    Code:
    #mainscreen {
    background-color:white;
    /* */
    }
    What for? The background color of the inner div will over impose the parent's background. Remove that line

  6. #6
    Join Date
    May 2011
    Posts
    7
    Sorry Kor, this is relating to the Background image. The Background colour is fine.

    What happens is the onload event calls a function which specifies the Background image for a DIV within the page. When loaded in IE it's fine, but when loaded through any other Browser the results are not the same.

    Chris

  7. #7
    Join Date
    May 2011
    Posts
    7
    Sorry Kor, my apologise, you may be right. I will change this and see the results before updating this Thread

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there swatchwatch,

    your coding is for IE only.

    Code:
    
            #mainscreen
            {
                height: 300px;
                background-color: White;
                border: 0px;
                overflow: auto;
                filter: alpha(opacity=0);/* this is IE propriety code */
            }
    
    You must use also include opacity for all the other browsers out there.

    Note that opacity starts at "0" and increments to "1".

    coothead

  9. #9
    Join Date
    May 2011
    Posts
    7

    Thumbs up

    Coothead, do you mean like this

    #mainscreen
    {
    height: 300px;
    background-color: White;
    border: 0px;
    overflow: auto;
    filter: alpha(opacity=0);/* this is IE propriety code */
    opacity: 1
    }

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Agree, coothead. But in fact, the whole code was nonsense. The background color was set to white, while the opacity was set to 0. What for? I suspect that should be a JavaScript code which supposes to make a transition. same for the menu.

    swatchwatch, judging upon the way you have written the script (as language="JavaScript 1.2"), you are using some medieval codes, written about 10 years ago, for IE only. I am even surprised that they still work, even if only by half

    You simply must find some modern similar snippets.

  11. #11
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there swatchwatch,

    to match the IE value it would be...
    opacity:0;
    Further reading:-

    coothead

  12. #12
    Join Date
    May 2011
    Posts
    7
    Thanks for the advice Kor, this was somehting I flung together quickly so not concerned about the era of code. Anyway thanks again the deletion of the background colour from #mainscreen worked just fine.

    Thanks again everyone.

    Cheers

    Chris

  13. #13
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Kor,

    I agree with you entirely about the nonsensical coding.

    Obviously, our friend is coding for IE initially and testing in modern browsers later.

    It just seemed appropriate at this juncture to point out the existence of the opacity attribute.

    coothead

  14. #14
    Join Date
    May 2011
    Posts
    7
    Coothead, this is not a commercial application, it is something that was put together very quickly for a purpose. I asked a simple question I did not request a code review. Kor answered the question perfectly. I think we are going off on a tangent here, I am well aware the code is not cutting edge and quite frankly don't give a monkeys. It works fine in all browsers and with Kor's help I can now close the book on this one.

    Lets put this to rest now if you would.

    Thanks
    Chris

  15. #15
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there swatchwatch,

    it may have slipped your notice, but my previous reply was to Kor, rather than to you.
    Quote Originally Posted by Kor View Post
    Agree, coothead. But in fact, the whole code was nonsense.
    I think that you will find that all of my posts to you were relevant to your problem.

    coothead

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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