28348

jQuery .css() method not working

I have a code that uses jQuery .css() method to modify the style of a DIV but it is not working. Here is a simplified version of my code that replicates the issue.

HTML:

<input type="radio" name="show" id="showleft" value="showleft">Left <input type="radio" name="show" id="showright" value="showright">Right <div id="cfwrapper">XXXXXXXXX</div>

CSS:

#cfwrapper { bottom: 10px; left: 30px; position: fixed; }

JavaScript:

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { // remove property 'right:30px' // add property 'left:30px' } else if (event.target.id == 'showright') { $('#cfwrapper').css('left',''); // remove property 'left:30px' // add property 'right:30px' } });

What happens in the above code is that the line $('#cfwrapper').css('left',''); does not work. I would expect it to remove the 'left' property from "cfwrapper" ("XXXXXXXXX" would then move 30px to the left) and then I would use a similar statement - $('#cfwrapper').css('right','30px'); - to add a "right" property so that "XXXXXXXXX" would then go to the right of the page, but it does not work.

Can anyone tell me why it is not working? Wasn't it supposed to work?

JSFiddle: http://jsfiddle.net/fidnut/hLqngbsb/

Answer1:

try this .css('left','auto')

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { document.getElementById('op').innerHTML='Left side'; $('#cfwrapper').css({'left':'30px','right':'auto'}); } else if (event.target.id == 'showright') { document.getElementById('op').innerHTML='Right side'; $('#cfwrapper').css({'left':'auto','right':'30px'}); } });

http://jsfiddle.net/hLqngbsb/2/

Answer2:

Please see the answer to this question.

From the jQuery docs:

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery'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 <style> element.

A more maintainable approach would be to add/remove classes to control the styling:

http://jsfiddle.net/0hh80mkd/2/

Answer3:

Use class

.cfwrapper { bottom: 10px; left: 30px; position: fixed; } .cfwrapperDis{ bottom: 10px; left: 30px; position: fixed; }

then

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { // remove property 'right:30px' // add property 'left:30px' } else if (event.target.id == 'showright') { $('#cfwrapper').removeClass("cfwrapper").addClass("cfwrapperDis"); // remove property 'left:30px' // add property 'right:30px' } });

Recommend

  • Magento - Custom subject of order email
  • How to Use Captcha Plugin in CodeIgniter
  • rails app not finding fontawesome icons on heroku
  • Smfony2 : HWIOauthBundle : Using multiple locales
  • Getting resultset from insert statement
  • Firebase Datasnapshot for getChildrenCount sets to zero
  • Get Facebook Page Likes all at once in c#
  • Converting a doc to a pdf in a mvc c# environment
  • Related Videos with part contentDetails and Statistics - Youtube API V3
  • Using non-default service account in Google Cloud dataproc
  • Android Google maps co-ordinates
  • Redis - Using CONFIG SET on the fly in a master slave relationship
  • Tibco error: ClassNotFoundException: com.tibco.tibjms.naming.TibjmsInitialContextFactory
  • imported a certificate.pfx into cacerts and still getting “PKIX…unable to find valid certification p
  • Reading space separated values file in c++ error
  • Enumerating Controls on a Form
  • order post according to custom array position
  • How does document.ready work with angular element directives?
  • Blackberry - Custom EditField Cursor
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • $wpdb not working in file of WordPress plugin
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • FileReader+canvas image loading problem
  • Body moving without any force applied? (Box2d)
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • What is the “return” in scheme?
  • RectangularRangeIndicator format like triangular using dojo
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to check if every primary key value is being referenced as foreign key in another table
  • Change an a tag attribute in JavaScript based on screen width
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • python regex in pyparsing
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once