Pass function as css value in jQuery

In jQuery version 1.4, it allows us to pass a function as css value for the method .css(). According to the document :

.css( propertyName, function(index, value) )
propertyName
Type: String
A CSS property name.

function(index, value)
Type: Function()

Definition: A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

The basic idea is, when you use .css() method and pass function as value. It will call the function with passing back the current element index and current value (the css property) as argument for dynamic computation or set under some conditions. Then after computed, return value for to set the target "propertyName".

For example: You can think there is a "Increase font size" button in your web site and you would like to double size the current font size when clicked the button. You can make use of .css to achieve that.

Code example : Click the "Bigger hello world"

Hello world

Source code :

<input type="button" value="Bigger hello world" id="enlargeBtn" />
<div id="helloWorldContent">
 Hello world    
</div>

<script type="text/javascript">
 $("#enlargeBtn").on('click', function(){
   $("#helloWorldContent").css('font-size', function(index, value){
     var size = parseInt(value, 10);
     return size*2;
   });
 });
</script>

Shorten string with ellipsis by CSS

Sometimes, when we are designing or developing web site and unfortunately there is a very long sentence appear. It is possible to make the layout distorted and you may think it is not beautiful. At this moment, the idea come from our brain is to replace the sentence by using "...". But, how to do that?

For example, assume we have a sentence below :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Now, we would make use of css text-overflow to illustrate how ellipsis can be appended at the end of the string. Basically you have to set width to make a boundary for the element and overflow hidden.

<style type="text/css">
.w200C 
{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;    
 width: 200px;
}
</style>

The css above is bound the block to 200px, hidden the overflow content and append ellipsis. After applying the css, the sentence will become shorten with ellipsis as below:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Easy? But we may want the whole sentence can be displayed when user mouse over it. We can still use css to solve this problem by reset the overflow, width and white-space to default value.

<style type="text/css">
.w200C:hover
{
 overflow:visible;
 width:auto;
 white-space:normal;
}
</style>

Try to mouse over the sentence below and have a nice day :)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever