Sunday, February 22, 2015

Scroll Spy


Scroll Spy with moving header

Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title> My ASP.NET Application</title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <%--/*
 * Bootstrap v3.3.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */--%>
    <script src="Scripts/bootstrap.js"></script>
    <link rel="stylesheet" href="/assets/reset/normalize.css">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <style>
        body {
            background: lightblue;
            position: relative;
            line-height: 1.5;
            font-family: 'Raleway', sans-serif;
        }

        h1, h2 {
            font-weight: 700;
        }

        h3 span {
            color: #286090;
        }

        .jumbotron {
            border-radius: 0px;
            background: #5fb3ce;
            margin-bottom: 0;
        }

        .jumbotron button {
            margin-top: 10px;
        }

        section {
            padding: 40px 0;
            border-bottom: 1px solid #c1e1ec;
        }

        #web-development,
        #mobile-development {
            padding-bottom: 0;
        }

        section:last-child {
            border-bottom: none;
        }

        .nav {
            background: #4baac8;
        }

        .nav a {
            color: black;
            font-style: italic;
        }

        .nav li a:hover,
        .nav li a:focus {
            background: #86c5da;
        }

        .nav .active {
            font-weight: bold;
            background: #72bcd4;
        }

        .nav .nav {
            display: none;
        }

        .nav .active .nav {
            display: block;
        }

        .nav .nav a {
            font-weight: normal;
            font-size: .85em;
        }

        .nav .nav span {
            margin: 0 5px 0 2px;
        }

        .nav .nav .active a,
        .nav .nav .active:hover a,
        .nav .nav .active:focus a {
            font-weight: bold;
            padding-left: 30px;
            border-left: 5px solid black;
        }

        .nav .nav .active span,
        .nav .nav .active:hover span,
        .nav .nav .active:focus span {
            display: none;
        }

        .application {
            border-top: 1px solid #c1e1ec;
        }

        .affix-top {
            position: relative;
        }

        .affix {
            top: 20px;
        }

        .affix,
        .affix-bottom {
            width: 213px;
        }

        .affix-bottom {
            position: absolute;
        }

        footer {
            border-top: 1px solid #c1e1ec;
            height: 50px;
        }

        footer p {
            line-height: 50px;
            margin-bottom: 0;
        }

        @media (min-width:1200px) {
            .affix,
            .affix-bottom {
                width: 263px;
            }
        }
    </style>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body data-spy="scroll" data-target=".scrollspy">
    <form runat="server">
        <asp:ContentPlaceHolder runat="server" ID="MainContent" />
    </form>
</body>
</html>
------------------------------------------------------------------
WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"  MaintainScrollPositionOnPostback="true"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <div class="container">
            <h1>Playing with Bootstrap</h1>
            <h3><span class="fa fa-pencil"></span> Affix &amp; Scrollspy plugins help you create nice scrolling effects.</h3>
            <h3><span class="fa fa-pencil"></span> Minimal code is needed. Plugins take care of the rest.</h3>
            <h3><span class="fa fa-pencil"></span> This demo will help you understand how to use them in your projects.</h3>
            <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins" class="btn btn-primary btn-lg">Learn More</a>
        </div>
    </div><!--end of .jumbotron-->
    <div class="container">
        <div class="row">

            <div class="col-md-3 scrollspy">
                <ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
                    <li class=""><a href="#web-design">Web Design</a></li>
                    <li class=""><a href="#web-development">Web Development</a></li>
                    <li class=""><a href="#ruby">Ruby</a></li>
                    <li class=""><a href="#python">Python</a></li>
                </ul><!-- end of main navigation -->
            </div>
            <div class="col-md-9">
                <section id="web-design">
                    <h2>web-design</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="web-development">
                    <h2>web-development</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="ruby">
                    <h2>ruby</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="python">
                    <h2>python</h2>


                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
            </div>
          
        </div><!--end of .row-->
    </div>
    <section class="application">
        <div class="container">
            <h2>Come and Join Us</h2>
            <div class="row">
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                        Nullam quis ante.
                    </p>
                    <img class="img-responsive  " src="http://placehold.it/500x250/5fb3ce/000000">
                </div>
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <button type="button" class="btn btn-primary">Apply Now</button>
                </div>
            </div><!--end of .row-->
        </div><!--end of .container-->
    </section>
    <footer>
        <p class="text-center">A demo by George Martsoukos. <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins">See article.</a></p>
    </footer>
    <script  type="text/javascript">
         //$('.scrollspy').on('activate.bs.scrollspy', function () {
         //    console.log('ji');
         //    // do something…
         //})
         //$('body').scrollspy({ target: '.scrollspy' })


         $('#nav').affix({
             offset: {
                 top: $('#nav').offset().top,
                 bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 60
             }
         });

         //$('#nav').affix({
         //    offset: {
         //        top: $('.jumbotron').outerHeight(),
         //        bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 40
         //    }
         //});

    </script>
</asp:Content>
------------------------------

ScrollSpy2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CodePen - Bootstrap's Affix and ScrollSpy plugins</title>

    <link rel="stylesheet" href="/assets/reset/normalize.css">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <style>
       
        body {
            background: lightblue;
            position: relative;
            line-height: 1.5;
            font-family: 'Raleway', sans-serif;
        }

        h1, h2 {
            font-weight: 700;
        }

        h3 span {
            color: #286090;
        }

        .jumbotron {
            border-radius: 0px;
            background: #5fb3ce;
            margin-bottom: 0;
        }

        .jumbotron button {
            margin-top: 10px;
        }

        section {
            padding: 40px 0;
            border-bottom: 1px solid #c1e1ec;
        }

        #web-development,
        #mobile-development {
            padding-bottom: 0;
        }

        section:last-child {
            border-bottom: none;
        }

        .nav {
            background: #4baac8;
        }

        .nav a {
            color: black;
            font-style: italic;
        }

        .nav li a:hover,
        .nav li a:focus {
            background: #86c5da;
        }

        .nav .active {
            font-weight: bold;
            background: #72bcd4;
        }

        .nav .nav {
            display: none;
        }

        .nav .active .nav {
            display: block;
        }

        .nav .nav a {
            font-weight: normal;
            font-size: .85em;
        }

        .nav .nav span {
            margin: 0 5px 0 2px;
        }

        .nav .nav .active a,
        .nav .nav .active:hover a,
        .nav .nav .active:focus a {
            font-weight: bold;
            padding-left: 30px;
            border-left: 5px solid black;
        }

        .nav .nav .active span,
        .nav .nav .active:hover span,
        .nav .nav .active:focus span {
            display: none;
        }

        .application {
            border-top: 1px solid #c1e1ec;
        }

        .affix-top {
            position: relative;
        }

        .affix {
            top: 20px;
        }

        .affix,
        .affix-bottom {
            width: 213px;
        }

        .affix-bottom {
            position: absolute;
        }

        footer {
            border-top: 1px solid #c1e1ec;
            height: 50px;
        }

        footer p {
            line-height: 50px;
            margin-bottom: 0;
        }

        @media (min-width:1200px) {
            .affix,
            .affix-bottom {
                width: 263px;
            }
        }
    </style>
   
</head>
<body data-spy="scroll" data-target=".scrollspy">
    <div class="jumbotron">
        <div class="container">
            <h1>Playing with Bootstrap</h1>
            <h3><span class="fa fa-pencil"></span> Affix &amp; Scrollspy plugins help you create nice scrolling effects.</h3>
            <h3><span class="fa fa-pencil"></span> Minimal code is needed. Plugins take care of the rest.</h3>
            <h3><span class="fa fa-pencil"></span> This demo will help you understand how to use them in your projects.</h3>
            <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins" class="btn btn-primary btn-lg">Learn More</a>
        </div>
    </div><!--end of .jumbotron-->

    <div class="container">
        <div class="row">

            <div class="col-md-3 scrollspy">
                <ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
                    <li class=""><a href="#web-design">Web Design</a></li>
                    <li class=""><a href="#web-development">Web Development</a></li>
                    <li class=""><a href="#ruby">Ruby</a></li>
                    <li class=""><a href="#python">Python</a></li>
                </ul><!-- end of main navigation -->
            </div>
            <div class="col-md-9">
                <section id="web-design">
                    <h2>web-design</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="web-development">
                    <h2>web-development</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="ruby">
                    <h2>ruby</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="python">
                    <h2>python</h2>


                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
            </div>
            <!--<div class="col-md-3 scrollspy">
                <ul id="nav" class="nav hidden-xs hidden-sm affix" data-spy="affix">
                    <li class=""><a href="#web-design">Web Design</a></li>
                    <li class=""><a href="#web-development">Web Development</a></li>
                    <li class=""><a href="#marketing">Marketing</a></li>
                    <li class=""><a href="#graphic-design">Graphic Design</a></li>
                    <li class=""><a href="#logistics">Logistics</a></li>
                    <li class=""><a href="#social">Social</a></li>
                    <li class=""><a href="#management">Management</a></li>
                    <li class=""><a href="#chemistry">Chemistry</a></li>
                    <li class=""><a href="#mobile-development">Mobile Development</a></li>
                    <li class=""><a href="#mathematics">Mathematics</a></li>
                </ul>
            </div>

            <div class="col-md-9">
                <section id="web-design">
                    <h2><span class="fa fa-edit"></span> Web Design</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                        tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc,
                        blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <button type="button" class="btn btn-primary">Learn More</button>
                </section><!--end of #web-design-->
            <!--<section id="web-development">
                <h2><span class="fa fa-edit"></span> Web Development</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Etiam ultricies nisi vel augue.
                    Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.Nam
                    quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
            </section>
            <section id="marketing">
                <h2><span class="fa fa-edit"></span> Marketing</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                </p>
                <p>
                    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                    viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                    Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                    Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                    adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section><!--end of #marketing-->
            <!--<section id="graphic-design">
                <h2><span class="fa fa-edit"></span> Graphic Design</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Etiam ultricies nisi vel augue.
                    Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #graphic-design-->
            <!--<section id="logistics">
                <h2><span class="fa fa-edit"></span> Logistics</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
                    Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #logistics-->
            <!--<section id="social">
                <h2><span class="fa fa-edit"></span> Social</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                </p>
                <p>
                    Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
                    sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #social-->
            <!--<section id="management">
                <h2><span class="fa fa-edit"></span> Management</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                    viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                    Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                    Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                    adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #management-->
            <!--<section id="chemistry">
                <h2><span class="fa fa-edit"></span> Chemistry</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
                    Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #chemistry-->
            <!--<section id="mobile-development">
                <h2><span class="fa fa-edit"></span> Mobile Development</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Etiam ultricies nisi vel augue.
                    Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                    tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                </p>
            </section>-->
            <!--<section id="mathematics">
                <h2><span class="fa fa-edit"></span> Mathematics</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Etiam ultricies nisi vel augue.
                    Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
                    tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                    massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                    quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <p>
                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                    Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                </p>
                <button type="button" class="btn btn-primary">Learn More</button>
            </section>-->
            <!--end of #mathematics-->
            <!--</div>--->

        </div><!--end of .row-->
    </div><!--end of .container-->

    <section class="application">
        <div class="container">
            <h2>Come and Join Us</h2>
            <div class="row">
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                        Nullam quis ante.
                    </p>
                    <img class="img-responsive  " src="http://placehold.it/500x250/5fb3ce/000000">
                </div>
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <button type="button" class="btn btn-primary">Apply Now</button>
                </div>
            </div><!--end of .row-->
        </div><!--end of .container-->
    </section>

    <footer>
        <p class="text-center">A demo by George Martsoukos. <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins">See article.</a></p>
    </footer>

    <!--<script src="Scripts/jquery-1.8.2.min.js"></script>-->
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        $('.scrollspy').on('activate.bs.scrollspy', function () {
            console.log('ji');
            // do something…
        })
        //$('body').scrollspy({ target: '.scrollspy' })

      
        $('#nav').affix({
            offset: {
                top: $('#nav').offset().top,
                bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 40
            }
        });

        //$('#nav').affix({
        //    offset: {
        //        top: $('.jumbotron').outerHeight(),
        //        bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 40
        //    }
        //});

    </script>

