Monday, March 26, 2012

Maintain div display between pages

Hello there,

I have an interesting problem to takle. I'm creating a website that's
going to be run in a local Intranet. The site uses a MasterPage /
content page scheme, with the Master page defining a "sidebar" area
that contains links to pages, and the content for those pages being
displayed in a single content area.

The sidebar is divided up into sections, that are show/hidden without
postbacks using javascript. Here's an example:

<head runat="server">
<title>My Page</title>
<link href="http://links.10026.com/?link=DefaultMaster.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript"><!--
function toggleVisibility (elementID) {
var element = document.getElementById(elementID);
if (element.style.display != "block") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
//--></script>
</head>
<body>
<form id="form1" runat="server">

<div id="sidebar">
<div class="menuItem">
<span class="itemHeader" onclick="toggleVisibility('webApps');">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
Web Applications
</span>
</div>
<div id="webApps" class="subMenuGroup">
<div class="subMenuItem">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
<a href="http://links.10026.com/?link=Page1.aspx">Page 1</a>
</div>
<div class="subMenuItem">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
<a href="http://links.10026.com/?link=Page2.aspx">Page 2</a>
</div>
</div>
</div>
<div id="content">
<asp:contentplaceholder id="mainContentHolder" runat="server">
<!-- My content -->
</asp:contentplaceholder>
</div>
</form>
</body>
</html>

Of course, a problem occurs when a user actually clicks a link (or
triggers a postback on a page). The "display" property of my sidebar
items gets lost and set back to its default value (i.e. none). I have
a few ideas about how I could handle this problem for the postback
case, but I'm not sure about going across pages. Does any one have any
suggestions?

Thanks,
Evanyour javascript can maintain state in a hidden field. if you keep it
small, you can append it to the links when clicked or store it in a cookie.

-- bruce (sqlwork.com)

Evan M. wrote:

Quote:

Originally Posted by

Hello there,
>
I have an interesting problem to takle. I'm creating a website that's
going to be run in a local Intranet. The site uses a MasterPage /
content page scheme, with the Master page defining a "sidebar" area
that contains links to pages, and the content for those pages being
displayed in a single content area.
>
The sidebar is divided up into sections, that are show/hidden without
postbacks using javascript. Here's an example:
>
<head runat="server">
<title>My Page</title>
<link href="http://links.10026.com/?link=DefaultMaster.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript"><!--
function toggleVisibility (elementID) {
var element = document.getElementById(elementID);
if (element.style.display != "block") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
//--></script>
</head>
<body>
<form id="form1" runat="server">
>
<div id="sidebar">
<div class="menuItem">
<span class="itemHeader" onclick="toggleVisibility('webApps');">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
Web Applications
</span>
</div>
<div id="webApps" class="subMenuGroup">
<div class="subMenuItem">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
<a href="http://links.10026.com/?link=Page1.aspx">Page 1</a>
</div>
<div class="subMenuItem">
<img src="http://pics.10026.com/?src=<%= Page.ResolveUrl ("~/images/arrowsmall.gif") %>"
alt="Arrow" />
<a href="http://links.10026.com/?link=Page2.aspx">Page 2</a>
</div>
</div>
</div>
<div id="content">
<asp:contentplaceholder id="mainContentHolder" runat="server">
<!-- My content -->
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
>
Of course, a problem occurs when a user actually clicks a link (or
triggers a postback on a page). The "display" property of my sidebar
items gets lost and set back to its default value (i.e. none). I have
a few ideas about how I could handle this problem for the postback
case, but I'm not sure about going across pages. Does any one have any
suggestions?
>
Thanks,
Evan
>


On Mar 26, 9:49 pm, bruce barker <nos...@.nospam.comwrote:

Quote:

Originally Posted by

your javascript can maintain state in a hidden field. if you keep it
small, you can append it to the links when clicked or store it in a cookie.


Or stuff it into the ViewState of the Page object...

--
http://ajaxwidgets.com
ASP.NET 2.0 Ajax Widgets

0 comments:

Post a Comment