Steve,
Before you jump in and start copying and pasting code from here..
I want to give you some important “nuggets” to help you quick start..
1.
There
some “hard coded’ aspects to the code below..
a. var SidePanelDivId = 'dvPanel';
b. var MainContentElementID
= 'frmExamDefault';
2.
“Transition”
in 2 places in the style sheet work together…
a. .sidePanel{…transition: 1s;
b. .SidePanelMainContent{…transition: margin-left 1s;
3.
The main content element, (many cases will by your <Form>), has a
specific ID and Class: <form id="frmExamDefault"
runat="server" class='SidePanelMainContent'>
and the sitedbar div has a specific
ID and Class: <div id="dvPanel" class="sidePanel">PlaceHolderForData</div>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Check Out This Link For A Working
Example…
1. Include SidePanel.css
(code shown below will be placed in this .css
file)
a. <link
rel="stylesheet" type="text/css" href="SidePanel.css">
.sidePanel {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 1s;
padding-top: 60px;
}
.sidePanelclosebtn
{
position: absolute;
top: 0;
right: 5px;
font-size: 12px;
margin-left: 50px;
background-color: red;
cursor: pointer;
color: white;
padding: 10px 15px;
border: none;
}
.SidePanelMainContent {
transition: margin-left 1s;
padding: 6px;
}
2. Add this div to the page.. it will initially be hidden because the class “sidePanel” sets the width to zero..
<div id="dvPanel" class="sidePanel">PlaceHolderForData</div>
IMPORTANT INFO HERE
3. Give an ID to the content that will
“make room” by sliding right. In the below case it’s frmExamDefault
AND give it the class “SidePanelMainContent”
<form id="frmExamDefault"
runat="server" class='SidePanelMainContent'>
4. Add your ‘Open’ and ‘Close’ buttons
to call our javascript functions openSidePanel
and closeSidePanel
<!-- Parameters: HTMLPageToLoad(Optional),%Width,%Height
-->
<asp:LinkButton ID="lbOpenSidePanel" runat="server"
OnClientClick="openSidePanel('child.htm',.5);return
false;">Open</asp:LinkButton>
<br />
<asp:LinkButton ID="lbCloseSidePanel" runat="server"
OnClientClick="closeSidePanel();return
false;">Close</asp:LinkButton>
5.
Add the SlidePanel Javascript
functions..
//
*********************************************************************************************
//
*********************************************************************************************
// SLIDE
PANEL
// *********************************************************************************************
//
*********************************************************************************************
IMPORTANT INFO HERE..
//Specify the Panel ID...
var SidePanelDivId = 'dvPanel';
//What ever is in
this element will slide over to make room for the SidePanel
var MainContentElementID
= 'frmExamDefault';
function
openSidePanel(ExternalHTMLFileToLoad, PercentOfWindowWidth) {
//Changing the width of the Div to something greater
than zero will get it to show.
document.getElementById(SidePanelDivId).style.width = window.innerWidth * PercentOfWindowWidth
+ 'px';
document.getElementById(MainContentElementID).style.marginLeft
= window.innerWidth * PercentOfWindowWidth
+ 'px';
//Add our external html if you wish......Otherwise it will just show what's
already in the dvPanel
if (ExternalHTMLFileToLoad != '') {
//Add our CLOSE button...
document.getElementById(SidePanelDivId).innerHTML =
"<a id='lnkClose' href='javascript:void(0)' class='sidePanelclosebtn'
>X</a>"
//Add the onclick event
document.getElementById('lnkClose').setAttribute("onclick",
"closeSidePanel()");
//Add the externa html page...
document.getElementById(SidePanelDivId).innerHTML = document.getElementById(SidePanelDivId).innerHTML + '<object id="objPanel"
width="100%" type="text/html" ></object>';
document.getElementById('objPanel').setAttribute("data",
ExternalHTMLFileToLoad);
}
else {
//Add our CLOSE button and append the already present content...
document.getElementById(SidePanelDivId).innerHTML =
"<a id='lnkClose' href='javascript:void(0)' class='closebtn'
>X</a>" + document.getElementById(SidePanelDivId).innerHTML
//Add the onclick event
document.getElementById('lnkClose').setAttribute("onclick",
"closeSidePanel()");
}
}
function closeSidePanel() {
document.getElementById(SidePanelDivId).style.width =
"0";
document.getElementById(MainContentElementID).style.marginLeft
= "0";
}
//
*********************************************************************************************
//
*********************************************************************************************
// *********************************************************************************************
//
*********************************************************************************************