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

Test Your MooTools Code Online with MooShell

Test Your MooTools Code Online with MooShell
Test Your MooTools Code Online with MooShell

MooShell, a utility to test your “MooTool0s” code online. MooShell help you writing and testing HTML, CSS, JavaScrpt and debug Mootools code online. It’s load the result in an iframe. You just need to load the page and edit the fields. You can save the results also. MooShell Currently working with Mootools 1.2.3 only.

website url

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

Discussion Forum for Web and Graphics

Discussion Forum for Web and Graphics
Discussion Forum for Web and Graphics

Hi Folks, I’m very happy to tell you that I have started a forum for discussion about web or graphics related for all of you. Available with General, Web Design & Site Administration , Graphics, Images & Editing, Showcases & Inspiration, Freebies, WordPress, PHP,Flex,  CSS & (X)html and JavaScript. Start your discussion.

Go to the FORUM here

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

Fixed Table Header JQuery Plugin

Fixed Table Header JQuery Plugin
Fixed Table Header JQuery Plugin

You have a table with many rows and coloms and you need to fix the table header. Its not possible on the normal way. Have some CSS scripts there to fix the table header but dosn’t support some browsers. Chromaloop has come a solution with JQuery Plugin. He described about the plugin and given source files for download. In the download package, you will see an example.html file of how to setup the chromatable properly, in most cases it should work perfectly out of the box. That’s it, you should be ready to rock with your new Chromatables!

website url

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

Twitter Style Login Form with jQuery

Twitter Style Login Form with Jquery
Twitter Style Login Form with Jquery

Twitter recently updated their home page with a cool design. On the top right of the home page you will see user login with drop down form. AEXT has written a tutorial for the login form which has the look and feel of twitter sign in login form using JQuery.

It’s saving your space of the webpage and makes visitors feel comfortable by the awesome toggle login form. The tutorial explains how to create a login drop down with Twitter style using JQuery.  It’s a step by step tutorial for learning how to do the toggle and tooltips with jQuery.

Demo

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