In Web designing div panels have very important role. So by using different styles in div panels we can create beautiful designs.
We can add any content to these div panels.
The Html code for sliding div panel is given below.
-----------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<input id="btnSlideDown" type="button" value="SlideDown" />
<input id="btnSlideUp" type="button" value="SlideUp" /> <br />
<div id="divTest" style="display: none; width: 500px; height: 100px; background-color:#009;">
<!--content-->
<div id="innercontent">
<font style="color:#FFF; font-weight:bold;">
Div 1 Contents
cybermate4u.com</font>
</div>
</div>
<!--end content-->
<!--new slide-->
<input id="btnSlideDown1" type="button" value="SlideDown" />
<input id="btnSlideUp1" type="button" value="SlideUp" />
<div id="divTest1" style="display: none; width: 500px; height: 100px; background- color:#0F3">
<div id="innercontent">
<font style="color:#099">
Div 2 Contents
cybermate4u.com
</font>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function()
{
$('#btnSlideDown').click(function()
{
$('div#divTest').slideDown('slow');
});
$('#btnSlideUp').click(function()
{
$('div#divTest').slideUp('slow');
});
});
$(function()
{
$('#btnSlideDown1').click(function()
{
$('div#divTest1').slideDown('slow');
});
$('#btnSlideUp1').click(function()
{
$('div#divTest1').slideUp('slow');
});
});
</script>
</html>
-----------------------------------------------------------------------------------------------------------------------------
We can define the width, height and the background color of the sliding div panels. The code in red color shows the sliding panel for the single div panels.
Try it Your self..Happy coding.........
We can add any content to these div panels.
The Html code for sliding div panel is given below.
-----------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<input id="btnSlideDown" type="button" value="SlideDown" />
<input id="btnSlideUp" type="button" value="SlideUp" /> <br />
<div id="divTest" style="display: none; width: 500px; height: 100px; background-color:#009;">
<!--content-->
<div id="innercontent">
<font style="color:#FFF; font-weight:bold;">
Div 1 Contents
cybermate4u.com</font>
</div>
</div>
<!--end content-->
<!--new slide-->
<input id="btnSlideDown1" type="button" value="SlideDown" />
<input id="btnSlideUp1" type="button" value="SlideUp" />
<div id="divTest1" style="display: none; width: 500px; height: 100px; background- color:#0F3">
<div id="innercontent">
<font style="color:#099">
Div 2 Contents
cybermate4u.com
</font>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function()
{
$('#btnSlideDown').click(function()
{
$('div#divTest').slideDown('slow');
});
$('#btnSlideUp').click(function()
{
$('div#divTest').slideUp('slow');
});
});
$(function()
{
$('#btnSlideDown1').click(function()
{
$('div#divTest1').slideDown('slow');
});
$('#btnSlideUp1').click(function()
{
$('div#divTest1').slideUp('slow');
});
});
</script>
</html>
-----------------------------------------------------------------------------------------------------------------------------
We can define the width, height and the background color of the sliding div panels. The code in red color shows the sliding panel for the single div panels.
Try it Your self..Happy coding.........
0 comments: