I've implemented the drop down navigation like CS.org and would like to add a drop down panel containing controls rather than links to one of my menu links. This would be so that when you hover over one of the horizontal menu item 'Search' it display the search control, is this possible with Telligent.Glow? I see there is a TWC:PopupPanel control, should I be looking at this?
Also, I wanted my menu which is inside #CommonNavigation to have a margin-top:8px so I added
#CommonNavigation .CommonContextMenuGroup{ margin-top: 8px;}
but this doesn't seem to work, any ideas why? I can't put it directly into .CommonContextMenuGroup as this is used elsewhere where the top margin is not required.
The UKs best resource for the Golf, Bora, Jetta and Scirocco
Audi Forums, Galleries and Blogs
Dave:I've implemented the drop down navigation like CS.org and would like to add a drop down panel containing controls rather than links to one of my menu links. This would be so that when you hover over one of the horizontal menu item 'Search' it display the search control, is this possible with Telligent.Glow? I see there is a TWC:PopupPanel control, should I be looking at this?
I'd suggest looking at the PopupPanel control (on which the PopupMenu is based)... this *should* be possible, but I haven't tried it. I can look into it more if you'd like.
Dave: Also, I wanted my menu which is inside #CommonNavigation to have a margin-top:8px so I added #CommonNavigation .CommonContextMenuGroup{ margin-top: 8px;} but this doesn't seem to work, any ideas why?
but this doesn't seem to work, any ideas why?
I'd suggest using a seperate class name for the menu. The menu is always rendered within the <body> tag -- so this style rule would not apply to it.
Ben Tiedt: I'd suggest looking at the PopupPanel control (on which the PopupMenu is based)... this *should* be possible, but I haven't tried it. I can look into it more if you'd like.
Yes please if you have time. The InlineTagEditor does what I want actually, does that use the PopupPanel?
Dave:The InlineTagEditor does what I want actually, does that use the PopupPanel?
Yes, via the InlineEditorPanel Telligent.Glow control. I'll have an example for you by this coming weekend.
Dave:Yes please if you have time.
Unfortunately, the PopupPanel renders its contents outside of the <form> tag (which we should probably change). However, you can perform a simple search using the following:
<a href="http://communityserver.org/forums/AddPost.aspx?ReplyToPostID=595722&Quote=False#" onclick="<%= SearchPanel.ClientID %>.ShowAtElement(this); return false;">Search</a><TWC:PopupPanel ID="SearchPanel" runat="server" HideOnDocumentClick="false" ZIndex="101" CssClass="CommonContextMenuGroup"> <input type="text" id="popupSearchQuery" /> <input type="button" value="Go" onclick="window.location = '<%= CommunityServer.Components.SiteUrls.Instance().SearchForText("q=999999") %>'.replace('999999', encodeURIComponent(document.getElementById('popupSearchQuery').value)); return false;" <input type="button" value="Cancel" onclick="<%# CommunityServer.Controls.CSControlUtility.Instance().FindControl(this, "SearchPanel").ClientID %>.Hide(); return false;" /> <input type="button" value="Cancel" onclick="<%= CommunityServer.Controls.CSControlUtility.Instance().FindControl(this, "SearchPanel").ClientID %>.Hide(); return false;" /></TWC:PopupPanel>
Ben Tiedt:Unfortunately, the PopupPanel renders its contents outside of the <form> tag (which we should probably change).
I've logged this issue as #GLOW-2019.
That's great I need to get it integrated into my NavigationList control so i'll spend a couple of hours figuring it out and come back if I get stuck.
Looking good so far.
Any chance of a CloseOnMouseOut property on the PopupPanel like there is on the PopupMenu? Also, there is a lot of whitespace in the NavigationControl, can that be removed?
I added a navigation_showPanel funtion to show the PopupPanel as it uses ShowAtElement instead of OpenAtElement
<script type="text/javascript">// <![CDATA[var navigation_popup = null;function navigation_showPanel(panel, element) { panel.ShowAtElement(element); return false; }function navigation_showPopup(popup, element) { if (popup && !popup.IsOpen()) { navigation_hidePopup(); popup.OpenAtElement(element); navigation_popup = popup; } }function navigation_hidePopup() { if (navigation_popup) { navigation_popup.Close(); navigation_popup = null; } }// ]]></script>
can this be reworked so it works like navigation_showPopup, ie at the moment when I hover over items with PopupMenu's the PopupPanel remains.
Ah, it's Hide() instead of Close() for the PopupPanel. What's the the equivalent to popup.IsOpen() for the PopupPanel?
Dave:What's the the equivalent to popup.IsOpen() for the PopupPanel?
popupPanel.IsShown()
Dave:Any chance of a CloseOnMouseOut property on the PopupPanel like there is on the PopupMenu?
CloseOnMouseOut is implemented using the OnPanelOverFunction and OnPanelOutFunction -- if you want it to always close when the mouse leaves the pop-up panel, you can set the OnPanelOutFunction to something like:
popupPanel.OnPanelOutFunction = new Function('popupPanel.Hide();');
Dave:Also, there is a lot of whitespace in the NavigationControl, can that be removed?
Not sure what you're referring to... the <CSControl:NavigationList /> renders as a <ul> list by default. You can update the styles as neccessary to decrease spacing.
Dave:can this be reworked so it works like navigation_showPopup
<script type="text/javascript">// <![CDATA[var navigation_popup = null;var navigation_panel = null;function navigation_showPanel(panel, element) { if (panel && !panel.IsShown()) { navigation_hidePopup(); panel.ShowAtElement(element); navigation_panel = panel; }function navigation_showPopup(popup, element) { if (popup && !popup.IsOpen()) { navigation_hidePopup(); popup.OpenAtElement(element); navigation_popup = popup; } }function navigation_hidePopup() { if (navigation_popup) { navigation_popup.Close(); navigation_popup = null; } if (navigation_panel) { navigation_panel.Hide(); navigation_panel = null; } }// ]]></script>
Thanks, the new functions work fine. I can't get the onpaneloutfunction to work though, is this correct?
Telligent.Glow.PopupPanel searchPanel = CSControlUtility.Instance().FindControl(this, "SearchPanel") as Telligent.Glow.PopupPanel; if (searchPanel != null) { Page.ClientScript.RegisterStartupScript(this.GetType(), "searchPanel", @" <script type=""text/javascript""> // <![CDATA[ var menu = document.getElementById('searchPanel'); if (menu) menu.onmouseover = new Function('navigation_showPanel(" + searchPanel.ClientID + @", this);'); var panel = document.getElementById('" + searchPanel.ClientID + @"'); if (panel) panel.OnPanelOutFunction = new Function('navigation_hidePopup();'); // ]]> </" + "script>", false); }
Re whitespace, view the source of dev.uk-mkivs.net and you'll see alot of whitespace rendered within the <ul> tags
Dave: I can't get the onpaneloutfunction to work though, is this correct?
Change
var panel = document.getElementById('" + searchPanel.ClientID + @"');if (panel) panel.OnPanelOutFunction = new Function('navigation_hidePopup();');
to
" + searchPanel.ClientID + @".OnPanelOutFunction = navigation_hidePopup;
Dave:Re whitespace, view the source of dev.uk-mkivs.net and you'll see alot of whitespace rendered within the <ul> tags
Your common.css stylesheet defines a rule for #CommonNavigation ul li that is adding a 32px margin to the right of each LI -- is that the whitespace you want to remove?
Ben Tiedt: Dave: I can't get the onpaneloutfunction to work though, is this correct? Change var panel = document.getElementById('" + searchPanel.ClientID + @"';if (panel) panel.OnPanelOutFunction = new Function('navigation_hidePopup();'; to " + searchPanel.ClientID + @".OnPanelOutFunction = navigation_hidePopup;
var panel = document.getElementById('" + searchPanel.ClientID + @"';if (panel) panel.OnPanelOutFunction = new Function('navigation_hidePopup();';
Just tried that and it doesn't seem to work
Dave:Just tried that and it doesn't seem to work
Could you post your script and markup related to this feature? Then I can better see what's going on.
Copyright© 2008 Telligent Systems Inc. All rights reserved CommunityServer.com • Telligent.com