</body>
</html>
-----------------------------------------------------------------------------

Scroll Spy with fixed header

Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title> My ASP.NET Application</title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <%--/*
 * Bootstrap v3.3.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */--%>
    <script src="Scripts/bootstrap.js"></script>
    <link rel="stylesheet" href="/assets/reset/normalize.css">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <style>
        .gwmposition{
            margin-top: 320px !important ;padding:-320px !important;
        }
        body {
            background: lightblue;
            position: relative;
            line-height: 1.5;
            font-family: 'Raleway', sans-serif;
        }

        h1, h2 {
            font-weight: 700;
        }

        h3 span {
            color: #286090;
        }

        .jumbotron {
            border-radius: 0px;
            background: #5fb3ce;
            margin-bottom: 0;
            position:fixed;
            top:0;
            width:100%;
            z-index: 1;
        }

        .jumbotron button {
            margin-top: 10px;
        }

        section {
            padding: 40px 0;
            border-bottom: 1px solid #c1e1ec;
        }

        #web-development,
        #mobile-development {
            padding-bottom: 0;
        }

        section:last-child {
            border-bottom: none;
        }

        .nav {
            background: #4baac8;
        }

        .nav a {
            color: black;
            font-style: italic;
        }

        .nav li a:hover,
        .nav li a:focus {
            background: #86c5da;
        }

        .nav .active {
            font-weight: bold;
            background: #72bcd4;
        }

        .nav .nav {
            display: none;
        }

        .nav .active .nav {
            display: block;
        }

        .nav .nav a {
            font-weight: normal;
            font-size: .85em;
        }

        .nav .nav span {
            margin: 0 5px 0 2px;
        }

        .nav .nav .active a,
        .nav .nav .active:hover a,
        .nav .nav .active:focus a {
            font-weight: bold;
            padding-left: 30px;
            border-left: 5px solid black;
        }

        .nav .nav .active span,
        .nav .nav .active:hover span,
        .nav .nav .active:focus span {
            display: none;
        }

        .application {
            border-top: 1px solid #c1e1ec;
        }

        .affix-top {
            position: relative;
            margin-top: 100px ! important;
        }

        .affix {
            top:380px ! important;
        }

        .affix,
        .affix-bottom {
            width: 213px;
        }

        .affix-bottom {
            position: fixed ! important;
          
        }

        footer {
            border-top: 1px solid #c1e1ec;
            height: 50px;
        }

        footer p {
            line-height: 50px;
            margin-bottom: 0;
        }

        @media (min-width:1200px) {
            .affix,
            .affix-bottom {
                width: 263px;
            }
        }
        /*.gwmbody
        {
            position:relative ! important;
        }*/
    </style>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body data-spy="scroll" data-target=".scrollspy">
    <form runat="server">
        <asp:ContentPlaceHolder runat="server" ID="MainContent" />
    </form>
</body>
</html>
-----------------------------------------
WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"  MaintainScrollPositionOnPostback="true"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <div class="container">
            <h1>Playing with Bootstrap</h1>
            <h3><span class="fa fa-pencil"></span> Affix &amp; Scrollspy plugins help you create nice scrolling effects.</h3>
            <h3><span class="fa fa-pencil"></span> Minimal code is needed. Plugins take care of the rest.</h3>
            <h3><span class="fa fa-pencil"></span> This demo will help you understand how to use them in your projects.</h3>
            <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins" class="btn btn-primary btn-lg">Learn More</a>
        </div>
    </div><!--end of .jumbotron-->
    <div class="container">
        <div class="row">

            <div class="col-md-3 scrollspy">
                <ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
                    <li class=""><a href="#web-design">Web Design</a></li>
                    <li class=""><a href="#web-development">Web Development</a></li>
                    <li class=""><a href="#ruby">Ruby</a></li>
                    <li class=""><a href="#python">Python</a></li>
                </ul><!-- end of main navigation -->
            </div>
            <div class="col-md-9 container gwmposition">
               
                <section id="web-design">
                    <h2>web-design</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="web-development">
                    <h2>web-development</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="ruby">
                    <h2>ruby</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
                <section id="python">
                    <h2>python</h2>


                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
                        quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </p>
                    <p>
                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                        viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                        Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                        Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
                        adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
                        tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                    </p>
                </section>
            </div>
          
        </div><!--end of .row-->
    </div>
    <section class="application">
        <div class="container">
            <h2>Come and Join Us</h2>
           
