W3 Lessons

Wednesday, January 18, 2012

Monday, December 12, 2011

Create Full Screen Iframe or Full window Iframe or Iframe mask in HTML CSS

Working with iframe masking, We need to load / mask any Sub domain or Back Office pages in full available browser screen. Here is the pleasant and cross browser approach for iframe masking, with this simple css and html code we can make our web pages visible to Full Browser area, Full window area or full available browser screen. We can make iframe full height of available browser screen

1) Reset page floating margins as 0px for html body, div, iframe tags

html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}

2) Transform iframe Tag behavior in CSS

iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}

2) Setting iframe properties for resolve cross browser issues.

<iframe id="tree" name="tree" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

Example Full screen iframe html Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3Lessons.com Full Windows, Full Screen Iframe</title>
<style type="text/css">
html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}
 
iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}
</style>
</head>
<body>

<iframe id="tree" name="myiframe" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

</body>
</html>

Wednesday, January 18, 2012

PHP Sort array by key values based on another array

Monday, December 12, 2011

Create Full Screen Iframe or Full window Iframe or Iframe mask in HTML CSS