Sunday, February 22, 2015

Merge Two Datatable using linq


Merge Two Datatable using linq
 
private void showEmployeeRecords()
{
DataTable dtEmployee = getEmployeeRecords();
DataTable dtDepartment = getDepartmentRecords();

#region Second solution using linq

//==== First Datatable structure should be defined =====================

DataTable dt = new DataTable();
dt.Columns.Add("EmployeeID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("FatherName", typeof(string));
dt.Columns.Add("DepartmentName", typeof(string));

//====== Wrting query for join between two data tables ===========================

var result = from dataRows1 in dtEmployee.AsEnumerable()
join dataRows2 in dtDepartment.AsEnumerable()
on dataRows1.Field("DeptID") equals dataRows2.Field("DeptID")

select dt.LoadDataRow(new object[]
{
dataRows1.Field("EmployeeID"),
dataRows1.Field("EmployeeName"),
dataRows1.Field("FatherName"),
dataRows1.Field("Address"),
dataRows2.Field("DeptName")
}, false);

//==== copy output of result into datatable named 'dt' =============================

result.CopyToDataTable(); // This point records will be loaded in dt data table

#endregion

}
Posted by at No comments:

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])
    }
  }

Posted by at No comments:
Subscribe to: Posts (Atom)