Lauds Finance Commission recommendations for revenue share

Chief Economic Adviser Arvind Subramanian said on Friday that calculations showed that the total transfers from the Centre to the States as a percentage of the divisible pool of its net tax revenue would remain nearly the same even after the acceptance of the 14th Finance Commission’s recommendations.

However, transfers from the Central government would no longer be scheme-and-grant-based, and it would rather be devolution-based, leading to more spending freedom for the States — and that would be a “watershed change in the story of Indian federalism.”

In a presentation to reporters after Union Finance Minister Arun Jaitley tabled the Economic Survey 2014-15 in Parliament, Dr. Subramanian said that in the last three years, the Centre transferred, on an average, 64 per cent of the divisible pool of its net taxes to the States under various heads. This included the States’ share of 32 per cent of the pool on account of the 13th Finance Commission’s award and the Centre’s assistance to the States by way of plan transfers.

The Centre would have had to transfer to the States funds amounting to 65 per cent of the pool had the recommendations of the 14th Finance Commission (which is for a 42 per cent States’ share against the 13th Finance Commission’s 32 per cent) applied in the current year, he said.

The 14th Finance Commission’s recommendations do not apply in the current year; they will be applicable for the five-year period starting April 1.
            
           
Lauds Finance Commission recommendations for revenue share

Chief Economic Adviser Arvind Subramanian said on Friday that calculations showed that the total transfers from the Centre to the States as a percentage of the divisible pool of its net tax revenue would remain nearly the same even after the acceptance of the 14th Finance Commission’s recommendations.

However, transfers from the Central government would no longer be scheme-and-grant-based, and it would rather be devolution-based, leading to more spending freedom for the States — and that would be a “watershed change in the story of Indian federalism.”

In a presentation to reporters after Union Finance Minister Arun Jaitley tabled the Economic Survey 2014-15 in Parliament, Dr. Subramanian said that in the last three years, the Centre transferred, on an average, 64 per cent of the divisible pool of its net taxes to the States under various heads. This included the States’ share of 32 per cent of the pool on account of the 13th Finance Commission’s award and the Centre’s assistance to the States by way of plan transfers.

The Centre would have had to transfer to the States funds amounting to 65 per cent of the pool had the recommendations of the 14th Finance Commission (which is for a 42 per cent States’ share against the 13th Finance Commission’s 32 per cent) applied in the current year, he said.

The 14th Finance Commission’s recommendations do not apply in the current year; they will be applicable for the five-year period starting April 1.

           <%-- <div class="row">
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                        Nullam quis ante.
                    </p>
                    <img class="img-responsive  " src="http://placehold.it/500x250/5fb3ce/000000">
                </div>
                <div class="col-sm-6">
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <p>
                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
                        Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
                    </p>
                    <button type="button" class="btn btn-primary">Apply Now</button>
                </div>
            </div><!--end of .row-->--%>
        </div><!--end of .container-->
    </section>
    <footer>
        <p class="text-center">A demo by George Martsoukos. <a href="http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins">See article.</a></p>
    </footer>
    <script  type="text/javascript">
         $('.scrollspy').on('activate.bs.scrollspy', function () {
             console.log('ji');
             // do something…
         });
         //$('body').scrollspy({ target: '.scrollspy' })


         //$('#nav').affix({
         //    offset: {
         //        top: $('#nav').offset().top+200,
         //        bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 60
         //    }
         //});

         //$('#nav').affix({
         //    offset: {
         //        top: $('.jumbotron').outerHeight(),
         //        bottom: $('footer').outerHeight(true) + $('.application').outerHeight(true) + 40
         //    }
         //});

 $('a[href*=#]:not([href=#])').click(function () {
             if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                 || location.hostname == this.hostname) {

                 var target = $(this.hash);
                 target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                 if (target.length) {
                     $('html,body').animate({
                         scrollTop: target.offset().top-320
                     }, 1000);
                     return false;
                 }
             }
         });
         //$(function () {
         //    $('a[href*=#]:not([href=#])').click(function () {
         //        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
         //            var target = $(this.hash);
         //            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
         //            if (target.length) {
         //                $('html,body').animate({
         //                    scrollTop: target.offset().top
         //                }, 1000);
         //                return false;
         //            }
         //        }
         //    });
         //});
         function ScrollDoc()
         {
             $("html, body").animate({ scrollTop: 35 }, 600);
             return false;
         }
    </script>
