You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@roller.apache.org by slowhome <we...@theslowhome.com> on 2008/04/09 18:30:15 UTC
Custom Navigation
I'm trying to create a custom navigation menu that will display an "on" and
"off" state for selected buttons.
Because the navigation menu includes links to other sections in other
webapps and also because the items in the menu are in a particular order, it
can't be generated using the #foreach ($cat in $model.weblog.categories)
statement. It has to be hard coded.
I tried a few things in the template guides and looked at other Roller
themes but wasn't able to get very far.
In a nutshell, I would like it to do something like this:
#if ($cat.name == "Java")
Java Button On State
#elseif
Java Button Off State
#end
Thanks for any help.
Eric
--
View this message in context: http://www.nabble.com/Custom-Navigation-tp16590546s12275p16590546.html
Sent from the Roller - User mailing list archive at Nabble.com.
Re: Custom Navigation
Posted by slowhome <we...@theslowhome.com>.
Managed to figure it out by using a variation of a solution from this post.
Figured I'd post my solution in case anybody else has the same problem.
http://www.nabble.com/Category-Mastheads--to16399070s12275.html
This is what ended up working:
#if ($model.weblogCategory)
#set( $chosenCat = $model.weblogCategory.name )
#elseif ($model.permalink)
#set( $chosenCat = $model.weblogEntry.category.name )
#end
#if ($chosenCat == "Java")
<h3>JAVA ON!</h3>
#else
<h3>JAVA OFF!</h3>
#end
slowhome wrote:
>
> I'm trying to create a custom navigation menu that will display an "on"
> and "off" state for selected buttons.
>
> Because the navigation menu includes links to other sections in other
> webapps and also because the items in the menu are in a particular order,
> it can't be generated using the #foreach ($cat in
> $model.weblog.categories) statement. It has to be hard coded.
>
> I tried a few things in the template guides and looked at other Roller
> themes but wasn't able to get very far.
>
> In a nutshell, I would like it to do something like this:
>
>
> #if ($cat.name == "Java")
> Java Button On State
> #elseif
> Java Button Off State
> #end
>
>
>
> Thanks for any help.
>
> Eric
>
--
View this message in context: http://www.nabble.com/Custom-Navigation-tp16590546s12275p16618045.html
Sent from the Roller - User mailing list archive at Nabble.com.
Re: Custom Navigation
Posted by slowhome <we...@theslowhome.com>.
I had a bit of trouble getting this working. I'm not sure if the fact that
I'm using Roller 3.1 has anything to do with it.
Anyways, to put things within a bit of context I'll direct you towards this
page I'm working on:
http://dev.theslowhome.com/blog/index/category/Correspondent
Essentially, I would like "Correspondent" link in the left-hand column
navigation to be in the "over" state when viewing the "Correspondent"
category. The buttons in the left-hand column navigation are hard-coded in
because some of them (Projects, Interviews, etc.) direct to a page in a
different webapp.
Hope this clears things up.
Regards,
Eric
David Fisher wrote:
>
> I'm sure there may be better ways, but this is how I did something
> similar. I have more than one button, but in my example I'll just
> show one.
>
> I exclude some categories like this.
>
> #foreach ($cat in $model.weblog.getWeblogCategory
> ("nil").weblogCategories)
> #if ( $cat.name != "Transactions" )
> <td class=btn> $url.category($cat.path) $cat.name </td><td
> class=sep> | </td>
> #end
> #end
>
> I then hardcode the excluded categories.
>
> </tr></table></td><td style="overflow: hidden;"class=right
> align=right ><table cellpadding=0 cellspacing=0 border=0
> class=topbart1><tr
> ><td class=sep>|</td><td style="white-space: nowrap;"><div class=btn
> id=contentbtn1 >Transactions</div></td></tr>
>
>
--
View this message in context: http://www.nabble.com/Custom-Navigation-tp16590546s12275p16597295.html
Sent from the Roller - User mailing list archive at Nabble.com.
Re: Custom Navigation
Posted by David Fisher <df...@jmlafferty.com>.
I'm sure there may be better ways, but this is how I did something
similar. I have more than one button, but in my example I'll just
show one.
I exclude some categories like this.
#foreach ($cat in $model.weblog.getWeblogCategory
("nil").weblogCategories)
#if ( $cat.name != "Transactions" )
<td class=btn><a href="$url.category($cat.path)"
title="$cat.description" class=btn>$cat.name</a></td><td
class=sep> | </td>
#end
#end
I then hardcode the excluded categories.
</tr></table></td><td style="overflow: hidden;"class=right
align=right ><table cellpadding=0 cellspacing=0 border=0
class=topbart1><tr
><td class=sep>|</td><td style="white-space: nowrap;"><div class=btn
id=contentbtn1 >Transactions</div></td></tr>
The rollovers for these special buttons are handled in the css and
javascript:
I inject some javascript to handle the actions on these buttons:
</body>
<script>UpdateRollerContext();</script>
</html>
This is in a <script> clause in my head section.
function High(node,cls) {
if( (!node) || node.type) node = this;
if(!cls) cls= "over ";
if(!node.className) node.className = cls;
else if( node.className.indexOf(cls) == -1) node.className = cls +
node.className;
}
function Low(node,cls) {
if( (!node) || node.type) node = this;
if(!cls) cls= "over ";
var cn = node.className;
var idx = cn ? cn.indexOf(cls) : -1;
if( idx != -1 ) node.className = cn.substring(0,idx)+cn.substring
(idx+cls.length);
}
function UpdateRollerContext() {
var btn1 = document.getElementById('contentbtn1');
if(btn1) {
val = btn1.innerHTML;
btn1.onmouseover = function () {High(btn1)};
btn1.onmouseout = function () {Low(btn1)};
btn1.onclick = function () {window.location = "Your URL Here"};
btn1.title = "Transaction Articles";
}
}
Here is the css added to styles/default.css:
.btn {
cursor: pointer;
color: #2222e0;
font-family: Arial,helvetica,geneva,swiss,sunsans-regular;
font-size: 14px;
text-decoration: none;
}
#contentbtn1 {
cursor: pointer;
padding: 2px 5px 2px 5px;
color:#FFE300;
font-weight: bold;
}
#contentbtn1.over {
color: #0B1260;
}
Regards,
Dave
On Apr 9, 2008, at 11:30 AM, slowhome wrote:
>
> I'm trying to create a custom navigation menu that will display an
> "on" and
> "off" state for selected buttons.
>
> Because the navigation menu includes links to other sections in other
> webapps and also because the items in the menu are in a particular
> order, it
> can't be generated using the #foreach ($cat in
> $model.weblog.categories)
> statement. It has to be hard coded.
>
> I tried a few things in the template guides and looked at other Roller
> themes but wasn't able to get very far.
>
> In a nutshell, I would like it to do something like this:
>
>
> #if ($cat.name == "Java")
> Java Button On State
> #elseif
> Java Button Off State
> #end
>
>
>
> Thanks for any help.
>
> Eric
> --
> View this message in context: http://www.nabble.com/Custom-
> Navigation-tp16590546s12275p16590546.html
> Sent from the Roller - User mailing list archive at Nabble.com.
>
>