CSS - How To Use Different Css When Javascript Is Enabled And Disabled

Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told).

Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled.

Code:

PHP Code:
<div id="mainmenuText">text links to go below...</div>
<div id="mainmenu">
    <ul id="mainmenulist">    
    <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li>
    <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li>
    <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li>
    <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li>
    <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li>
    </ul>
</div> 





CSS:

PHP Code:
#mainmenu {
z-index:1000;
height: 20px;
background: transparent url("../images/layout/navigation.jpg") no-repeat top left;
margin-left: 0px;
}
#mainmenuText {
z-index:10;
width:100%;
height:100%;
position:relative;
top:10px;
display:block;
margin-left: 0px;
} 

This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat.

Observe he
http://www.drcwbt.com/codetests/disabledbutton.htm

I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it.

Any ideas on how to "gray out" in Mozilla?

Hey -

So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that?

Thanks in advance.

Is there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS.

Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it.

Thanks.

When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background?

I've searched and searched with no luck. Does anyone know if it is possible to set a style that would set all my disabled textboxs to a grey bg color, back to white on enabling. I know I can perform it through javascript. I'm just trying to do as much with styles as possible here. If someone could point me in the right direction I'd appreciate it. I only need it to work in IE6. Thanks

Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing.

I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside.

The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray.

Does anyone know if there is a way to change this or is it just a default with internet explorer?

Thanks!

hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web.

can someone help me please!

Hi,

First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/

Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty.

I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla

Could you look at the code and tell me whats wrong?

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/styles/xcage.css
http://serve5.net/xcage/nav/scripts/sfhover.js
Thanks.

Hi,

I have some links that act as a navigation bar. I used .leftLink:hover so that when mousover, they change color.

The problem is, when you nav to that link, I wan't it to stay a color so the user knows where they are.

The only way I know how to do this is js onpageload. Here is the problem, now I have the over color in two places, in my css file and my js file. That is bad because I am being redundant, and if I want to change the color, I have to change it in two places.(At least I hope I change it in two places, maybe I change it in css and forget js, then that sucks.)

So can anyone help me?

1.) How do you personally solve this problem?

2.) Is there anyway js can read the style.hover.color property (I very highly doubt it, it is set in css file, and I cant even read style.width)

4. Is there something in css that adresses this issue? Can I maybe use some global variable in css that js can access too?

3.) Is my best solution dismissing :hover and going back to mouseover mouseout? Then I can have my color in one place.

Thanks for your time,

CJB

Hi. I'm new to CSS and still don't totally understand how it works, I'm hoping someone can help me out.

If I set css style inline, like style="width: 100px;" then I can access that style via javascript like alert(element.style.width); But once I set the style in a class, like, class="test" and the css is .test { width: 100ps;} now my alert(element.style.width); is nothing. Maybe some code will help explain:

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
.test {
	width: 100px;
}
</style>

</head>

<body>
<div  onclick="alert(this.style.width);"class="test" id="test">
<p>text</p>
</div>
<div onclick="alert(this.style.width);" id="test2" style="width: 100px;">
<p>text</p>
</div>

</body>

</html>

If I click the div with inline style, I get the(my) expected behavior, that is I see 100px alerted on my screen. If I click the div with the class call, I see an empty string alerted. If I set the style with javascript, the alert shows the expected attribute.

Could anyone explain why this happens, and a possible way around it? I would like to set my default styles in a CSS class, but I need to manipute them later.

Thanks for your time and help,

CJB

Hello,

When validating my site a syntax in javascript causes the error

Code:

if (lyr  & & lyr.css) lyr.css.visibility = "visible";

so I replace the ampersand with & as what the validator suggested and so I did this

if (lyr && lyr.css) lyr.css.visibility = "visible";

but the script now won't work

I have a problem. I'm not even sure if coding today can do this. I think I need CSS to do this, but then again maybe Javascript. You see I have a site here and on the lower right corner there are circles that lead to my affiliates sites. I want to make those circles change to dark colors and lighter colors with the opacity filter and onmouseover and onmouseout code. The thing is I don't want to cut up my layout to do so. Is there a way I can keep the entire layout intact(my whole layout is one big image) and just make the circle parts use the opacity filter (I would like each one to be separate, but still part of the main image)

For example: when I go over one of the circles it would change to a lighter shade, but when I go off of the circle it would change back to normal. Is that possible?