</asp:Content>
--------------------------------------------------------
bootstrap.js

need to modify process function in scroll spy plugin

* 370 is height of the header banner

ScrollSpy.prototype.process = function () {
    var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
    var scrollHeight = this.getScrollHeight()
    var maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height()
    var offsets      = this.offsets
    var targets      = this.targets
    var activeTarget = this.activeTarget
    var i

    if (this.scrollHeight != scrollHeight) {
      this.refresh()
    }

    if (scrollTop >= maxScroll) {
      return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
    }

    if (activeTarget && scrollTop < offsets[0]-370) {
      this.activeTarget = null
      return this.clear()
    }

    for (i = offsets.length; i--;) {
      activeTarget != targets[i]
        && scrollTop >= (offsets[i]-370)
        && (!offsets[i + 1] || scrollTop <= (offsets[i + 1]-370))
        && this.activate(targets[i])
    }
  }

Saturday, February 7, 2015

Sharepoint Search Related blogs



Best blog

http://dinushaonline.blogspot.in/2014/06/sharepoint-2013-set-search-result.html

---------------------------------------------------------------------------

http://rwcchen.blogspot.in/2013/07/create-custom-content-by-search-web-part.html

http://www.networksteve.com/enterprise/topic.php/Extend_ResultScriptWebPart_to_display_the_search_results/?TopicId=68094&Posts=2

http://sharepoint.stackexchange.com/questions/67619/how-to-pass-parameters-to-the-control-display-template-of-a-content-search-web-p


http://www.mavention.com/blog/inconvenient-anonymous-search-results-cache-user-segments

http://carepoint.blogspot.in/2013/04/setting-dataprovider-for.html

https://sptalks.wordpress.com/2013/04/23/how-to-programmatically-change-content-search-web-part-querytext/

Upload files to libraries using SharePoint services


