Bootstrap > Scrollspy

Scrollspy events in Bootstrap

How to fire the event when the new item becomes activated by the scrollspy or how to display the event name when the link is clicked


Scrollspy Events

We use activate.bs.scrollspy to fire the event when the new item becomes activated by the scrollspy, it displays the event name when the link is clicked.

<style>
        #demo {
            position: fixed;
            top: 350px;
            font-size: 30px;
        }

        #myScrollspy {
            position: relative;
            top: 50px;
            height:280px;
            overflow: auto;
            font-size: 30px;
        }

        #dnf {
            color: white;
            background-color: red;
        }

        #tec {
            color: white;
            background-color: black;
        }

        #child {
            color: white;
            background-color: blue;
        }

        #itf {
            color: white;
            background-color: green;
        }
    </style>
</head>
<body>
    <p id="demo">You are currently viewing page: DotNetFunda</p>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SN ITFunda</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#dnf">DotNetFunda</a></li>
                        <li><a href="#tec">TechFunda</a></li>
                        <li><a href="#child">KidsFunda</a></li>
                        <li><a href="#itf">ITFunda</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div id="myScrollspy">

        <div id="dnf">
            <div class="container-fluid">
                <h1>DotNetFunda<a href="#" onclick="removeSection(this);">&times; Close</a></h1>
                <p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career. </p>
            </div>
        </div>
        <div id="tec">
            <div class="container-fluid">
                <h1>TechFunda<a href="#" onclick="removeSection(this);">&times; Close</a></h1>
                <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p>
            </div>
        </div>
        <div id="child">
            <div class="container-fluid">
                <h1>KidsFunda<a href="#" onclick="removeSection(this);">&times;Close</a></h1>
                <p>KidsFunda is a online tutorial which makes people entertain by playing games, watching videos, paintings, etc</p>
            </div>
        </div>
        <div id="itf">
            <div class="container-fluid">
                <h1>ITFunda <a href="#" onclick="removeSection(this);">&times;Close</a></h1>
                <p>ITFunda is a online tutorial which provides offline training and online training for the people and also provides sales of ebooks which are helpful to understand the people to learn technologies and besides these it provides job support for the people who are facing problems in their field </p>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            removeSection = function (e) {
                $(e).parents("#myScrollspy > div").remove();
                $('#myScrollspy').each(function () {
                    $(this).scrollspy('refresh');
                });
            };
            $("#myScrollspy").scrollspy({ target: ".navbar" });
            $(".navbar").on("activate.bs.scrollspy", function () {
                var x = $(".nav li.active > a").text();
                $("#demo").empty().html("You are currently viewing: " + x);
            })
        });
    </script>
  • In the above code snippet we have defined the scrollspy events
  • In next line we have created navbar in nav element using class value navbar-inverse navbar-fixed-top and we have created div section using class value as container-fluid and we have another div section  in the div section of the container fluid using class value navbar-header, we have created button in the navbar header with class value as navbar-toggle and data-target as #mynavbar and data-toggle as collapse in the button
  • In the next line we have anchor tag with class value as navbar-brand with value as SN ITFunda
  • In the next line we have created the div section with class value as collapse navbar-collapse  and id as mynavbar which calls the nav element in to this div section by using id in the div section
  • In the next line of the div section we have <ul> element with class value nav navbar nav and we created the list values
  • In the next line we have created the another div section with id value myscrollspy and we have create div sections in this div section to call the description of the list values by giving their id, we have given the onclick function remove section to close the list value by using jQuery in the script function
  • In the next line of the html page we have script function, we have defined scrollspy refresh and activate.bs.scrollspy functions
  • The first function of the script, we have scrollspy refresh where we have the variable name as remove section with function(e)
  • $(e).parents("#myScrollspy > div").remove(); - It defines as function  as parents and #myscrollspy calls the div section with id  and ("#myScrollspy > div") - It defines as scrollspy function with div elements of the list value   and remove clears the function 
  • $('#myScrollspy').each(function () -It defines as #myscrollspy function applies to each function of $(this).scrollspy('refresh'); to refresh the  list value 
  • In the next function of the script we have the function activate.bs.scrollspy,
  • In the first line of the script function we have  $("#myScrollspy").scrollspy({ target: ".navbar" }); which defines the scrollspy function to scroll the navbar by giving the #myscrollspy to scroll by giving target navbar
  • In the second line we have $(".navbar").on("activate.bs.scrollspy", function () - Which defines the navbar to activate the function to display which function we are visiting  by giving the activate.bs.scrollspy with function  var x = $(".nav li.active > a").text();-  which defines the var x as navbar list value with <a> element values  with text which is in the <p> tag and  $("#demo").empty().html("You are currently viewing: " + x); -  calls the id of the <p> element to view the visiting list value 

output

When the screen minimes the screen appears as

 

    

 Views: 632 | Post Order: 56



Write for us