Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

css disabled attribute

Posted on 2007-07-23
8
Medium Priority
?
4,203 Views
Last Modified: 2008-02-01
i have an img on my web page with an id of temp that i have written an onclick event for
using javascript. My question is using css is it possible to have two different background images
depending on if the attribute disabled is true or not?

#temp[disabled=true] {
      background-image:url("grayed-out.jpg");
}

#temp {
    background-image:url("normal.jpg");
}

this doesn't seem to be working. I am changing the value of the disabled attribute between true
and false in the javascript.


0
Comment
Question by:smiffe
  • 6
  • 2
8 Comments
 
LVL 28

Expert Comment

by:TName
ID: 19545729
>I am changing the value of the disabled attribute between true

Then simply change the class too:

document.getElementById('temp').className='class1';   // or 'class2'

.calss1 {
      background-image:url("grayed-out.jpg");
}

.class2 {
    background-image:url("normal.jpg");
}
0
 
LVL 28

Expert Comment

by:TName
ID: 19545737
I mean in the onClick event you can do both, enable/disable and toggle the class name.

<div id="temp" class="class1" onClick="toggleState(this)"></div>

If you need help with the js, just tell us.
0
 
LVL 28

Expert Comment

by:TName
ID: 19545801
The problem with attribute selectors like [disabled="true"] is that  IE6 doesn't support them.

BTW e.g. in Firefox, if you specify
  img#temp[disabled="true"] {border:1px solid #f00;}

then you have to set the element disabled with
  disabled="true"
and not for example
  disabled="disabled"

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:smiffe
ID: 19545807
that might work but i have multiple images i am doing this for so i dont really want to make
a whole bunch of meaningless class names. Can i just make two classes call
them normal and disabled and then use the id

#temp.normal {  .....
                        }

#temp.disabled { .....
                          }

or would it be

.disabled#temp

im not sure how to do this
0
 
LVL 28

Expert Comment

by:TName
ID: 19545859
No, you cannot concatenate a class and ian d like this.

Have a look at this example, as I'm not sure what tag your elements really are, I took divs, even if it doesn't make much sense to enable/disable a div:

<html>
<head>
<style>
#temp  { border:1px solid #f00;  }
#temp2  { border:1px solid #0f0;  }
#temp3  { border:1px solid #00f;  }
.class1[disabled=true] {
      background-image:url("grayed-out.jpg");
}

.class2{
    background-image:url("normal.jpg");
}
</style>

<script>
function toggleClass(obj) {
   obj.enabled=(obj.enabled=='true') ? 'false' : 'true';
   obj.className=(obj.className=='class1') ? 'class2' : 'class1';
}
</script>

</head>
<body>
<div id="temp" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
<div id="temp2" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
<div id="temp3" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
</body>

</html>
0
 
LVL 28

Expert Comment

by:TName
ID: 19545865
 >you cannot concatenate a class and ian d like this.
should be
  you cannot concatenate a class and an id like this.
0
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 19545871
Sorry the style declaration shouldn't contain attribute selectors. Corrected:

<style>
#temp  { border:1px solid #f00;  }
#temp2  { border:1px solid #0f0;  }
#temp3  { border:1px solid #00f;  }
.class1 {
      background-image:url("grayed-out.jpg");
}

.class2{
    background-image:url("normal.jpg");
}
</style>
0
 

Author Comment

by:smiffe
ID: 19547569
thanks a lot i didn't realize that it would be difficult to do. I ended up just
setting the opacity of the image to 50% when its disabled so it has
the same effect with less hassle.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question