We can use copy.asmx SharePoint web service to upload files when we can’t use SharePoint object model.
It’s very simple. you need to do something like below. 
1: const string webUrl = "http://sp13:8080/sites/hr/";
   2: const string sourceUrl = @"C:\Copy\emp.doc";
   3: string[] destinationUrl = { @"http://sp13:8080/sites/hr/Documents/emp.doc";
   4: CopyService.CopyResult[] resultArray;
   5: byte[] fileContents;
   6:  
   7:  var copyService = new CopyService.Copy
   8:   {
   9:     Url = webUrl + "/_vti_bin/copy.asmx",
  10:     Credentials = System.Net.CredentialCache.DefaultCredentials
  11:   };
  12:  
  13:  
  14:  var filedInfo = new CopyService.FieldInformation
  15:   {
  16:     DisplayName = "Title",
  17:     Type = CopyService.FieldType.Text,
  18:     Value = "Test"
  19:   };
  20:  
  21: //add values to fields in the library using fieldInfoArray array
  22: CopyService.FieldInformation[] filedInfoArray = { filedInfo };
  23:  
  24: //upload file using a file stream
  25: using (var stream = new FileStream(sourceUrl, FileMode.Open, FileAccess.Read))
  26:  {
  27:    fileContents = new Byte[stream.Length];
  28:    var read = stream.Read(fileContents, 0, Convert.ToInt32(stream.Length));
  29:    stream.Close();
  30:   }
  31:  
  32: var copyResult = copyService.CopyIntoItems(sourceUrl, destinationUrl, filedInfoArray, fileContents, out resultArray);

Delegate in C#


  1. A delegate is a type that represents references to methods with a particular parameter list and return type. When you instantiate a delegate, you can associate its instance with any method with a compatible signature and return type. You can invoke (or call) the method through the delegate instance.

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DelegateExample
{
    class Program
    {
        static void Main(string[] args)
        {
            PropertyClass objPropertyClass = new PropertyClass("prabakaran");

            objPropertyClass.Changed += DelegateAction;
            objPropertyClass.Changed += DelegateAction;
            objPropertyClass.Changed += DelegateAction;
            objPropertyClass.Name = "pk";


            Console.WriteLine(objPropertyClass.Name);
            Console.ReadLine();
        }

        private static void DelegateAction(object sender, EventArgsClass args)
        {
            Console.WriteLine("oldvalue:" + args.OldValue);
            Console.WriteLine("newvalue:" + args.NewValue);
        }

        //private static void DelegateAction(string oldValue, string newValue)
        //{
        //    Console.WriteLine("oldvalue:" + oldValue);
        //    Console.WriteLine("newvalue:" + newValue);
        //}
    }
}

PropertyClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DelegateExample
{
    public class PropertyClass
    {
        public PropertyClass(string name="Default Name")
        {
            Name = name;
        }

        private string _name;
        public string Name 
        { 
            get
            { 
                return _name;
            }
            set
            {
                if (Changed != null)
                {
                    EventArgsClass objEventArgs = new EventArgsClass();
                    objEventArgs.OldValue = _name;
                    objEventArgs.NewValue = value;
                    Changed(this, objEventArgs);
                }
                _name=value;
            }
        }

        public event PropertyChanged Changed;
    }
}


DelegateClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DelegateExample
{
    public delegate void PropertyChanged(object sender, EventArgsClass args);
}

EventArgsClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DelegateExample
{
    public class EventArgsClass:EventArgs
    {
        public string OldValue { get; set; }
        public string NewValue { get; set; }
    }
}


Thursday, February 5, 2015

upload a file to a document library in sharepoint


String fileToUpload = @"C:\YourFile.txt";
String sharePointSite = "http://yoursite.com/sites/Research/";
String documentLibraryName = "Shared Documents";

using (SPSite oSite = new SPSite(sharePointSite))
{
    using (SPWeb oWeb = oSite.OpenWeb())
    {
        if (!System.IO.File.Exists(fileToUpload))
            throw new FileNotFoundException("File not found.", fileToUpload);                   

        SPFolder myLibrary = oWeb.Folders[documentLibraryName];

        // Prepare to upload
        Boolean replaceExistingFiles = true;
        String fileName = System.IO.Path.GetFileName(fileToUpload);
        FileStream fileStream = File.OpenRead(fileToUpload);

        // Upload document
        SPFile spfile = myLibrary.Files.Add(fileName, fileStream, replaceExistingFiles);

        // Commit
        myLibrary.Update();
    }
}

 string filePath = @"C:\styles\MyStyles.css";
    string siteURL = "http://MyDomain.net/";
    string libraryName = "Style Library";

    using (SPSite oSite = new SPSite(siteURL))
    {
        using (SPWeb oWeb = oSite.OpenWeb())
        {
            if (!System.IO.File.Exists(filePath))
                throw new FileNotFoundException("File not found.", filePath);                    

            SPFolder libFolder = oWeb.Folders[libraryName];

            // Prepare to upload
            string fileName = System.IO.Path.GetFileName(filePath);
            FileStream fileStream = File.OpenRead(filePath);

            //Check the existing File out if the Library Requires CheckOut
            if (libFolder.RequiresCheckout)
            {
                try {
                    SPFile fileOld = libFolder.Files[fileName];
                    fileOld.CheckOut();
                } catch {}
            }

            // Upload document
            SPFile spfile = libFolder.Files.Add(fileName, fileStream, true);

            // Commit 
            myLibrary.Update();

            //Check the File in and Publish a Major Version
            if (libFolder.RequiresCheckout)
            {
                    spFile.CheckIn("Upload Comment", SPCheckinType.MajorCheckIn);
                    spFile.Publish("Publish Comment");
            }
        }
    }

private void UploadToSharePoint(string p, out string newUrl)  //p is path to file to load
    {
        string siteUrl = "https://myCompany.sharepoint.com/site/";
        //Insert Credentials
        ClientContext context = new ClientContext(siteUrl);

        SecureString passWord = new SecureString();
        foreach (var c in "mypassword") passWord.AppendChar(c);
        context.Credentials = new SharePointOnlineCredentials("myUserName", passWord);
        Web site = context.Web;

        //Get the required RootFolder
        string barRootFolderRelativeUrl = "Shared Documents/foo/bar";
        Folder barFolder = site.GetFolderByServerRelativeUrl(barRootFolderRelativeUrl);

        //Create new subFolder to load files into
        string newFolderName = baseName + DateTime.Now.ToString("yyyyMMddHHmm");
        barFolder.Folders.Add(newFolderName);
        barFolder.Update();

        //Add file to new Folder
        Folder currentRunFolder = site.GetFolderByServerRelativeUrl(barRootFolderRelativeUrl + "/" + newFolderName);
        FileCreationInformation newFile = new FileCreationInformation { Content = System.IO.File.ReadAllBytes(@p), Url = Path.GetFileName(@p), Overwrite = true };
        currentRunFolder.Files.Add(newFile);
        currentRunFolder.Update();

        context.ExecuteQuery();

        //Return the URL of the new uploaded file
        newUrl = siteUrl + barRootFolderRelativeUrl + "/" + newFolderName + "/" + Path.GetFileName(@p);
    }
using (ClientContext clientContext = new ClientContext("http://contoso.com/subsite"))
{
    try
    {
        List documentLibrary = clientContext.Web.Lists.GetByTitle("List Title");
        FileCreationInformation newFile = new FileCreationInformation();
        newFile.Content = "Add File Stream Array";
        newFile.Overwrite = true;
        newFile.Url = "http://contoso.com/subsite/listurl/" + strFileName.Trim();
        Microsoft.SharePoint.Client.File uploadFile = documentLibrary.RootFolder.Files.Add(newFile);
    uploadFile.ListItemAllFields["Column Internal Name"] = "Column Internal Value";

        uploadFile.ListItemAllFields.Update();
        clientContext.ExecuteQuery();
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

Tuesday, February 3, 2015

Add and remove User into SharePoint group Using Client Object Model



ClientContext client = new ClientContext(“http://SiteUrl”);
client.ExecuteQuery();
Web website = client.Web;
client.Load(website, w => w.AllProperties, w => w.SiteGroups, w => w.SiteUserInfoList, w => w.Webs,w => w.Title);
client.ExecuteQuery();
GroupCollection groupCollection = website.SiteGroups;
client.Load(groupCollection, groups => groups.Include(grps => grps.Users, grps => grps.Title));
client.ExecuteQuery();
User user;
foreach (Group group in groupCollection)
{
   if (group.Title.Equals(“GroupName”))
   {
      UserCreationInformation userInfo = new UserCreationInformation();
      userInfo.LoginName = “UserName”;
             
      if (“Add”)
      {
         user = group.Users.Add(userInfo);
         group.Users.AddUser(user);
       }
       else if (“Remove”)
       {
         user = group.Users.GetByLoginName(“UserName”);
         group.Users.Remove(user);
        }
        group.Update();
        website.Update();
        client.ExecuteQuery();
       
     }
  }


 using group id

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint.Client;

namespace COM
{
    class Program
    {
        static void Main(string[] args)
        {
            // siteURL is the string that contains the site URL
            string siteUrl = "http://serverName:50000/sites/Testing";
            // ClientContext object is used to get the context for the SharePoint objects
            ClientContext clientContext = new ClientContext(siteUrl);
            Web web = clientContext.Web;
            User user = web.EnsureUser(@"domainName\userName");
            Group testingOwnersGroup = web.SiteGroups.GetById(6);
            UserCollection userCollection = testingOwnersGroup.Users;
            userCollection.Remove(user);                      
            clientContext.ExecuteQuery();          
        }
    }
}