CODEWITHSUNDEEP
jquery
blue-sky
blue-sky

Reputation: 53916

Do not update css when draggable is disabled

On this fiddle when I click disable'Li Point1' the text ebcomes greyed out http://jsfiddle.net/adrianjsfiddlenetuser/Q9sHz/14/

Can the original styling of the element be maintained(not greyed out) ?

Upvotes: 1

Views: 1909

Answers (3)

saluce
saluce

Reputation: 13360

You have three options. You can either remove the styles from jquery-ui.css for .ui-state-disabled, you can override the style in your own custom style sheet, or you can flag the altered properties as !important.

Remove Styles

To remove the styles, you need to edit jquery-ui.css and look for the .ui-state-disabled rule (in jQuery 1.7.2, it's on line 262). Remove all the styles within there (you'll see three, opacity, filter, and background-image.

The disadvantage of this is that if you ever update jQuery and get a new CSS file to go with it, you'll lose your edits.

Add Own Stylesheet

You can add your own rule for .ui-state-disabled and change the style of disabled elements. Since ui-state-disabled is used for everything in jQuery that is disabled, I'd suggest defining your rule as exclusive to li, or set a class on your ul and define the styles for that specifically.

<ul class=".noStyleDisableDrag">
    ...
</ul>

.noStyleDisableDrag .ui-state-disabled {
    opacity: 1;
    filter: none;
    background-image: inherit;
}

Flag as !important

You can also add the opacity, filter, and background-image style to other rules that define how that particular item is supposed to appear and use the !important flag. It isn't the most recommended way of doing things, though, because it can wreak havoc on your CSS style debugging if you forget that you flagged it, but it is an option. To do that, you simply style your li as such:

li {
    opacity: 1 !important;
    filter: none !important;
    background-image: (whatever you want, or none) !important;
}

Note that in this case, if you aren't setting a background image on the draggable, then you don't need the line to set the background-image; just set opacity and filter to be un-overridden. Also note that these CAN be overridden by JavaScript, so they aren't set in stone.

Of the three, you may need to use a combination. My suggestions is to use your own custom stylesheet to override the opacity and filter properties. If you are using background-images, you may need to use !important to keep it from being removed by the ui-state-disabled rule. But use the !important flag as sparingly as possible.

Upvotes: 3

Eric Fortis
Eric Fortis

Reputation: 17360

Line 262 jquery-ui.css remove the filter and the opacity line

 .ui-state-disabled, .ui-widget-content .ui-state-disabled,
 .ui-widget-header .ui-state-disabled {
     background-image: none; 
 }

Upvotes: 1

Geert
Geert

Reputation: 1804

Clicking the disable button adds a CSS class ui-state-disabled to the element. Just overwrite the styles for that class.

.ui-state-disabled { opacity:1; }

Upvotes: 0

Related Questions