W3 Lessons: HTML

Showing posts with label HTML. Show all posts

Wednesday, July 24, 2019

Full Screen iframe, frameset URL Masking

URL Masking technique with frameset, widely used method and support all modern and old browsers.

<html><head><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
 <frame name="TopFrame" scrolling="yes" noresize src="http://www.w3lessons.com">
 <frame name="BottomFrame" scrolling="no" noresize>

 <noframes></noframes>
</frameset>
</html>

Thursday, November 22, 2012

Prevent your website opening in Iframe

One of our client, don't want to load their website inside an iframe any other website. In this case PHP provide an excellent header option to prevent or deny iframe opening of your web pages. In case you are in static html we can use JavaScript to redirect a actual page as browser URL on top.

Google is example website for iframe blocking, you did not open Google website in iframe.

PHP code to prevent iframe loading on dynamic php pages.

<?php
// php header to prevent iframe loading of your web page
header("X-FRAME-OPTIONS: DENY");
?>

Example of prevent iframe loading in PHP pages

<?php
header("X-FRAME-OPTIONS: DENY");
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Blocker</title>
</head>
<body>

<h1>Welcome</h1>

</body>
</html>

JavaScript code to prevent loading iframe on Static HTML pages

<script type="text/javascript">

// Prevent iframe loading of your web page and redirect to iframe target.
if( (self.parent && !(self.parent===self))
    &&(self.parent.frames.length!=0)){
    self.parent.location=document.location
}
</script>

Example of prevent iframe loading in Static HTML pages

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Blocker</title>

<script type="text/javascript">
if( (self.parent && !(self.parent===self))
    &&(self.parent.frames.length!=0)){
    self.parent.location=document.location
}
</script>

</head>
<body>
<h1>Welcome</h1>

</body>
</html>

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>

Monday, September 5, 2011

jQuery Disable Browser Right click Context Menu in a web page

Prevent visitors from right clicking on your web page for some security reasons, we need to disable right click context menu when visitors attempt to make right click; Here is the simple and useful jQuery Solution to disable Browser Right click context menu to support all major browsers.

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
$(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
}); 
</script>

</head>

Saturday, August 13, 2011

Design SEO Friendly 3 Column Liquid Web Layout

Percentage dimensions of 3 Column Liquid web Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

800 x 600: Left & right columns: 162 pixels; Center page: 357 pixels
1024 x 768: Left & right columns: 210 pixels; Center page: 459 pixels

The nested div structure

Div Arrangements for3 Column Liquid web Layout I've colour coded each div so it's easy to see:

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Author: Matthew James Taylor