ansaurus

Question

Jquery - How to hide images when there is no stylesheet?

Answer 1

+2 A:

Can you put the background in the css file?

#id { background: url(background_1200x800.jpg) no-repeat center }

beggs 2009-09-15 16:30:00

this won't stretch the width of the DIV...

Ropstah 2009-09-15 16:40:37

I must be missing something (it's late in Singapore)... he can still apply the `stretch` class to the div (as well as all the other style info he has in the CSS already)

beggs 2009-09-15 16:45:35

I tried putting the div in the centre, but I do not not what you mean by applying the stretch class to the div, as the background image would be unaffected and unstretched. Could you give a bit more detail about what you mean?

AD 2009-09-15 17:31:04

Indeed I misunderstood the effect you were trying to achieve... This will not work. Sorry.

beggs 2009-09-16 02:46:16

Answer 2

+2 A:

Check the document.styleSheets collection to detect if there are stylesheets loaded.

Edit: I know this is a hack to cover for another hack, but how about adding a display:none inline style to the image and adding a display:block!important to the stretch class in stylesheet.

Chetan Sastry 2009-09-15 16:31:41

I think this is the most reasonable solution.

Ropstah 2009-09-15 16:41:21

I tried:if (document.styleSheets.length == 0){$("#background").hide();}As well as alerting the message -- it does not alert on change. I think this may be because it is a browser thing, and strictly not a web/javascript thing.I tried putting display:block!important inline, and then display:block!important both to the div and the actual image, with the CSS having a display:block, whilst this looks promising, it does not hide the image when the style is off. I am using Firefox to test this.

AD 2009-09-15 17:30:02

I'm thinking it might be better if I just used PHP to code around the issue.

AD 2009-09-15 17:31:52

Answer 3

A:

how about something like this (do this onload):

if(!$("style").length){
 $("#background").hide();
}

mkoryak 2009-09-15 16:33:02

Unfortunately, using .length does not appear to work as the image is still there when I click "No style".

AD 2009-09-15 16:54:23

Answer 4

A:

My previous answer does not achieve the desired effect, as I missunderstood the question. However the following works for me:

<html>
   <head>
      <title>Background to fit screen</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <style type="text/css">
         html {height:100%;}
         body {height:100%; margin:0; padding:0;}
         #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
         #fg {position:relative; z-index:1;}a
      </style>
   </head>
   <body>
      <div id="bg">
        <img class="stretch" src="background_1200x800.jpg" width="0" height="0">
      </div>
      <div id="fg">
        <p>content goes in the `fg` div.</p>
      </div>
      <style type="text/css">
         #bg img {width:100%; height:100%;}
      </style>
   </body>
</html>

I tested this in FF3.5 (on Vista) the desired effect (no background image) is achieved when I use the Web Developer extension to turn off all styles. With styles on the entire view-port is covered with the background image and the content is on-top of the image.

I also took a quick look in IE7 (on Vista) and Chrome (on Vista) and both show the image covering the entire viewport with the content placed on top. I did not test turning off styles in browser other then FF3.5.

I have no idea if the second style element in the body is valid or if it is considered a good idea or an abomination

beggs 2009-09-16 02:57:07

Answer 5

A:

Just a thought and NOT TESTED...

HTML:

<div id="background">
<img src="background_1200x800.jpg" height="0" width="0" alt="" />
</div>

CSS:

div#background img {width: 100%; height: 100%}

Idea:

Set HTML image attributes to be zero by default. Use CSS to overide dimensions... CSS disabled let the image fall back on its own inline values.

2009-09-16 08:25:15

Answer 6

A:

I've decided to keep it with the image, as I don't think its totally 100% cross browser resolution.

Topic closed.

AD 2009-10-01 10:36:17

ansaurus

tags:

views:

answers:

Jquery - How to hide images when there is no stylesheet?

related questions