How to edit 'clip' CSS property in JQuery?

Tags: javascript,jquery,html,css

Problem :

I need to edit this 'clip' CSS property:

#bulb_light {
   position: absolute;
   clip:rect(260px, 160px, 260px, 0px);

But not normally, rather, thanks to Jquery's help, so I tried this:

//CSS editing :

$("#bulb_light").css('clip', function () {
        return 'rect(' + newy + 'px, 160px, 260px, 0px);';

which is inside a click event:

$('#Wsender').click(function () {
**//CSS editing** });

NOTE that 'newy' is the variable I created which should take the place of the first parameter of the 'clip' property:

rect(newypx, 160px, 260px, 0px);

meant to be like that.

The issue is that the code is not working when I add this feature with JQuery, but I've found it right in here on StackOverflow. What might be wrong?

Here is the full source code for reference.

Solution :

Just a minor issue, you can't put a semi-colon at the end of the CSS value for this to work:

$("#bulb_light").css('clip', function () {
    return 'rect(' + newy + 'px, 160px, 260px, 0px)' /* <-- Removed semicolon */;

Additionally, I'm not sure where newy is defined, you may not need a function callback for this unless newy is to be calculated for each element:

$("#bulb_light").css('clip', 'rect(' + newy + 'px, 160px, 260px, 0px)');

    CSS Howto..

    Show and hide table column using jQuery

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    LESS - confusion about how mixins take parameters

    How to apply an opacity without affecting a child element with html/css?

    How to make pull right display properly?

    How to design resolution independent CSS elements?


    How can I center a div

    How to show/hide content on click with CSS

    Change jQuery slideshow script to rotate background image defined in css class

    How to programmatically add JS and CSS resources to ?

    How to insert the number into the bottom right of each page by TWIG and CSS

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to reduce this css code [duplicate]

    How to debug a website template which is very slow (client side)?

    How to Change main menu color?

    How to add image after button/div css?

    How to align nav bar to bottom of window with no gap between buttons and window edge

    How do I stop css pushing
  • to the right?
  • How to merge CSS classes?

    How can I override an external css?

    How to add-class and focus the children on keydown function

    CSS breadcrumb - how to make radius small

    How to make a CSS menu from raw HTML code

    HTML / CSS - How to remove a gap between the header and a horizontal menu

    How to wrap text using CSS? [duplicate]

    How do I create a CSS class Union?

    How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub?

    How to implement fade-in and other effects using CSS

    How to apply same CSS property without overriding and multiple times using jquery?