Change DIV Background using JavaScript

[swatchwatch]

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

[coothead]

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

[jogol]

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).

[swatchwatch]

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

[Kor]

CSS:

#mainscreen {
background-color:white;
/* */
}

What for? The background color of the inner div will over impose the parent's background. Remove that line

[swatchwatch]

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

[coothead]

Hi there swatchwatch,

your coding is for IE only.

        #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

[swatchwatch]

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
}

[coothead]

Hi there swatchwatch,

to match the IE value it would be...

opacity:0;

Further reading:-

• CSS opacity

coothead

[swatchwatch]

Sorry Kor, my apologise, you may be right. I will change this and see the results before updating this Thread

[Kor]

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.

[swatchwatch]

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

[swatchwatch]

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

[coothead]

Hi there swatchwatch,

it may have slipped your notice, but my previous reply was to Kor, rather than to you.

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

[Kor]

Coothead, this is not a commercial application, it is something that was put together very quickly for a purpose

It does not matter if the site is commercial or not. The final target is the user. The user has a browser, and browsers did evolve within years.

Now, I suppose you needed a slideshow with fade effect. Should have been more carefully, you must have found dozens up-to-date, cross-browser applications. A simple Google will provide:

http://www.dynamicdrive.com/dynamici...nslideshow.htm
http://www.scriptiny.com/2010/09/fad...deshow-script/
http://visualslideshow.com/

Don't mention that you could have used a library like JQuery, or Prototype, or other, for a quick implementation.

But, be as you wish.

Important note: I saw that you have left the full, absolute, URL of your JavaScript files. Considering that those files are hosted an another domain, I dare to ask: what if that server fails or that domain disappears some say? Shouldn't be better to copy those files, put them on your domain and use relative URL?

Just some friendly thoughts, you know...