Category Archives: HTML

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]

Simple Popup using CSS and jQuery

In this post I’m explaining, how to create a simple popup using CSS and jQuery. There is a lot of popup script available over the net like, lightbox, tinybox etc. As per the part of my project I want to create a simple popup without any animation and it should be automatically aligned center vertical and horizontal. For this popup, here I’m explaining each code html, css and jquery. Ok lets start with html first.
Simple Popup Box using CSS and jQuery

Step One HTML

<div class="QTPopup">
    	<div class="popupGrayBg"></div>
    	<div class="QTPopupCntnr">
        	<div class="gpBdrLeftTop"></div>
            <div class="gpBdrRightTop"></div>
            <div class="gpBdrTop"></div>
            <div class="gpBdrLeft">
            	<div class="gpBdrRight">
                	<div class="caption">
                    	Send Your Messages
                    </div>
                    <a href="#" class="closeBtn" title="Close"></a>
                    
                    <div class="content">
                    	<table width="100%" cellpadding="0" cellspacing="0">
                        	<tr>
                            	<td>Name</td>
                            	<td width="260">
                                    <div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:250px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:245px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                            <tr>
                            	<td colspan="2">&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>Email</td>
                            	<td width="260">
                                    <div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:250px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:245px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                        </table><br />
                       
                        <table>
                            <tr>
                            	<td>&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>
                                	Subject
                                </td>
                            </tr>
                            <tr>
                            	<td style="height:5px;"></td>
                            </tr>
                        	<tr>
                            	<td>
                                	<div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:414px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:405px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                            <tr>
                            	<td>&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>
                                	Message
                                </td>
                            </tr>
                             <tr>
                            	<td style="height:5px;"></td>
                            </tr>

                            <tr>
                            	<td>
									<textarea class="textareagradiant" style="width:428px; height:116px; border:1px solid #CFCECE;"> </textarea> 

                                </td>
                            
                            </tr>
                            <tr>
	                            <td style="height:5px;"></td>
                            </tr>
                            <tr>
	                            <td style="height:10px;"></td>
                            </tr>
                            <tr>
                            	<td>
                                <input type="button" value="Submit" class="gbtn_s"  />
                                <input type="button" value="Reset" class="gbtn_s"  />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="gpBdrLeftBottom"></div>
            <div class="gpBdrRightBottom"></div>
            <div class="gpBdrBottom"></div>
    </div>
    </div>

Step Two CSS

Here we are using only three images for popup. One is for the curve of the popup, its using a master image for curves. And the another two are for close bottons which for normal and mouse over buttons.

/*---popup styles starts here ----- */
	.popupGrayBg {
		position:fixed; 
		width:100%; 
		height:100%; 
		background:black; 
		z-index:1001; 
		left:0; 
		top:0; 
		opacity:.5;
		filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
		}
	.QTPopupCntnr {
		width:487px; 
		position:fixed; 
		z-index:1200; 
		background:gray; 
		left:50%; 
		top:50%; 
		margin-left:-244px; 
		margin-top:-276px;
		}
	.gpBdrLeftTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left top no-repeat;
		float:left;
		}
	.gpBdrRightTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right top no-repeat;
		float:right;
		}
	.gpBdrTop {
		height:3px;
		background:#a9b6e1;
		border-top:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrLeft {
		border-left:3px solid #3b4f91;
		background:#fff;
		}
	.gpBdrRight {
		border-right:3px solid #3b4f91;
		background:#fff;
		min-height:400px;
		position:relative;
	}
	.gpBdrLeftBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left bottom no-repeat;
		float:left;
		}
	.gpBdrRightBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right bottom no-repeat;
		float:right;
		}
	.gpBdrBottom {
		height:3px;
		background:#fff;
		border-bottom:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrRight .caption {
		background:#a9b6e1;
		line-height:38px;
		padding-left:10px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
		font-weight:bold;
		color:#3b4f91;
		}
	.gpBdrRight .closeBtn {
		background:red;
		width:31px;
		height:31px;
		position:absolute;
		right:-15px;
		top:-15px;
		background:url(../images/grn_pp_cls_btn_normal.png) no-repeat;
		
		}
	.gpBdrRight .closeBtn:hover {
		background:url(../images/grn_pp_cls_btn_over.png) no-repeat;
		}
		
	.gpBdrRight .content {
		padding:25px;
		font-weight:normal;
		}
	
/*---popup styles ends here ----- */

Step Three jQuery

<script type="text/javascript" src="js/jquery.js" ></script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
	$(".QTPopup").css('display','none') // set the popup display none default
	$(".lnchPopop").click(function(){ // launch the popup
		$(".QTPopup").animate({width: 'show'}, 'slow');})
		$(".closeBtn").click(function(){ // close the popup			
			$(".QTPopup").css('display', 'none');
		})
})
</script>

You can download the popup script and see the demo too.

Simple Popup using CSS and jQuery (12996)
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

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

Create a Custom HTML5 Video Player with CSS3 and JQuery

Create a Custom HTML5 Video Player with CSS3 and JQuery

Are you a professional web designer, and you want to create a video player which look consistent across browsers. Each browser provide their own look and feel skin for the browser. And If you want to control to look the same on each browsers and integrate with your own design, you will have to create your own controls from scratch.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

website url

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