Category Archives: CSS

Add CSS !important Declarations Using jQuery

css_important_declaration

While using jQuery and CSS, in some cases we need to use css important declarations using jQuery. CSS important declarations are help to override the parent css rules from a particular child object. For example, a list have a font size of 14px and font-weight of bold with red color and we need to change the third child element of the list object’s font size to 10px, font-weight to normal and color of the text to be blue. This can be done with CSS like given below.

ul li{
  font-size:14px;
  font-weight:bold;
  color:red;
}
ul li.blue{
  font-size:10px !important;
  font-weight:normal !important;
  color:blue !important;
}

In some cases we need to use the CSS important declarations with jQuery. The normal method of applying  CSS rules using jQuery is given below.

  $('.listClassName').css('font-size','10px');

If we attach the important declaration with the font size will through the error in jQuery. Then how to ?
Find the method from below.

  $('.listClassName').css('cssText','font-size:10px !important;');

The above code will apply css inline code ‘ font-size:10px !important;’ to an element which have the class name of ‘listClassName’. Enjoy.

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

BS-Progress Bar Pack

BS Progress Bar Pack

Hi folks, I’m just introducing a progress bar pack that you can use for application or website wherever. The pack contains three types of progress bar container and six different type colors of animated gif progress bars.The container have colors with gray, white and black and have title like “Please wait…” and a footer text “Your request is being processed” which you can change as your own content. You can download the source code and images and I have just explained the code so you and learn or edit as you like.

Demo: BS Progress Bar Demo

How To ?

Step 1: CSS

/* Type one Container /*

	.prg_bar_bg{
		background:url(images/progress_bar_bg.png) no-repeat;
		width:298px;
		height:89px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#323232;
		}
	.prg_bar_bg .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#5d5d5d;
		padding-top:5px;
		}

/* Type Two Container /*

	.prg_bar_bg_black{
		background:url(images/progress_bar_bg_black.png) no-repeat;
		width:302px;
		height:91px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_black .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_black .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#ccc;
		}
	.prg_bar_bg_black .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#999;
		padding-top:5px;
		}

/* Type Three Container /*

	.prg_bar_bg_white{
		background:url(images/progress_bar_bg_white.png) no-repeat;
		width:307px;
		height:90px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_white .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_white .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#333;
		}
	.prg_bar_bg_white .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#666;
		padding-top:5px;
		}

Step 2: HTML

	<div class="prg_bar_bg"> <!-- change this class for different container style -->
    	<div class="prg_title">Please wait...</div>
    	<div class="prg_bar"><img src="images/progress_bar_violet.gif" /></div><!-- call different progress bar image -->
    	<div class="prg_cntnt">Your request is being processed</div>
    </div>
BS Progress Bar Pack (542)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Rating Star with CSS

Rating Star with CSS

Hi folks, In this post I just describing about how to create rating star with CSS. You can create the mouseover effects verry easly with css. Only the functionality you have to add. Just try this.

1) HTML

<body>
<div class="star1">
<div class="star2">
<div class="star3">
<div class="star4">
<div class="star5">
</div>
</div>
</div>
</div>
</div>
</body>

2) CSS

.star1 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
}
.star2 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star3 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star4 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star5 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star1:hover {
background:url(images/gold_star.png) no-repeat;
}
.star2:hover {
background:url(images/gold_star.png) no-repeat;
}
.star3:hover {
background:url(images/gold_star.png) no-repeat;
}
.star4:hover {
background:url(images/gold_star.png) no-repeat;
}
.star5:hover {
background:url(images/gold_star.png) no-repeat;
}
/* The image icon you have to replace with your own and width and height too. */

3) Demo

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]