From the [jQuery docs](http://api.jquery.com/css/): 

&gt; Setting the value of a style property to an empty string — e.g. `$(&#39;#mydiv&#39;).css(&#39;color&#39;, &#39;&#39;)` — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery&#39;s `.css()` method, or through direct DOM manipulation of the `style` property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or `&lt;style&gt;` element.

I think you can also do:

    $(&#39;#element&#39;).css(&#39;background-color&#39;, &#39;&#39;);

That&#39;s what I used to do a long time ago for the `display` property in plain-old-javascript to show/hide a field.


Actually, the syntax I thought was incorrect (with `null`) seems to be working -- my selector was just improperly formed, and thus yielding no elements. D&#39;oh!

Try this:

    $(&#39;#element&#39;).css(&#39;background-color&#39;, &#39;inherit&#39;);

For what it&#39;s worth this appears not to work in IE 8 for &#39;filter,&#39; I had to use this (in fadeIn callback):

`$(this).attr(&#39;style&#39;, $(this).attr(&#39;style&#39;).replace(/\bfilter:\s*;*/, &#39;&#39;));`

Obviously, I had need to remove an empty inline filter declaration so the CSS could take effect; there were other inline rules so I couldn&#39;t just remove the style attribute.

If it can help, I add a problem with double quote :

```
$(&#39;#element&#39;).css(&quot;border-color&quot;, &quot;&quot;);
```
does not work while

```
$(&#39;#element&#39;).css(&#39;border-color&#39;, &#39;&#39;);
```
works

An enum in Java implements the `Comparable` interface.  It would have been nice to override `Comparable`&#39;s `compareTo` method, but here it&#39;s marked as final.  The default natural order on `Enum`&#39;s `compareTo` is the listed order.

Does anyone know why a Java enums have this restriction?

Why is compareTo on an Enum final in Java?

I am trying to create a WPF application that takes command line arguments. If no arguments are given, the main window should pop up. In cases of some specific command line arguments, code should be run with no GUI and exit when finished. Any suggestions on how this should properly be done would be appreciated.

WPF Command Line

If I set a CSS value on a specific element using:

    $(&#39;#element&#39;).css(&#39;background-color&#39;, &#39;#ccc&#39;);

I want to be able to unset that element-specific value and use the cascaded value, along the lines of:

    $(&#39;#element&#39;).css(&#39;background-color&#39;, null);

But that syntax doesn&#39;t seem to work – is this possible using another syntax?

**Edit:** The value isn&#39;t inherited from the parent element – the original values comes from an element-level selector. Sorry for any confusion!

How do I unset an element&#39;s CSS attribute using jQuery?

If I set a CSS value on a specific element using:
<pre><code class="hljs language-javascript">$('#element').css('background-color', '#ccc');
</code></pre>
I want to be able to unset that element-specific value and use the cascaded value, along the lines of:
<pre><code class="hljs language-javascript">$('#element').css('background-color', null);
</code></pre>
But that syntax doesn't seem to work – is this possible using another syntax?
Edit: The value isn't inherited from the parent element – the original values comes from an element-level selector. Sorry for any confusion!

I want to use jQuery inside a firefox extension,
I imported the library in the xul file like this:

    &lt;script type=&quot;application/x-javascript&quot; src=&quot;chrome://myExtension/content/jquery.js&quot;&gt; &lt;/script&gt;

but the $() function is not recognized in the xul file neither do the jQuery().

I googled about the problem and found some solutions but no one did work with me:
http://gluei.com/blog/view/using-jquery-inside-your-firefox-extension
http://forums.mozillazine.org/viewtopic.php?f=19&amp;t=989465

I&#39;ve also tried to pass the &#39;content.document&#39; object(which refrences the &#39;document&#39; object) as the context parameter to the jQuery function like this:

    $(&#39;img&#39;,content.document);

but still not working,
does any one came across this problem before?

How to use jQuery in Firefox Extension

I&#39;m working on some JQuery to hide/show some content when I click a link. I can create something like:

    &lt;a href=&quot;#&quot; onclick=&quot;jquery_stuff&quot; /&gt;

But if I click that link while I&#39;m scrolled down on a page, it will jump back up to the top of the page.

If I do something like:

    &lt;a href=&quot;&quot; onclick=&quot;jquery_stuff&quot; /&gt;

The page will reload, which rids the page of all the changes that javascript has made.

Something like this:

    &lt;a onclick=&quot;jquery_stuff&quot; /&gt;

Will give me the desired effect, but it no longer shows up as a link. Is there some way to specify an empty anchor so I can assign a javascript handler to the `onclick` event, without changing anything on the page or moving the scrollbar?




How can I create an empty HTML anchor so the page doesn&#39;t &quot;jump up&quot; when I click it?

I have a select control, and in a javascript variable I have a text string.

Using jQuery I want to set the selected element of the select control to be the item with the text description I have (as opposed to the value, which I don&#39;t have).

I know setting it by value is pretty trivial. e.g.

    $(&quot;#my-select&quot;).val(myVal);

But I&#39;m a bit stumped on doing it via the text description. I guess there must be a way of getting the value out from the text description, but my brain is too Friday afternoon-ed to be able to work it out.

jQuery - setting the selected value of a select control via its text description

I have this label control in my web page

    &lt;asp:Label ID=&quot;Label1&quot; runat=&quot;server&quot; Text=&quot;test&quot;&gt;&lt;/asp:Label&gt;

And when the page rendered the id of the control changes to something like this

      &lt;span id=&quot;ctl00_ContentPlaceHolder1_Label3&quot;&gt;test&lt;/span&gt;

How can I stop asp.net from changing IDs in order to perform a jQuery operation like this

    $(&#39;#label1&#39;).html(xml);


How to stop ASP.NET from changing IDs in order to use jQuery

How do you set the cursor position in a text field using jQuery?  I&#39;ve got a text field with content, and I want the users cursor to be positioned at a certain offset when they focus on the field.  The code should look kind of like this:

    $(&#39;#input&#39;).focus(function() {
      $(this).setCursorPosition(4);
    });

What would the implementation of that setCursorPosition function look like?  If you had a text field with the content abcdefg, this call would result in the cursor being positioned as follows: abcd**|**efg.

Java has a similar function, setCaretPosition.  Does a similar method exist for javascript?

**Update: I modified CMS&#39;s code to work with jQuery as follows:**

    new function($) {
      $.fn.setCursorPosition = function(pos) {
        if (this.setSelectionRange) {
          this.setSelectionRange(pos, pos);
        } else if (this.createTextRange) {
          var range = this.createTextRange();
          range.collapse(true);
          if(pos &lt; 0) {
            pos = $(this).val().length + pos;
          }
          range.moveEnd(&#39;character&#39;, pos);
          range.moveStart(&#39;character&#39;, pos);
          range.select();
        }
      }
    }(jQuery);

jQuery Set Cursor Position in Text Area

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.

I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of CSS?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .divClass {
         position: absolute; 
         left: 25px; 
         top: 25px; 
         width: 320px;
         height: 300px; 
         z-index: 1000; 
    }

&lt;!-- language: lang-html --&gt;

    &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot;&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;asp:HyperLink ID=&quot;lnkProgram&quot; runat=&quot;server&quot;&gt;&lt;/asp:HyperLink&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&gt;
             &lt;div class=&quot;divClass&quot;&gt;
               Some Data
             &lt;/div&gt;
         &lt;/td&gt;
      &lt;/tr&gt; 
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

I am showing and hiding the div with `.divClass` onclick via the `&lt;asp:hyperlink&gt;` using jQuery.

Minimum and maximum value of z-index?

I&#39;m working on a login page for my website and I want to bold the label that comes **before** the input box when the text box gains focus. Right now I have the following markup:

    &lt;label for=&quot;username&quot;&gt;Username:&lt;/label&gt;
    &lt;input type=&quot;textbox&quot; id=&quot;username&quot; /&gt;

    &lt;label for=&quot;password&quot;&gt;Password:&lt;/label&gt;
    &lt;input type=&quot;textbox&quot; id=&quot;password&quot; /&gt;

I can use the adjacent selector to select the label **after** the text box, but I can&#39;t select the element before it. I can use this CSS selector rule, but it only selects the label after, so when the username text box gains focus, the password label becomes bold.

    input:focus + label {font-weight: bold}

Is there anything I can do to make this work? I know JavaScript could be used to easily do this, but I&#39;d like to use a purely CSS-based solution if possible, I just can&#39;t figure out a way to do it.

CSS Selector for selecting an element that comes BEFORE another element?

In what situations is it more appropriate to use an HTML &lt;code&gt;IMG&lt;/code&gt; tag to display an image, as opposed to a CSS &lt;code&gt;background-image&lt;/code&gt;, and vice-versa?

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.


When to use IMG vs. CSS background-image?

I want to show an image from an URL with a certain width and height even if it has a different size ratio. 
So I want to resize (maintaining the ratio) and then cut the image to the size I want.
&lt;p&gt;
I can resize with html `img` property and I can cut with `background-image`.
&lt;br&gt;
How can I do both?


Example:

This image:

![enter image description here][1]

&lt;br&gt;
Has the size `800x600` pixels and I want to show like an image of `200x100` pixels

&lt;br&gt;
With `img` I can resize the image `200x150px`:

    &lt;img 
        style=&quot;width: 200px; height: 150px;&quot; 
        src=&quot;http://i.stack.imgur.com/wPh0S.jpg&quot;&gt;

&lt;br&gt;
That gives me this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img style=&quot;width: 200px; height: 150px;&quot; src=&quot;https://i.stack.imgur.com/wPh0S.jpg&quot;&gt;

&lt;!-- end snippet --&gt;

&lt;br&gt;

And with `background-image` I can cut the image `200x100` pixels.

    &lt;div 
        style=&quot;background-image:
               url(&#39;https://i.stack.imgur.com/wPh0S.jpg&#39;); 
        width:200px; 
        height:100px; 
        background-position:center;&quot;&gt;&amp;nbsp;&lt;/div&gt;

&lt;p&gt;
Gives me:


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

        &lt;div style=&quot;background-image:url(&#39;https://i.stack.imgur.com/wPh0S.jpg&#39;); width:200px; height:100px; background-position:center;&quot;&gt;&amp;nbsp;&lt;/div&gt;

&lt;!-- end snippet --&gt;



&lt;p&gt;&lt;br&gt;&lt;p&gt;
How can I do both?
&lt;br&gt;
Resize the image and then cut it the size I want?


  [1]: https://i.stack.imgur.com/wPh0S.jpg

CSS Display an Image Resized and Cropped

I have a long string (a DNA sequence). It does not contain any whitespace character.

For example:

    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

What would be the CSS selector to force this text to be wrapped in a `html:textarea` or in a `xul:textbox`?

Content Type	Original Author	Original Content on Stackoverflow
Question	cdleary	View Question on Stackoverflow
Solution 1 - Jquery	Glenn Moss	View Answer on Stackoverflow
Solution 2 - Jquery	FryGuy	View Answer on Stackoverflow
Solution 3 - Jquery	cdleary	View Answer on Stackoverflow
Solution 4 - Jquery	HectorMac	View Answer on Stackoverflow
Solution 5 - Jquery	Brandon Hill	View Answer on Stackoverflow
Solution 6 - Jquery	merlintintin	View Answer on Stackoverflow

How do I unset an element's CSS attribute using jQuery?

Jquery Problem Overview

Jquery Solutions

Solution 1 - Jquery

Solution 2 - Jquery

Solution 3 - Jquery

Solution 4 - Jquery

Solution 5 - Jquery

Solution 6 - Jquery

WPF Command Line

Why is compareTo on an Enum final in Java?

Attributions