Shanmuganathan Sivaraj

PDF's inside a Browser

Many PDF documents like manuals come with an Index document containing links to other PDF documents. If you have a web page that displays such a PDF document and would like to open those containing PDF links using adobe inside the browser, just make sure the following setting is enabled in the adobe acrobat or reader in the client machine -

Edit -> Preferences -> Internet -> Enable - Display PDF in browser.

If disabled in a client machine, the index document will open locally on the client machine and all the links in the index document might be broken as those paths might be relative from the current location(client machine).

Note - This is easy in an intranet environment, where you will have access to client machines.

posted by Shanmuganathan Sivaraj at 12:16 AM | 0 Comments

Media Queries

Internet is becoming ubiquitous and is now available in devices of all forms & shapes. A standard website built for a resolution more commonly found in a desktop computer might not look great when accessed from a mobile device like smart phone, tablet or even a netbook. It will be tedious and time consuming to build a new site for each & every type of device. Most simple solution is to use Media queries to change the look & feel of the same website based on the resolution of the device used to access the site – like changing a three column layout in desktop to a two column layout in a tablet.

What is Media Queries?

Media query is a W3C recommendation which involves using the CSS media type and an expression to check the condition of the media feature like device-width, device-height, orientation etc. E.g. -

<link type="text/css" media="screen and max-device-width:320px" href="smartphone.css" />

The above statement will check the width of the device from which you are accessing this code and if it is less than or equal to 320px, then it will download the smartphone.css style sheet.

A Media query is a simple CSS manipulation and does not require any external files or libraries.

How to use Media Queries?

Since the idea is to manipulate the styles associated with the web page, you could use Media Queries to link to different style sheets based on conditions or use these conditions inside a single style sheet.

e.g.

OPTION 1 - Using different style sheets for different devices.

<link type="text/css" media="screen and (min-device-width:0px) and (max-device-width:320px)" href="smartphone.css" />

<link type="text/css" media="screen and (min-device-width:321px) and (max-device-width:768px)" href="tablet.css" />

<link type="text/css" media="screen and (min-device-width:769px) and (max-device-width:1280px)" href="netbook.css" />

<link type="text/css" media="screen and (min-device-width:1281px) and (max-device-width:1920px)" href="desktop.css" />

OPTION 2 - Using single style sheet but different sections based on the device.

@media and (min-device-width:0px) and (max-device-width:320px)
{
body
{
font-family : arial;
font-size : 8px;
}
}

@media and (min-device-width:321px) and (max-device-width:768px)
{
body
{
font-family : verdana;
font-size : 10px;
}
}

Browser Support

Most of the major browsers like Firefox, Chrome, Safari etc. have been supporting media queries for a while. Internet Explorer supports media queries from IE 9+.

More Information about Media Queries - http://www.w3.org/TR/css3-mediaqueries/

posted by Shanmuganathan Sivaraj at 9:15 PM | 0 Comments

HTML5 CSS Styling in older versions of IE

HTML5 is gaining traction and many of the common browsers like Chrome, FireFox, safari etc have started supporting some or all of the new HTML5 features. But one of the popular browser and still a standard in many office environments - Internet Explorer, lags behind in HTML5 support. Microsoft has begun supporting the new standards from version 9 and above.

Internet Explorer will render the HTML5 code as is and will not apply any corresponding styles declared in the style sheet. In order to make the older versions of Internet explorer recognize HTML5 elements for styling, you could use - HTML5Shiv.

HTML5Shiv is a JavaScript workaround that helps Internet explorer recognize HTML5 tags and allow it to be styled using CSS style sheets. It is developed & maintained by a bunch of illustrious guys in git Hub. You could download the code locally and add it to your site or point to the googlecode.com location.

Usage –

Add the following code to the head tag of HTML page.

<!--[if IE]>

</script>

<![endif]-->

Full Source is available in git Hub - https://github.com/aFarkas/html5shiv

posted by Shanmuganathan Sivaraj at 3:41 PM | 0 Comments