Copied to clipboard

Flag this post as spam?

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


  • C Andreasson 79 posts 207 karma points
    Oct 05, 2014 @ 10:11
    C Andreasson
    0

    Page scroll down

    Hi

    I do not really understand how I change the code in my partial view

    so that navigation works with page scroll? (bootstrap).

    Hier the orignal Html:

    The Partial view macro "navigation"

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 05, 2014 @ 12:00
    Dennis Aaen
    0

    Hi C Andreasson,

    The only thing I see you are missing in your Razor script is that you don´t have the id of the section that you need to scroll down too. If you have all the css and javascript files in place.

    It can be done by this: In my case I have used a parital razor macro

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    @*
        Macro to display child pages below the root page of a standard website.
        Also highlights the current active page/section in the navigation with
        the css class "current".
    *@

    @{
        @* Get the root of the website *@
        var root = CurrentPage.AncestorOrSelf(1);
    }

    <ul class="nav nav-bar">
        <li class="hidden">
            <a href="#page-top"></a>
        </li>
        <li><a href="@root.Url">@root.Name</a></li>
        @foreach (var page in root.Children.Where("Visible"))
        {
            <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
                <a href="#@page.Name" class="page-scroll">@page.Name</a>
            </li>
        }
    </ul>


    And for the id I have choosen in this example the name of the page but if  you use the id of the page as the selector, you can change it, just change this:

    <a href="#@page.Name" class="page-scroll">@page.Name</a>

    To

    <a href="#@page.Id" class="page-scroll">@page.Name</a>

    The next thing you need to do is to set the id or name in that content, that should be scroll down to if you are clicking on the link. Here is on how it´s done, with the boostrap example.

    The id need to match the id in the link, so if you chosee to use page id´s in Umbraco, and the page, has an id of e.g 1068, then you section with the content for that page should look like this:

     <!-- About Section -->
        <section id="1068" class="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>About Section</h1>
                    </div>
                </div>
            </div>
        </section>

    So in the navgation code if you see the markup in your page your markup shold look like this:

    <a href="#1068" class="page-scroll">@page.Name</a>

    Hope this helps, and make sense. If you have further questions keep asking them.

    /Dennis

  • C Andreasson 79 posts 207 karma points
    Oct 05, 2014 @ 15:27
    C Andreasson
    0

     

    Hi Dennis

    Thanks for your reply;-)  I'm almost there but not quite. I can see it in the URL 

    I have another button on the page that scrolls, so my js and css works ok fine. 

    However, menu buttons do not ?? I have written as you can see below.

    What do you think?

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 05, 2014 @ 16:08
    Dennis Aaen
    100

    Hi C Andreasson,

    From the screenshot that you have showing in your post the link goes to an section with the name about. So I assume that you page is named about.

    Did you have a section, div, or something else where the content for that page is in. Does it have the id="about"

    If you see the bootstrap HTML is look like this:

    <!DOCTYPE html>
    <html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Scrolling Nav - Start Bootstrap Template</title>

        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="css/scrolling-nav.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>

    <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                        <li class="hidden">
                            <a class="page-scroll" href="#page-top"></a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#about">About</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#services">Services</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>

        <!-- Intro Section -->
        <section id="intro" class="intro-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Scrolling Nav</h1>
                        <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
                        <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>About Section</h1>
                    </div>
                </div>
            </div>
        </section>

        <!-- Services Section -->
        <section id="services" class="services-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Services Section</h1>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Contact Section</h1>
                    </div>
                </div>
            </div>
        </section>

        <!-- jQuery Version 1.11.0 -->
        <script src="js/jquery-1.11.0.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>
        <script src="js/scrolling-nav.js"></script>

    </body>

    </html>

    When I am clicking on the about link it scrolls down to the section with the id of about.

    The content that will show in this case would be:

        <!-- About Section -->
        <section id="about" class="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>About Section</h1>
                    </div>
                </div>
            </div>
        </section>

    So the href attribute on the link needs to match the id of the section or div or whatever HTML tags you are using. In this example "about"

    <a class="page-scroll" href="#about">About</a>
     <!-- About Section -->
        <section id="about" class="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>About Section</h1>
                    </div>
                </div>
            </div>
        </section>

    Hope this helps, and make sense.

    /Dennis 

  • C Andreasson 79 posts 207 karma points
    Oct 05, 2014 @ 22:59
    C Andreasson
    0

    Hi Dennis

     

    Thank you so much ;-) yes it make sense

Please Sign in or register to post replies

Write your reply to:

Draft