Browser Feature Test Html

Browser Features

Following on from my previous post here, is the sample html page that should allow you to confirm the modernizr javascript library and my formatter code will provide you a visual view of a user’s browser capabilities.

This test page demonstrates how modernizr formatted text would appear in a browser. We will not cover the aspects of JQuery UI components at this point, leaving that for a future brew or two. Take a moment to look at the javascript found at the bottom of this page. You’ll see two lines of javascript code to populate the id=’browserfeatures’ div element. These lines sit inside the jquery document-ready point in the javascript that are executed after page load is complete.

var ans = formatModernizr();
$(“#browserfeatures”).html(ans);

The formatModernizr() method located in the modernizr.format.js javascript file does the heavy lifting. It returns a text string into variable ‘ans’. The content of this variable is then inserted into the html DIV named browserfeatures. Note the ‘geo’ bits are placeholders for future exploration – maybe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />
<STYLE TYPE="text/css">
body
{
font: 10.5px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
.code
{
color: #1aff2a;
background-color: black;
border: 1px solid red;
height: auto;
}
</style>
<title>Technology Page using Modernizr to Detect Browser Fearures</title>
</head>
<body >
<h2>Browser Features</h2>
<p>
<div style="max-height:360px;max-width:300px;">
<div id="accordion6">
<h3><a href="#">Your Browser</a></h3>
<div id="a61" class="scroll">
<div id="browserfeatures">
<p>Here is the featureset available on your browser.</p>
</div>
</div><!-- end of a61 div -->
<h3><a href="#">Your Geo Location Map</a></h3>
<div id="a62" class="scroll">
<div id="map_canvas" style="width:190px; height:260px"></div>
<p id="geo1">Unknown Latitude / Longitude</p>
<p id="geo4">Unknown Location</p>
</div><!-- end of a62 div -->
<h3><a href="#">Your Geo Location</a></h3>
<div id="a63" class="scroll">
<p id="geo7">Unknown Latitude / Longitude</p>
<p id="geo8">Unknown Location</p>
</div><!-- end of a63 div -->
</div><!-- end of accordion6 div -->
</div>
</div>
<br />
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/modernizr-1.6.min.js"></script>
<script language="javascript" type="text/javascript" src="js/modernizr.format.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
var ans = formatModernizr();
$("#browserfeatures").html(ans);
$("#accordion6").accordion({header: 'h3', fillSpace: true}); <!--{ autoHeight: false,fillSpace: true,collapsible: true,initialIndex: null,active:true }); -->
}); // end of document.ready function
</script>
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s