HTML 5 – HyperText Markup Language Version 5

HTML 5 – Hypertext markup language version 5 is the next major version of the Browser’s htm language. This is going to make our world of internet really very fast.

Basically this will have number of new elements, such as

Expand and Collapse Container

Expand and collapse option through JS and CSS
Follow steps
1. Copy this code in notepad
2. Save your note pad as .html or .htm
3. Open with browser… solution is ready 🙂


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<style type="text/css">
h4{
color:#719500;
}
</style>
</head>

<script type="text/javascript">
var collapseDivs, collapseLinks;

function createDocumentStructure (tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement &&
(siblingContainer = document.createElement('div')) &&
siblingContainer.style)
{
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer,

nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';

collapseDivs[i] = siblingContainer;

createCollapseLink(element, siblingContainer, i);
}
else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}

function createCollapseLink (element, siblingContainer, index) {
var span;
if (document.createElement && (span = document.createElement

('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode

(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('[+]'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
}
}

function collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = '[+]';
}
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = '[-]';
}

if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}




</script>
<script type="text/javascript">
<!--
function popup(url)
{
var width = 1200;
var height = 927;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<script type="text/javascript">
window.onload = function (evt) {
createDocumentStructure('h4');
}
</script>

<style type="text/css">
h4{
color:#719500;
}
</style>

<div style="width:70%; float:left;">
<DIV>
<H4>Question? </H4>
<P>Answer</P>
</DIV>
</div>

You can write number of questions and answer, this is one of the best solution from the user experience angle. This helps to make layout without having vertical scroll bar.

Thanks folks.. coming days.. ll add some more interesting stuffs here…

POP up html window, javascript , Css

Number of times, i have tried to make html popup based application… finally i have got very good solution. Here m framing that code, its output is well enough. Take this and paste as it is in notepad and save it as a .html file.. and see the output. To make attractive, u can go for images within CSS.
follow these steps
1. Copy this code in notepad
2. Save notepad file with .html extension
3. Popup application is ready



<html>
<head>
<title>Desktop Provisioining Portal</title>
<style type="text/css">
#child
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -365px;
margin-top: -250px;
z-index: 3;
width: 730px;
height: 520px;
background-color:black;
background-repeat: repeat-x;
border: solid 3px #2c7292;
}
#divTitleBar
{
position: relative;
text-align: right;
width: 100%;
margin-top: 5px;
margin-left: -5px;
}
</style>

<script language="javascript">
function show(HtmlPage)
{
var childDiv=document.getElementById('child');
childDiv.style.display="block";
var childWebPage=document.getElementById('childSite');
childWebPage.src=HtmlPage;

}
function closeChild()
{
var childDiv=document.getElementById('child');
childDiv.style.display="none";

}
</script>

</head>
<body>
Primary Layer Contents
<input type="button" value="window 1" onclick="show('http://artsrajesh.blogspot.com/');" />
<input type="button" value="window 2" onclick="show('http://artsmaths.blogspot.com/');" />
<input type="button" value="window 3" onclick="show('http://artseye.blogspot.com/');" />
<div id="child" style="display: none">
<div id="divTitleBar">
<input type="button" value="close" alt="" onclick="closeChild();" />
</div>
<iframe id='childSite' style="width: 725px; height: 478px;"></iframe>
</div>
</body>
</html>