Umbraco multi-color menu tabs - asp.net

I'm using the Asp.Net CMS Umbraco and would like some help to determine whether or not there is something specific about the Umbraco CMS that might make the task of creating a multi-colored menu bar... different from standard html and css manipulation.
The menu bar code that I'm using is based upon the friendly-ghost theme shipped with Umbraco.
Now the normal method for employing different colours in a menu would be something like
div # menu ul.rMenu li.page-item-(some number) {background-color: # (whatever);}
...
...
<li class "rMenu-expand page-item-(the same number as above)"><a href="(link to whatever site on the menu)">
<span> Wording for the particular tab </span></a></li>
And bingo... the (some-number) tab has the (whatever) colour!
However, Umbraco seems to be using a different set-up that is not entirely compatible with the above strategy. Should I be looking at *umbTextpage id *parentID *nodeType ... or something entirely different that I haven't, as yet, noticed?
I believe that nodeName is being used for the wording of particular tabs... should I take it, then, that nodeType refers to the tabs themselves ???
That's great, thanks. However, the menu is generated dynamically using xslt. Do you think I should I attempt to insert that code (converted to xslt) into the menu generation process...
<xsl:for-each select="$currentPage/ancestor-or-self::* [#level=$level]/* [#isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:if test="#id = $currentPage/#id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a class="navigation" href="{umbraco.library:NiceUrl(#id)}">
<span><xsl:value-of select="#nodeName"/></span>
</a>
</li>
... or attempt to use razor code after the fact (i.e. have the menu be created and subsequently cycle through the menu's elements, giving a numerical 'tag' to each node)?

The beauty of Umbraco is that you have complete control of the layout. You can have it build your menu how ever you want.
I don't know whether you are using xslt or razor to generate your menu, but If you're looking trying to get a unique number to append to "page-number-" then use the node's Id, that won't change even if the name of the node is edited.
Using Umbraco 4.7 razor you do something like this:
#{
<ul>
#foreach (var node in Model.AncestorOrSelf().Children.Where("Visible"))
{
<li class="rMenu-expand page-item-#node.Id">
<a href="#node.Url">
<span>#node.Name</span>
</a>
</li>
}
</ul>
}

Related

How to render a template in Sitecore, if it does not have a content item

This seems to be a very simple concept, but I am unable to resolve. What I'm trying to do is, render/display a Standard value of a template, to the page.
Created the items & templates using Rocks. Here is the structure.
1. Sublayout - footer.ascx
<div class="content">
<h1>This is a title.</h1>
<p>All the content goes here</p>
<sc:placeholder runat="server" Key="footercontent" />
</div>
2. Sublayout - StickyNav.ascx
<a class="btn" href="#">
<sc:Text Field="Sticky Nav Title" runat="server" />
</a>
3. Template - Sticky Nav
The first pic is of the template & the second one shows the assigned default value in _Standard Values.
Then, in Sitecore Explorer,
right clicked on (Sticky Nav - _Standard Values) > Tasks > Design Layout on Standard Values.
Now, there is a content item "index" under /sitecore/content/. It has these layouts declared:
When I right click on Index > Tools > Browse > Preview, the index page does open and the footer content is also displayed.
But, I am unable to see the text 'Go To Top', that was set as a Standard value (Image 2). It is empty.
What am i missing here.
There could be a few factors blocking the content being showed. For the front end the best bet is to rule out things like publishing - i.e. make sure that the template, fields, standard values, and the content items are all published correctly. If you are in preview this is probably of less relevance but worth noting when you deploy
When the sc:Text control renders is will be running the renderField pipeline. At the point that interacts it will be talking to Sitecore via the api.
To check things via the code behind for your control (assuming it's an ascx due to the runat="server" tag). Check:
Field field = Sitecore.Context.Item.Fields["Sticky Nav Title"];
if (field != null)
{
string value = field.Value;
}
And debug through to check the field actually has the value you require.
In the cms, when you view the page of interest does the 'Sticky Nav Title' field appear to have a value, and be the value you are interested in?
I realized the initial thought itself was a mistake. There HAS to be an item if it's value has to be displayed on page.
So, I created a new item under /sitecore/content/Sticky Nav Button using the template Sticky Nav.
And in StickyNav.ascx, updated the control as:
<sc:Text Field="Sticky Nav Title" runat="server" DataSource = "/sitecore/content/Sticky Nav Button"/>
Hope this helps beginners like me.

How to create a Show More button in this .TPL file

I have downloaded a template with a module called Publications. When the News Page is loaded it calls this .tpl file:
{title}{$category.title}{/title}
<div class="newsPage">
<h1>Latest News</h1>
{foreach from=$articles item=entry name=articles}
{if $smarty.foreach.articles.first}<dl><br />{/if}
<dt><a href="{$GLOBALS.site_url}/publications/{$category.id}/{$entry.id}/{$entry.title|replace:' ':'-'|escape:"urlpathinfo"}.html" class="title"></dt>
<dd>{$entry.description}</dd>
{if $smarty.foreach.articles.last}</dl></a>{/if}
{foreachelse}
[[There are no articles available at this time]]
{/foreach}
</div>
And there's the problem. If there are 1000 articles, all of them will be loaded and no pages will be created.
I'm trying to create a "show more" button with only the latest 4 articles displayed at first and then when the "show more" button is clicked, the next 4 articles will be displayed, and so on...
Is that possible? Can anyone help me with new ways to create a dynamic news section with this?
i still didnt install my editor, but you can give a div or any thing some property, which make that object hidden, i'm not sure if it was block, or hidden it self,
then you can also give it an id, and refer to it with java script, and as you already know a query language like jQuery, you can do it even simpler to refer to the div element, and change its property, (i didnt worked with jQuery), if it's about to be as a toltip, you can use your parent div/ image/ button/ any thing:
[style]:hover{display:block;}
for styles which normaly are:
[style]{display:none;}
or instead of display, u can use
[style]:hover{visibility:visible;}
for stle which are like this:
[style]{visibility:hidden;}
this is a ways which most of sites menus take advantage of
Solved. Changed the <dl> <dt> <dd> to <ul> <li> and then:
var vis = 5;
$('.news li').slice(vis).hide();
var $more = $('Mais')
$more.click(function(){
$('.news li:hidden').slice(0,vis).show();
if($('.news li:hidden').length == 0)
$more.hide();
});
$('.newsPage ul').after($more);

Load html (getText) based on global tabs

I am trying to load different html pages based on each global tab (each tab would load a different html page) using getText. Does anyone know the code to specify a certain tab for each different piece of text? The code below loads the same text into all the tabs:
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/graduate-study/highlghts-grad"
tal:replace="structure here/graduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/undergraduate-study/highlghts-grad"
tal:replace="structure here/undergraduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
etc, etc for all tabs...
The global tabs in Plone are navigation roots. You can detect the current active navigation root in two ways:
The body HTML tag has a section-[id_of_section] CSS class, where id_of_section varies with the pathname of each section.
From a viewlet or portlet you can retrieve these classes using the ##plone_layout view:
tal:define="plone_layout context/##plone_layout;
bodyClass python:plone_layout.bodyClass(template, view)"
after which you'll have to test if a certain state- string is present in the bodyClass value.
By retrieving he current navigation root directly from the ##plone_portal_state view:
tal:define="plone_portal_state context/##plone_portal_state;
nav_root plone_portal_state/navigation_root;
nav_root_id nav_root/getId"
You can then vary your viewlet or portlet based on the nav_root_id.
Note however that each navigation root is has a portal type, and possibly an interface declaration, that you could use to register viewlets or portlets for. Detecting the exact navigation is usually not the best option.
This effect is commonly referred to as a "megamenu." There is a product that implements this for Plone, http://plone.org/products/collective.collage.megamenu/. I've not used it, but I'd certainly recommend that you explore it as a starting point.

Loading list in jQuery Mobile

I have am using JQuery Mobile in asp.net web form and on button click I want to load the list. In code behind I am getting the list is this way
List<Reportee> associates = new List<Reportee>();
associates = DALLayer.GetReporteeForEmployee(EmployeeId);
Here, associate is a class which has two property [reporteeName and reporteeId].
How can I show all the reportee Name in the list?
print a <ul> tag
for each associate:
print <li>
print the text you want
print </li>
when foreach ends print </ul>
I have no idea why you asked...
What does it have to do with jquery mobile? O, I know! Instead of <ul> print <ul data-role="listview">

Search type links in Yahoo - how to implement similar behaviour

When you open the yahoo main page at the top there is a search section that contains links like: Web, Images, Video, More
When clicking on the link the chosen section is activated and the text of the search button is being changed. The only part of the page that is updated is the search part at the top and the other parts of the website remain unaffected.
My question is how is this implemented? And more importantly how similar behaviour could be
implemented in .net using VS 2008?
Are the links really links or different elements that only mimic the links behaviour?
Does it need to be ajax, or just everything is preloaded and hidden using some css techniques?
Is the same technique used in the news section on the same page when changing tabs: News, Sport, Entertainment, Video?
Thank you
This is actually done with CSS and Javascript:
<ul id='menu'>
<li><a href="#web_search" class='active'>Web</a></li>
<li>Image</li>
<li>Video</li>
<li>Local</li>
</ul>
<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>
Then Javascript (example uses jQuery, can be done many ways...):
$('a','#menu').click(function() {
$('div.search').hide();
$('a.active', '#menu').removeClass('active');
$($(this).addClass('active').attr('href')).show();
$(this).blur();
return false;
});
And this is an example of it in action. The styling and such would all be CSS.
After doing a quick inspection of the search field using Firebug, it appears that clicking on each of search type links (Web, Images, etc) simply modifies the DOM. This includes adding fields, removing fields, toggling class names, etc. I wouldn't be surprised if hidden fields are also being manipulated.
Behavior like this is accomplished using JavaScript. Specifically (and at a very high-level), there are event handlers attached to the links each of which modify the DOM in their own way.
It can definitely be implemented using Visual Studio 2008 as it's really (and likely) nothing more than CSS, JavaScript, and HTML. .NET really wouldn't come into play until you're ready to take the specified query and begin running it against your data store.
Paolo's answer gives a really good, straight-forward example of how that behavior can be emulated.
Those links have onlclick JavaScript handlers attached to them. When you click on them different tab becomes visible and current tab gets hidden. All tabs are preloaded but only the first one is visible initially.
Take a look at Tabs control from ASP.NET AJAX control toolkit. You can customize tabs so that they look like links.

Resources