|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
So, I'm using the slide menu from the EO package, and I've found a problem. I have a 2 column layout built on an ASP.Net master page. The left nav, which contains the EO:Slidemenu, lives on the Master page. The main column contains the content for each child page. The 2 columns are never the same height, and one of them has to be extended to match the other one. As much as I would love to use the Faux Column technique for this, I can't due to our sites stylistic elements, so I'm having to resort to Javascript to resize the columns to match each other on each page view. So, I've got a simple javascript function that I call on page load, and it works fine.
Here's the problem. The slide menu on the left hand side resizes every time you expand one of the elements in the top level menu. This is working just fine, but when it does that, the 2 columns no longer line up properly. I need a way to call the same Javascript function I ran on page load, to dynamically resize the columns. I did some research, and found the ClientSideOnGroupExpand and ClientSideOnGroupCollapse triggers in the top level of the slide menu. As I understand it, if I put the name of the javascript function I want to run in those 2 fields in the menu builder, it should trigger that javascript every time one of the menu items is expanded or collapsed. So, I put the name of the function in those spots and tried it, but it's not working. I've put some debug code in the JS to see what was going on, and I realized that the function is just not being called when the menu groups expand or collapse.
I'm at a loss on this one, so I could really use a hand figuring this one out.
Thanks,
Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi Richard, We verified with the latest build (2007.2.12) and it appears to be working fine here. Here are our steps: 1. Put a slide menu in the page, initialize it with "Style 2"; 2. Set its ClientSideOnGroupCollapsed to on_collapse, ClientSideOnGroupExpand to on_expand; 3. Put the following JavaScript code in the page:
Code: JavaScript
function on_collapse()
{
debugger;
}
function on_expand()
{
debugger;
}
We then run the page and both get called correctly. Can you try the same and see if it works for you? Thanks
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
Following the steps you detailed, I can not get a sample page to work either. Is it possible that the slightly older version of EO Objects I'm running had a bug in it that was fixed in your version? I can't tell what build I'm running now, but the DLL is file version 4.0.34.2, with a creation date of 10/10/2007. I got the email a couple days ago about a new version, but I haven't updated to it yet. I'm willing to try that, but I would like to investigate other possible causes for this. Here's my aspx page, maybe you can see some simple mistake that I'm making here... Note I added the lines in the JS to set the height of the Fubar element to 0, because I knew it would throw an error... but when tested the page, I saw no error in the error console on firefox. thanks, Rich
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScratchPad.aspx.cs" Inherits="ScratchPad" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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>Untitled Page</title>
<script type="text/javascript">
function on_collapse()
{
document.getElementById('fubar').style.height=0+"px";
debugger;
}
function on_expand()
{
document.getElementById('fubar').style.height=0+"px";
debugger;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:SlideMenu ID="SlideMenu1" runat="server" ControlSkinID="None" SingleExpand="False"
Width="220px" ClientSideOnGroupCollapsed="on_collapse()" ClientSideOnGroupExpand="on_expand()"><LookItems>
<eo:MenuItem ItemID="_TopGroup">
<SubMenu LeftIconCellWidth="10" Style-CssText="border-right: #beb6a4 1px solid; font-weight: bold; font-size: 12px; border-left: #beb6a4 1px solid; cursor: hand; color: #4a4a44; font-family: verdana">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="30" Image-Mode="ItemBackground" Image-Url="00000600" ItemID="_TopLevelItem">
<SubMenu LeftIconCellWidth="10" Style-CssText="color:#555544;font-family:Verdana;font-size:12px;font-weight:normal;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="34" Image-HoverUrl="00000602" Image-Mode="ItemBackground" Image-Url="00000601"
ItemID="_Default">
</eo:MenuItem>
</LookItems>
<TopGroup><Items>
<eo:MenuItem Text-Html="My Account">
<SubMenu><Items>
<eo:MenuItem Text-Html="email and password"></eo:MenuItem>
<eo:MenuItem Text-Html="my address book"></eo:MenuItem>
<eo:MenuItem Text-Html="Shipping preferences"></eo:MenuItem>
<eo:MenuItem Text-Html="subscriptions"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="My Orders">
<SubMenu><Items>
<eo:MenuItem Text-Html="order status"></eo:MenuItem>
<eo:MenuItem Text-Html="most recent orders"></eo:MenuItem>
<eo:MenuItem Text-Html="orders in past 6 months"></eo:MenuItem>
<eo:MenuItem Text-Html="all orders"></eo:MenuItem>
<eo:MenuItem Text-Html="returns"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="My Support">
<SubMenu><Items>
<eo:MenuItem Text-Html="customer support"></eo:MenuItem>
<eo:MenuItem Text-Html="community forum"></eo:MenuItem>
<eo:MenuItem Text-Html="service contract"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
</eo:SlideMenu>
</div>
</form>
</body>
</html>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi,
You should use:
ClientSideOnGroupCollapsed="on_collapse"
Instead of:
ClientSideOnGroupCollapsed="on_collapse()"
You may also want to use window.setTimeout as ClientSideOnGroupExpand is fired when group is to expand, not when it is already fully expanded.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
when I take out the (), the menu breaks. Only the first element in the menu displays on the page, and it wont expand.
Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Richard Akers wrote:when I take out the (), the menu breaks. Only the first element in the menu displays on the page, and it wont expand.
Rich That's normal. :) Because now it's calling your on_collapse and your on_collapse breaks (which you already knew). The slide menu calls on_collapse for each collapsed group when it loads. So if you fix on_collapse everything should start working.
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
when I removed the bad line from my test code, it worked just as you described. However, when I went back to my live code, I'm seeing the same behavior, with only the first line in the slide menu displaying. Here is the Javascript I am trying to call. It's not throwing any errors in the error console.
Code: JavaScript
function fixH()
{
var lh=document.getElementById('leftcolumn').offsetHeight;
var rh=document.getElementById('rightcolumn').offsetHeight;
document.getElementById('rightcolumn').style.height=(lh>rh)? lh+"px" : rh+"px";
document.getElementById('leftcolumn').style.height=(rh>lh)? rh+"px" : lh+"px";
}
Here is the line in my EO slide menu that sets the onCollapse and onExpand:
Code: HTML/ASPX
<eo:SlideMenu ID="SlideMenu1" runat="server" OnItemClick="SlideMenu1_ItemClick1"
SlidePaneHeight="1" SingleExpand="False" SaveStateCrossPages="True" ClientSideOnGroupCollapsed="fixH" ClientSideOnGroupExpand="fixH" >
Anything else I can try before I upgrade to the new version? thanks, Rich
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
here's an update: The code is throwing an error, I just couldn't see it before. The line in the JS that is trying to get the height of the right column is throwing an error every time the slide menu calls it. This is very confusing to me, because when the function is called in the body onload param, it works just fine. Coincidentally enough, the right column on my page is what contains the Slide Menu. Is it possible that the slide menu has taken over the Div that it lives in, and is preventing my javascript from reading that div's properties?
thanks,
Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi Rich,
I do not see anything wrong as far as for slide menu's concern. We call a function you provide and that's it. It can not be simpler than that. The slide menu does not care what's inside your function --- so there is no reason that the slide menu would behave differently unless your function breaks. Thus whether upgrade or not is irrelevant to this issue.
I would recommend you to debug your code line by code and see what triggers it. If you use Visual Studio, it will be much easier for you to debug it rather than relying on FireFox's script console.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
that's what I'm saying... the Javascript isn't broken. I call the function once on the page load, and it works perfectly. But when I include it in the on collapse or on expand function of the slide menu, the javascript breaks. The exact line that is breaking is this:
Code: JavaScript
var rh=document.getElementById('rightcolumn').offsetHeight;
rightcolumn is the id of the div tag that contains the EO slide menu. The only thing I can think of that would explain why that line breaks during the EO slide and collapse is that the eo menu is also accessing the div height property somehow. That would make sense to me, as the div is resizing properly to allow the menu to expand and collapse. I'm just not sure where to go from here... Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi Richard, The only explaination that I can think of is, "rightcolumn" is not fully parsed by the browser (thus does not show up through getElementById) when your function is called. Consider the following code:
Code: HTML/ASPX
<div id="rightcolumn">
<script type="text/javascript">
var rh=document.getElementById('rightcolumn').offsetHeight;
</script>
</div>
The above code will break because at the moment the code runs, DIV "rightcolumn" is not being closed yet, thus document.getElementById('rightcolumn') would return null. The fix is very easy: check the return value before using it:
Code: JavaScript
//Try to get rightcolumn
var div = document.getElementById('rightcolumn');
//Can not go further if we can't see it yet
if (!div)
return;
var rh=div.offsetHeight;
Thanks
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
ohh... I see what's going on. The EO slidemenu is in the first part of the page to load. It is loading and rendering before the other div's on the page (including the rightcolumn div that's tossing the error). So, when the menu is building itself, and it's trying to run the javascript function I wrote, the rightcolumn div doesn't exist yet on the page. That's why it's tossing an error when the menu calls it, but not on the page load...
So, can I set those oncollapse/onexpand functions programatically, after the page fully loads?
Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Richard Akers wrote:So, can I set those oncollapse/onexpand functions programatically, after the page fully loads?
Rich No. You will not be able to do that. You will just need to put some extra code in your handler to handle the situation gracefully.
|
|
Rank: Member
Groups: Member
Joined: 11/15/2007
Posts: 13
|
I used your earlier approach, to check to see if the div was valid or not, and it's working much better. There is still one little quirk left... Once the page loads, the code all works just fine, and it's resizing the columns. However, because my javascript is being called exactly when the slide menu expands or collapses, it gets the height of the column before the expansion happens, so I'm left with a gap at the bottom of the other column equal to the height of the menu that was expanded...
Any ideas? I tried working with the javascrip setTimeout, but i'm not much of a javascript guy, and I couldn't make it work right.
Thanks again for all your help,
Rich
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
You just have to use setTimeout. Do:
window.setTimeout("fixH()", 1000);
And your FixH will be called a second later.
Thanks
|
|