Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Steve 472 posts 1216 karma points
    Apr 16, 2014 @ 22:56
    Steve
    0

    Testing for Node Being Current Page and Assigning CSS class

    Is there a way to test a node to see if it is the current page? I thought it would have been something like:

    item.Model ? "class=active" : null; 

    this doesn't work so I was experiementing with item.IsDescendantOrSelf(Model), but of course this will assign the class to all the children of the current page. What can I do to only select the current node? Here is my navigation:

    @{
    var page = Model.AncestorOrSelf(3).Children;
    
    <ul>
    @foreach (var subPage in page) {
          var style = subPage.IsDescendantOrSelf(Model) ? "class=active" : "";
          var targetParent = subPage.externalUrl ? "target=_blank" : "";
          var linkParent = subPage.HasValue("externalUrl") ? subPage.url : subPage.Url;
          <li @style ><a href="@linkParent" @targetParent>@subPage.Name</a>
    
    @if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var item in subPage.Children.Where("Visible")) {
        var childActive = item.IsDescendantOrSelf(Model) ? "class=activeChild" : "";
        var target = item.externalUrl ? "target=_blank" : "";
        var link = item.HasValue("externalUrl") ? item.url : item.Url;
            <li @childActive ><a href="@link" @target>@item.Name</a>
    
    @if(item.Children.Any() && item.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var child in item.Children.Where("Visible")) {
        var subChildActive = child.IsDescendantOrSelf(Model) ? "class=subActive" : "";
        var subTarget = child.externalUrl ? "target=_blank" : "";
        var subLink = child.HasValue("externalUrl") ? child.url : child.Url;
            <li @subChildActive ><a href="@subLink" @subTarget>@child.Name</a>
    
    @if(child.Children.Any() && child.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var lastChild in child.Children.Where("Visible")) {
        var lastChildActive = lastChild.IsDescendantOrSelf(Model) ? "class=lastActive" : "";
        var lastChildTarget = lastChild.externalUrl ? "target=_blank" : "";
        var lastChildLink = lastChild.HasValue("externalUrl") ? lastChild.url : lastChild.Url;
            <li @lastChildActive ><a href="@lastChildLink" @lastChildTarget>@lastChild.Name</a></li>
            }
        </ul>
                }
                </li>
            }
                        </ul>
                    }
    
            </li>
            }
        </ul>
       } 
        </li>
  • Fuji Kusaka 2203 posts 4220 karma points
    Apr 17, 2014 @ 06:15
    Fuji Kusaka
    0

    Hi Steve,

    Change this 
    var subChildActive = child.IsDescendantOrSelf(Model)?"class=subActive":"";
    to
    var subChildActive = child.IsAncestorOrSelf(Model)?"class=subActive":""; 
  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 14:58
    Steve
    0

    Fuji, this still applies my css to any ancestors of the current page I would like to have it only affect the current node of the navigation. You can see my navigation here

    https://edit-wwwprep.rose-hulman.edu/offices-and-services/global-programs/current-students.aspx

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 17:23
    Steve
    100

    Got it. Apparently there is a IsHelper "IsEqual" that I can use to compair the node in the foreach to Model.

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 17:56
    Steve
    0

    Sorry, but I still have a question. What if I wanted the parent node of the children to be styled specifically when any of the children are active or IsEqual(Model), to show that they are part of the parents group?

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 19:45
    Steve
    0

    If I can't do it with ternary operators, how would I do it with an "if" statement?

    This method doesn't seem to be the right syntax?:

    @if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var item in subPage.Children.Where("Visible")) {
                if(item.IsFirst){
                    var style2 = "class=activeParent";
                } else if(item.IsEqual(Model)) {
                    var style2 = "class=activeChild";
                }
                var target = item.externalUrl ? "target=_blank" : "";
                var link = item.HasValue("externalUrl") ? item.url : item.Url;
                <li @style2 ><a href="@link" @target>@item.Name</a>
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies