Tag 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]

Most common computer display resolutions in the first half of 2012

screen-resolutions

Hi folks, this table will help you while designing or creating website html pages with different screen resolutions when you using css media queries like “@media screen and (max-width:1024px), @media screen and (device-aspect-ratio: 16/9) etc “. Some example are given below.

Below css rule checking with maximum width of device and apply margin.

@media screen and (max-width:1024px){
.container {
margin:0 20px;
}
@media screen and (max-width:1152px){
.container {
margin:0 50px;
}
}

if a screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as “16:9”), the following Media Queries will all match the device:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
Most common display resolutions in the first half of 2012
Acronym Aspect ratio Width (px) Height (px)  % of Steam users  % of web users
VGA 4:3 640 480 00.02 n/a
3:4 768 1024 n/a 01.93
SVGA 4:3 800 600 00.17 01.03
WSVGA 17:10 1024 600 00.31 02.25
XGA 4:3 1024 768 05.53 18.69
16:9 1093 614 n/a 00.63
XGA+ 4:3 1152 864 00.87 01.55
WXGA 16:9 1280 720 01.51 01.54
WXGA 5:3 1280 768 n/a 01.54
WXGA 16:10 1280 800 04.25 12.97
SXGA– (UVGA) 4:3 1280 960 00.72 00.72
SXGA 5:4 1280 1024 10.66 07.49
~16:9 1311 737 n/a 00.35
HD ~16:9 1360 768 02.36 02.28
HD ~16:9 1366 768 17.19 19.14
SXGA+ 4:3 1400 1050 00.18 n/a
WXGA+ 16:10 1440 900 07.60 06.61
HD+ 16:9 1600 900 06.82 03.82
UXGA 4:3 1600 1200 00.53 n/a
WSXGA+ 16:10 1680 1050 10.26 03.66
FHD 16:9 1920 1080 25.04 05.09
WUXGA 16:10 1920 1200 03.65 01.11
QWXGA 16:9 2048 1152 00.13 n/a
WQHD 16:9 2560 1440 00.72 00.36
WQXGA 16:10 2560 1600 00.19 n/a
Other 01.29 07.25
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Create a Simple Accordion with jQuery and CSS

As per the project I have to build a simple accordion and would like to share with you. So here I’m explaining how to build an accordion with jQuery and css. A plus and minus and a small gray gradient images are used in accordion. You can download and use for personal or commercial works but forbidden to redistribute other than bijusubhash.com. If you like this then please spread or back link from your website.The steps are explaining below. You can see a demo and download too.
Simple Accordion Example

Step 1: The jQuery Code

<script type="text/javascript" src="../js/jquery.js" ></script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
$('.adCntnr div.acco2:eq(0)').find('div.expand:eq(0)').addClass('openAd').end() /*find the first child and opended by default, and add class openAd*/
.find('div.collapse:gt(0)').hide().end()
.find('div.expand').click(function() {
$(this).toggleClass('openAd').siblings().removeClass('openAd').end()
.next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
return false;
});
})
</script>

Step 2 : CSS Markup

/* Accordion Styles starts */
.adqstdts {
min-height:75px;
background:#f0f0f1;
border:1px solid #dbdbdc;
border-left:none;
border-right:none;
margin-top:7px;
padding:7px;
}
.asdDts {
color:#737374;
font-size:12px;
font-weight:normal;
line-height:25px;
}
.printAd {
background:url(../images/printer.png) no-repeat ;
padding-left:25px;
padding-bottom:2px;
padding-top:2px;
color:#737374;
}
.exportAd {
background:url(../images/document-export.png) no-repeat ;
padding-bottom:2px;
padding-left:25px;
padding-top:2px;
color:#737374;
}
.adCntnr .acco2 .expand {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:28px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}
.adCntnr .acco2 .expand a{
background:url(../images/rnd_plus_icon.png) no-repeat 0 4px;
padding-left:25px;
text-decoration:none;
}
.adCntnr .acco2 .openAd a{
background:url(../images/rnd_minus_icon.png) no-repeat 0 4px ;
padding-left:25px;
color:#333 !important;
text-decoration:none;
}

.adCntnr .acco2 .openAd {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:27px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}

.adCntnr .acco2 .expand a{
color:#676f72;
}

.adCntnr  .accCntnt {
border:1px solid #cfcece;
border-top:none;
padding:10px;
background:#f1f1f1;
}
/* Accordion Styles starts */

Step 3 : HTML Markup

<div class="adCntnr" >
<div class="acco2">
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the First Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<div class="titlebarLeftc" style="height:25px; border-bottom:1px solid #dadada;">
<div class="titlebarRightc" style="height:25px;">
<div class="titlebar" style="height:25px;">
<table class="dataGridHdr" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="dataGridHdr_boder" style="padding-left:0;";>Label One</td>
<td width="210" class="dataGridHdr_boder2">Label Two</td>
<td width="45" class="dataGridHdr_boder2">Label</td>
<td width="40" class="dataGridHdr_boder3">Label</td>
</tr>
</table>
</div>
</div>
</div>
<div class="dataGrid_container">
<table class="dataGrid" width="100%" cellpadding="0" cellspacing="0">
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">60%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">10%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit </td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">20%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder" >Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">30%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
</table>
</div>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Second Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Third Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Back to Tutorial</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
<div style="text-align:center;"><a href="#">Back to the Tutorial</a></div>
</p>
</div>
</div>
</div>
</div>
Simple Accordion with jQuery (2744)
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]