jQuery: Declaring Multiple CSS Properties as Variable

The Basic
In jQuery, we can declare multiple CSS properties for a particular element (jQuery object) with the css() method like so:

the_element.css({
  background: "lime",
  color: "#babe01",
  "box-sizing": "border-box",
  "other_property": "value"
});

The property and value pairs are declared as an object list.

As you can see above, there are CSS properties wrapped within quotations, we can use double quote (") or single ('), just be consistent with it (for the opening and closing mark).
The basic rule of thumb, if we have CSS property with a punctuation mark (-), we need to wrap it with quotations. Such as box-shadow, transform-origin, background-image, text-shadow, text-transform, etc.
For other CSS properties which aren't using punctuation mark, we don't need to wrap it. BUT, if it doesn't work, just wrap it then. With the quotations.

Also, for the value, if it's not a numeric value (for instance: 0, 1, 5, etc), we need to wrap it with quotations, such as 150px, #000, 0 0 20px red inset, etc.

Now for Gradient Color and Variable Declaration
For instance, we want to use different color gradient on an element on click event.

DEMO

Click on this box below, and it will have background color change.

This is the HTML of the demo above (CSS, HTML element, and the jQuery):

<!-- The CSS -->
<STYLE>
  .the_element {
    height:480px;
    border-radius:20px;
    margin: 0 10px;
    box-shadow:2px 2px 4px #333;
    overflow: hidden;
  }
  .the_element:hover {
    cursor:pointer;
  }
  .the_element:active {
    box-shadow:0 0 0 #333;
  }
</STYLE>

<!-- The ELEMENT -->
<div class="the_element" title="click to change"></div>

<!-- include jQuery library just above the body script [or] in the head section of HTML -->
<script src="your_jQuery_library.js"></script>

<!-- the body script -->
<!-- pay attention at first_gradient and second_gradient variables declaration -->
<SCRIPT>
 $(function () { // closure
 
  var $the_element = $(".the_element"),  // the element
      first_gradient = { //the first gradient variable
        //fallback for not supported browser
        background: "#EF69DD",
        // 1st RADIAL GRADIENT STARTS
        // IE < 10
        "background-image": "-ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #EF69DD 100%)",
        // For old Firefox, Opera, Safari, and Chrome
        // Mozilla Firefox 
        "background-image": "-moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #EF69DD 100%)",
        // Opera
        "background-image": "-o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #EF69DD 100%)",
        // Webkit (Safari/Chrome 10)
        "background-image": "-webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #EF69DD))",
        // Webkit (Chrome 11+)
        "background-image": "-webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #EF69DD 100%)",
        // W3C Markup, new browsers + IE 10
        "background-image": "radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #EF69DD 100%)"
      },
      second_gradient = { //the second gradient variable
        //fallback for not supported browser
        background: "#FFFFFF",
        
        // 2nd RADIAL GRADIENT STARTS
        // IE < 10
        "background-image": "-ms-radial-gradient(center, circle farthest-corner, #EF69DD 0%, #FFFFFF 100%)",
        // For old Firefox, Opera, Safari, and Chrome
        // Mozilla Firefox 
        "background-image": "-moz-radial-gradient(center, circle farthest-corner, #EF69DD 0%, #FFFFFF 100%)",
        // Opera
        "background-image": "-o-radial-gradient(center, circle farthest-corner, #EF69DD 0%, #FFFFFF 100%)",
        // Webkit (Safari/Chrome 10)
        "background-image": "-webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #EF69DD), color-stop(1, #FFFFFF))",
        // Webkit (Chrome 11+)
        "background-image": "-webkit-radial-gradient(center, circle farthest-corner, #EF69DD 0%, #FFFFFF 100%)",
        // W3C Markup, new browsers + IE 10
        "background-image": "radial-gradient(circle farthest-corner at center, #EF69DD 0%, #FFFFFF 100%)"
      };
    
    // initialize, inject the first_gradient variable to $the_element
    $the_element.css(first_gradient)
      /* put fake class to reference the first gradient */
      .addClass("one");
    
    // change the gradient (variable) on click event
    $the_element.click(function () {
      if ($(this).hasClass("one")) {
        $(this).css(second_gradient) /* replace the first_gradient variable with second_gradient */
          /* remove the first gradient reference, replace it with second gradient */
          .removeClass("one").addClass("two");
      } else {
        $(this).css(first_gradient) /* replace the second_gradient variable with first_gradient */
          /* remove the second gradient reference, replace it with first gradient */
          .removeClass("two").addClass("one");
      }
    });
  
 });     
</SCRIPT>

Why do we need to do this? Isn't that via CSS itself is much simpler?

YES.

BUT, sometimes, we want to put dynamical thing on our page, such as.. hm, things.

Still, declaring multiple classes via CSS then add/remove them in the jQuery is much simpler than this.

No doubt.

So then, what's the point of this post?

Hm, to show the variable declaration of object in jQuery css() method.

Oh, right.

*fistbump

Anywho, CSS is about coding the look of a page or a particular element.
Through a neatly typed script, we can make a page/an element interactive to visitor. Then, we can communicate that to our server to read/store some things, then we can analyze the database, then a spooky ghost will come to visit^{Halloween related}.

LINKS

Microsoft Gradient Maker, right over there
jQuery CSS method at jQuery

Thanks for visiting!

Monkey Raptor

Monkey Raptor

Saturday, November 1, 2014

jQuery: Declaring Multiple CSS Properties as Variable

No comments

Post a Comment