Navigation

Reply

purpledude replied on Thu, Sep 13 2007 10:35 AM

rated by 0 users

Well, my examples of what to do don't tell the full story -- I first created new folders and pages in the "default" theme following these guidelines http://docs.communityserver.org/wiki/page.aspx/250/how-to-add-new-pages-to-themes/ and other howto pages like this one http://chumlyworldnews.com/blogs/twxztips/archive/2007/04/23/add-a-page-to-cs2007.aspx

Then ... I added the drop-down navigation discussed above.

I did notice that in process of posting my example code here some of the characters got converted to emoticons - in the code lines that deal with querytextboxid -- the missing characters seem to be   -- which is meant to be "colon D" and not a smiley face. (I want to learn how to post properly code in this forum so this does not happen again)

Reply

anand.bala replied on Thu, Oct 18 2007 5:22 AM

rated by 0 users

Thanks purpledude !!! This is what I was looking for...This works...fantastic....

Reply

wiltech replied on Thu, Mar 13 2008 1:46 PM

rated by 0 users

 Alright, i thought i had followed the above instructions to the letter, but apparently not, since my pop-up menus are not working :(

Here are the sections that I added to my master.master page

 Telligent.Glow.PopupMenu communityMenu = CSControlUtility.Instance().FindControl(this, "ForumsPopup") as Telligent.Glow.PopupMenu;
 if (communityMenu != null)
 {
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Active Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Active"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unread Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_NotRead"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unanswered Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Unanswered"), null, null));

  Page.ClientScript.RegisterStartupScript(this.GetType(), "menus", @"
              <script type=""text/javascript"">
                    // <![CDATA[
                    var menu = do***ent.getElementById('communityMenu');
                    if (menu)
                        menu.onmouseover= new Function('navigation_showPopup(" +communityMenu.ClientID + @", this);');
                    // ]]>
                    </" + "script>", false);

 }

</CSControl:Head>
<script type="text/javascript">
// <![CDATA[
var navigation_popup = null;
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>
    </head>

<TWC:PopupMenu ID="ForumsPopup" runat="server" MenuGroupCssClass="CSContextMenuGroup" MenuItemCssClass="CSContextMenuItem" MenuItemSelectedCssClass="CSContextMenuItemHover" MenuItemExpandedCssClass="CSContextMenuItemExpanded" MenuItemIconWidth="0" MenuItemIconHeight="0" MenuDirection="UpDown" />

<div id="CommonNavigation"><div class="Common">
<CSControl:NavigationList runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forums" />
            </CSControl:Conditions>
        </DisplayConditions>
    </CSControl:CSLinkData>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions Operator="Not">
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forums" />
        </DisplayConditions>
    </CSControl:CSLinkData>
                                       
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" ContainerId="communityMenu" Property="Text">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forums" />
        </DisplayConditions>
    </CSControl:CSLinkData>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" ContainerId="communityMenu">
        <DisplayConditions Operator="And">
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            </CSControl:Conditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forums" />
        </DisplayConditions>
    </CSControl:CSLinkData>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</CSControl:NavigationList>
</div></div>

Any help in troubleshooting this will be greatly appreciated.

Thanks
Tony W

Reply

Zarus replied on Sun, Mar 16 2008 5:46 PM

rated by 0 users

Hi Tony W,

it doesn't become clear to me what goes wrong here. How do the modifications to SiteUrls.config look like? Or didn't you modify them and just used the available locations?

Mark

Reply

Zarus replied on Sun, Mar 16 2008 5:58 PM

rated by 0 users

Tony,

I checked the source of your website and noticed that each top level menu item had the "onmouseover=navigation_hidePopUp();" in it. This isn't ok, it should NOT be there on the item you need the foldout menu on.

Then I checked the code again you put in your master.master, and probably found out where it goes wrong: the first CSLinkData control in your NavigationList control.

Try to replace this:

<ItemTemplate>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forums" />
            </CSControl:Conditions>
        </DisplayConditions>
    </CSControl:CSLinkData>

with this:

<ItemTemplate>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="forumshome" />
            </CSControl:Conditions>
        </DisplayConditions>
    </CSControl:CSLinkData>

Let me know if this fixed the problem!

Mark

Reply

Zarus replied on Sun, Mar 16 2008 6:35 PM

rated by 0 users

Hi there,

I have two questions myself about this foldout implementation.

First of all, let me say that implementing the foldout menu went well. I've got the foldout-menu working properly by following the instructions by purpledude.

I'm currently facing two issues:

1. When I navigate to one of the menu-items in the foldout, I'd like the main menu item to be highlighted/selected. What I did so far:
I created a couple of custom pages, and let them use a custom master page. This custom master page is a copy of the home.master, and I changed the "SelectedNavigation" control to make it select my custom menu item. However, as soon as I do this, instead of just highlighting my menu item, an extra menu item gets added to my main navigation with the SAME name as my foldout menu item, and they BOTH get selected/highlighted! So for instance, I've got an About menu item, and this item has 2 sub-menu items "About MySite.com" and "Contact Us". As soon as I navigate to one of the sub-menu items, "About" gets duplicated in the main menu and both get selected (but only 1 has the foldout). Anyone got a clue why this happens?

2. I made a change to the way the navigation is positioned in my website. Instead of a left alignment, the menu is aligned to the right. The menu-item that shows the foldout-menu is on the right side of my screen, and somehow the TWC PopupMenu javacript detects the position on the screen and instead of "left-docking" the foldout-menu, it "docks" it to the right side of my main menu item. Is there any way to always make it dock to the left?

I hope someone can help me with this! TIA,

Mark

Reply

wiltech replied on Mon, Mar 17 2008 7:34 AM

rated by 0 users

Mark,

That didn't work... I also found another problem in my initial scripting I changed

From:

Telligent.Glow.PopupMenu communityMenu = CSControlUtility.Instance().FindControl(this, "ForumsPopup") as Telligent.Glow.PopupMenu;
 if (communityMenu != null)
 {
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Active Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Active"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unread Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_NotRead"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unanswered Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Unanswered"), null, null));

  Page.ClientScript.RegisterStartupScript(this.GetType(), "menus", @"
              <script type=""text/javascript"">
                    // <![CDATA[
                    var menu = do***ent.getElementById('communityMenu');
                    if (menu)
                        menu.onmouseover= new Function('navigation_showPopup(" + communityMenu.ClientID + @", this);');
                    // ]]>
                    </" + "script>", false);

 }

To:

Telligent.Glow.PopupMenu communityMenu = CSControlUtility.Instance().FindControl(this, "ForumsPopup") as Telligent.Glow.PopupMenu;
 if (communityMenu != null)
 {
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Active Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Active"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unread Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_NotRead"), null, null));
  communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Unanswered Posts",
   SiteUrls.Instance().UrlData.FormatUrl("post_Unanswered"), null, null));

  Page.ClientScript.RegisterStartupScript(this.GetType(), "communityMenu", @"
              <script type=""text/javascript"">
                    // <![CDATA[
                    var menu = do***ent.getElementById('communityMenu');
                    if (menu)
                        menu.onmouseover= new Function('navigation_showPopup(" + communityMenu.ClientID + @", this);');
                    // ]]>
                    </" + "script>", false);

 }

Thanks
Tony W