Fixed header/footer issue on iOS device

When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position. If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.

Solution:

if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
    $(document).on('focus', 'input, textarea', function()
    {
       $('header').css("position", 'absolute');
       $('footer').css("position", 'absolute');
      
    });
   
    $(document).on('blur', 'input, textarea', function()
    {
         $('header').css("position", 'fixed');
         $('footer').css("position", 'fixed');
       
    });
}

The above "unfixes" the header/footer while an input field is focused.

CSS3 Media Query for IE7 and IE8

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE. This tutorial will helps you to create a dynamic resolution dependent layout with web standards in mind.

Today I got a great jQuery plugin Link name css3-mediaqueries. It is very easy to use.

How to use?

Download jQuery plugin form Here and include downloaded script just before </body> like

<script src="js/css3-mediaqueries.js"></script>
Or you can use following way to include the script.

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> 

Then write the media query in style sheet and check it in IE. It will work nicely with IE8, IE7 Even more older version IE6 or IE5

Notes:

It doesn’t work on @import’ed stylesheets Write media query with following way

@media screen and (min-width: 980px) {
/* CSS Document */
}

Typography Tools

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Type Set

 

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

Font Tester

 

Font Tester is a free online font comparison tool. dIt allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

CSS Code generator for text

 

A very simple and useful tool for generating CSS styles.

Serif Font Identification Guide

 

Serif Font Identification Guide is a very clever and useful visual font identification tool.

Identifont

 

Identifont has become the largest independent directory of digital fonts on the Internet. It provides a range of features to help you locate fonts or find information about fonts:

CSS-Typoset Matrix

 

Matrix to calculate the font size and line spacing in em and px

Referance :  smashingapps