Load DIV dynamically
The Dynamic Div code. The bellow code fill the main Div body with the contents of the Div whose hyper link on the top of the page is clicked. The code is self explanatory but for more understanding comments are there in green color. Its a magic of javascript to make it happen. Just copy n paste the code bellow and run.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function div(reset, ctrl) // Function recving arguments as reset and id in ctrl.
{
if (reset == 1)
{
// Setting Div main to default.
document.getElementById("main").style.borderWidth = "0px";
document.getElementById("main").style.overflow = "hidden";
document.getElementById("main").style.height = "10px";
//Assigning Div contents to main Div to make it look like a dynamic application.
document.getElementById("main").innerHTML = document.getElementById(ctrl).innerHTML;
}
//Retriving current height of main Div.
var currentHeight = parseInt(document.getElementById("main").style.height);
//Assigning some styles to Div main.
document.getElementById("main").style.border = "solid";
document.getElementById("main").style.borderColor = 'Silver';
document.getElementById("main").style.borderWidth = "2px";
if (currentHeight == 300) // if height reaches 300 px then stop.
{
document.getElementById("main").style.overflow = "auto";
return;
}
setTimeout("div(0, this);", 2); // setting 2 milisecond time to function call.
// Incerasing height of main Div by 1 px at each time function call by
// setTimout() method untill height become 300px.
document.getElementById("main").style.height = (currentHeight + 1) + "px";
}
</script>
<style type="text/css">
/* Applying Some styles to Hyperlinks */
a
{
color:Black;
font-family:Verdana, Sans-Serif;
text-decoration:none;
padding-left:10px;
}
a:hover
{
color:Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<center>
<a href="#" onclick="return div(1, 'content');">Content</a> <%-- on clicking these hyperlinks call function div by passing--%>
<a href="#" onclick="return div(1, 'about');">About</a> <%-- reset value and id of the div whose content is to be shown. --%>
<br /><br />
<div id="main" style="width:500px; height:10px; overflow:hidden; padding:10px 0px 10px 0px;">
<%-- This is the main div in which the contents of the div are shown. --%>
</div>
<div id="content" style="display:none; overflow:hidden;">
<%--The text of this Div is shown when user clicks on Content hyperlink.--%>
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
Hello...............................................................
</div>
<div id="about" style="display:none;">
<%--The text of this Div is shown when user click About hyperlink--%>
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
About...............................................................
</div>
</center>
</form>
</body>
</html>
Just copy and paste the code and run..
very very good as it allows styling from css for the links and content can be loaded dynamically from php
ReplyDelete