jQuery issue with overlay not showing in IE

Good morning

I am using the jQuery plugin found on the undermentioned site.

http://buildinternet.com/project/supersized/3/core.html.

This is the basic version for a single image background, not the slideshow version though the CSS seems to contain code for the slideshow. It works really well in that it gives me the effect I wanted: an image that fills the screen whatever the size and resolution. It has a lovely overlay effect behind the #header and .nav areas - however, this overlay effect does NOT show up in IE7 or IE8. (It does show up in beta IE9 which is not much use to me at the moment). The overlay effect shows up in Fx, Opera, Chrome and Safari.

The thing I don’t like about it is that in the browsers where the overlay shows up, it also puts a shadow on the text. I found an instance of text-shadow being used in the CSS but when I disabled this attribute, it still showed on the screen I don’t know enough about JS to fix it.

In IE, no overlay and no textshadow. I like the no text shadow but would like the overlay. It almost seems as if I can’t have one without the other!

Site is www.bouvardbush.com. Only the index and contactus pages are using this at the moment. Any pointers would be appreciated. I may have to put up with IE not showing the overlay but I really want to get rid of the text-shadow in the other browsers if possible.

Thanks

It looks like the example on the BuildInternet site uses RGBa colour values to make the background colour of the content area transparent to some degree.

i.e., in their code they use:

#content{ background-color:rgba(0,0,0,0.65); }

Which IE8 and below don’t understand.

There are probably 2 options you could go with:

  1. Use fallback CSS for older browsers
  2. Use fallback images for older browsers

Let’s look at option 1:

You could use the RGBa & HSLa generator on kimili.com to generate the CSS for Internet Explorer

#selector{
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000);   /* IE6 & 7 */
  zoom: 1;
  background:rgba(0,0,0,0.65);
}

If you’re going with this option, I would recommend putting the required CSS for IE and placing it in a separate stylesheet.
e.g. have the following in your regular stylesheet:

#selector {
  background:#000; /* Fallback for older moz/webkit etc */ 
  background:rgba(0,0,0,0.65); 
}

Then the following in an IE8 and below stylesheet:

#selector{
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5000000,endColorstr=#A5000000);   /* IE6 & 7 */
  zoom: 1;
}

Option 2:

Create a semi-transparent PNG image that we can use for the background

#selector{
  background:url(transparent.png) left top repeat transparent;
  background:rgba(0,0,0,0.65); /* use background, rather than background-color 
                              so the background image is not loaded in 
                              browsers that support RGBa */
}

Oh, and if you don’t like the text shadow, you could remove it by looking for the “text-shadow” property in the CSS.
I would recommend however, that you do use it when using semi-transparent backgrounds and situations where the text colour could be close to the same background colour as it will help the text stand out in lighter areas. For example when you have white text on a light grey/white background, without a text shadow, the text would be hard to read.

Thank you very much AussieJohn - I shall get onto that first thing in the morning. I have already solved the text-shadow bit - I spent ages trying to disable the text-shadow references in the CSS in the two places I found it, to no avail. Then I noticed it in some Demo code which I had ignored, thinking it was not part of the bit I was using and lo and behold it was gone!

So now I just have to bring IE into line. Thanks for the help - I shall go with Option 1.

Couldn’t wait until morning - had to have a go - and it worked perfectly!

Thank you so much!!!

Glad to hear it worked for you!

If you’re having trouble tracking down styles it might be beneficial to use the Firefox addon Firebug for that. It’s also a great tool to help debug JavaScript!
(There is also Firebug lite for other browsers, but it a little bit limited)

Yes, used to have Firebug on another computer - you reminded me to get it on my newest one, so have now done so.

It seems that the order of scripts in the HEAD is having an effect on what happens when the page loads. On the 3 pages that have a Lightbox slideshow, the slideshow does not work if the lightbox scripts are placed early in the head. I get the image background though. If I place the slideshow script last in the head, I get the slideshow but no background.

So is it that only one instance can run - either background image or slideshow?
Are the scripts conflicting? As you can tell, my knowledge is limited to adding already coded scripts .

Thanks

On of the things that’s likely causing problems is that you’re including the jQuery library twice on the pages with the lightbox.

You only need to include the library once, before all the plugins.

For example on the Pens page you can remove the line
<script src=“penimages/pgallery/engine/js/jquery.min.js” type=“text/javascript”></script>

You can probably also make your life a bit easier by putting the lightbox scripts in 1 place on the site (e.g. the /js/ folder in the root) and referencing them from that 1 place so that it will be cached for subsequent visits on other pages.

<script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script>

and

<script src=“penimages/pgallery/engine/js/jquery.min.js” type=“text/javascript”></script>

Are you saying these are the same thing: jquery.min.js ? So only need to be included once. So each of my 3 lightbox pages has its own jquery.min.js so only need to put one of them in a js folder: create a js folder and put in 1 jquery.min.js file. There are 2 other js files in each of the 3 lightbox folders. Have just been having a look at them and they too seem to be the same, so I really only need 1 set of the 3 js files?

I’m learning all the time! At least,I hope I am!

Correct - they are both the jQuery library and so you’ll only need to include one of them.

(So yes, you’ll only need 1 set of the javascript / css files for the lightbox)

Thank you!

It’s done! Thank you very much - I’ve learnt a lot today!