4

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/

Improve this question
6
  • stackoverflow.com/questions/9398870/… Commented Jan 6, 2015 at 3:13
  • use auto when you want to ignore other value Commented Jan 6, 2015 at 3:14
  • Thank you all. Bungle did answer the question, it was written in the jQuery help! I should start paying more attention to the official help information. But I was aware of using extra classes instead of trying to modify the selector to achieve the same result but my stylesheet is already too complex and I want to avoid creating more classes. That is why I really like Cattla solution (also mentioned by charlietfl). So the trick is not to try to remove what cannot be removed but instead to modify it in a way that it does not get in the way (by using 'auto'). Nice! Commented Jan 6, 2015 at 3:41
  • @Mörre - weirdly, I had seen that question before posting mine here but I could not relate it to my problem. I could not relate the use of 'auto' as a solution, it never crossed my mind even to try it. I was completely obsessed with the idea of REMOVING the property, not modifying it. Commented Jan 6, 2015 at 3:50
  • 1
    Glad you found a solution. FWIW, the advantage to using classes is that it honors the separation of concerns - i.e., it keeps styling in the CSS, not in the JS. On a smaller project, using .css() so update styling works just fine, but it becomes more difficult to maintain as the project grows. If at some point you decide that 50px looks better than 30px, you'll be hunting through JS code to find the various places that you set 30px, rather than updating it centrally in a stylesheet. Commented Jan 6, 2015 at 4:25

3 Answers 3

Reset to default
6

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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/

Improve this answer

Comments

1

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'
    }
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.