loading...

Bootstrap 3 – Enhancing User Experience with JavaScript

In the previous chapter, we had a look at the various components in Bootstrap. Bootstrap comes with official baked-in jQuery plugins, which helps you to build a dynamic website. You can develop a creative website by just including the plugins and further customizing it with JavaScript as well as data attributes. In this chapter, we’ll take a look at enriching the user experience with JavaScript and jQuery plugins. There are many ways to use the plugins, but we’ll show you easier ways to incorporate it to help you get to grips with them.

We’ll be covering the following popular plugins in this chapter:

  • Tooltip
  • Popovers
  • ScrollSpy
  • Collapse with Accordion
  • Modals
  • Carousel

Streamlining your projects with official plugins

Since most of the plugins have a dependency on jQuery, you have to include the CDN link for jQuery or include the jQuery file in your code by downloading the file from the official website. In this chapter, we’re using the CDN link for all the examples including the Bootstrap JavaScript and theme file.

The <head> section for all the coding examples will include the following links:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Now, let’s take a look at the popular plugins, which you can incorporate in your code to build aesthetic websites.

Tooltips

Tooltips are used to depict information or hint for icons, links, and buttons whenever you hover your mouse over them. As soon as you hover your mouse over the element, it displays the relevant information as defined in the code, thereby assisting your website users to know the purpose of those items or links.

Take a look at the following code example to understand this better:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap ToolTips with Placement using JavaScript</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".packtpub1").tooltip({
        placement : 'left'
    });
    $(".packtpub2").tooltip({
        placement : 'top'
    });
    $(".packtpub3").tooltip({
        placement : 'right'
    });
    $(".packtpub4").tooltip({
        placement : 'bottom'
    });
});
</script>
<style type="text/css">
  #packt{
      padding: 150px 150px 150px 150px;
              }
</style>
</head>
<body >
<div> 
<button type="button" class="btn btn-primary packtpub1" data-toggle="tooltip"  title="Left Tooltip"> Hey Joe </button>
<hr><br><br>
<button type="button" class="btn btn-primary packtpub2" data-toggle="tooltip"  title="Top Tooltip"> Hey Joe </button>
<hr><br><br>
<button type="button" class="btn btn-primary packtpub3" data-toggle="tooltip"  title="Right ToolTip"> Hey Joe </button>
<hr><br><br>
<button type="button"  data-toggle="tooltip"  title="Bottom ToolTip"> Hey Joe </button>
</div>
</body>
</html>

The output of this code will be as follows:

In this example, let’s hover over the second button, where the tooltip is defined to be on top of the button. The output upon hovering will be as follows:

As you can see, the tooltip for the second button is on the top of the element and has been defined as Top Tooltip in the title of the second button. In the preceding code, we defined the placement in the JavaScript code, resulting in tooltips being displayed on the left of the first button, top of the second button, right of the third button, and bottom of the fourth button. We used the data-toggle attribute, to which we have assigned the tooltip value.

Popovers

Popovers are used for housing secondary information for any element by adding small overlays of content. It is particularly useful as you can display elements such as links and image tags, including other <div> elements.

Take a look at the following code to help you understand it better:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Popovers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".packtpub a").popover({
        placement : 'top'
    });
});
$(document).ready(function(){
    $(".pubman a").popover({
        placement : 'bottom'
    });
});    
</script>
<style type="text/css">
  #packt{
      padding: 150px 175px 175px 175px;
    }
</style>
</head>
<body >
<div>
    <ul class="packtpub"> 
        <li><a href="#" class="btn btn-default" data-toggle="popover" title="Musician" data-content="Awesome Vocalist">Jim Morrison</a></li>
        <hr><br>
        <li><a href="#" class="btn btn-success" data-toggle="popover" title="Scientist" data-content="Awesome Thinker">Stephen Hawking</a></li>
        <hr><br>
    </ul>     
 </div> 
 <div>
        <ul class="pubman">
    <li><a href="#" class="btn btn-danger" data-toggle="popover" title="Musician" data-content="Amazing guitarist">Jimi Hendrix</a></li>
       <hr><br> 
        <li><a href="#"  data-toggle="popover" title="Philosopher" data-content="Rational Thinker">Socrates</a></li>
    </ul>
</div>
</body>
</html>

The output will be as follows:

Let’s now click on the first button ( Jim Morrison) and the fourth button ( Socrates). On clicking, we will get the following output:

As you can see, Jim Morrison is defined in the title attribute of the code as Musician and Awesome Vocalist as the content defined by the data-content attribute. Similarly, by clicking on Socrates you can see Philosopher as defined in the title attribute of the code and the content defined as Rational Thinker in the data-content attribute. In the preceding code, we defined one list using the .packtpub class and the other using the .pubman class. The data-toggle attribute specifies the element which controls the popover. The data-content attribute specifies the content depicted inside the popover, and the placement defines the position of the popover. In the output, if you click on all the buttons with the .packtpub class, you can see the placement of the popover is on top, whereas the buttons with the .pubman class have their popover placed on the bottom of the buttons.

Accordion

To manage comprehensive content, we use the .collapse class with accordion, using which we can expand or stretch to reveal the content associated with that item. This feature is quite handy and can be used in conjunction with panels to subtly depict a large amount of content.

Take a look at the following code to understand it better:

<!DOCTYPE html>
<html>
<head>
<title>Collapse Functionality with Accordion</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
   #packt{
      padding: 35px 35px 35px 35px;
    }
</style>
</head>
<body id="packt">
    <div class="panel-group" id="accordion">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#packtpubcollapse1">WebRTC</a>
                </h4>
            </div>
            <div id="packtpubcollapse1" class="panel-collapse collapse in">
                <div class="panel-body">
      <p>WebRTC(Web Real-Time Communication) enables web developers to write real-time multimedia applications for theWeb which can be deployed across multiple platforms, without the need for intermediate software or plugins.WebRTC enables Peer-to-Peer, browser-to-browser communication and is widely used for web-based phone calling, conferencing, enterprise contact centres, and educational apps. The resourceful and interactive nature of WebRTC makes it an excellent utilityofchoice for real-time web application development. <a href="https://www.packtpub.com/books/content/webrtc"> More information</a></p>
                </div>
            </div>
        </div>
       <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#packtpubcollapse2">Meteor</a>
                </h4>
            </div>
            <div  class="panel-collapse collapse">
                <div >
                    <p>Meteor is an open-source web application framework which follows the MVVM pattern.Meteor runs on both the server-side as well as the client-side, since both share the same database API. Meteor is written in pure JavaScript and uses established design patterns, easing the pain of the tedious tasks of web application development, helping you build robust applications in very little time. <a href="https://www.packtpub.com/books/content/meteor-meteor-js">More information</a></p>
                </div>
            </div>
        </div>
      </div>
</body>
</html>

The output of this code will be as follows:

If you click on
Meteor in the panel below WebRTC in the output, you can see that the WebRTC panel collapses and the Meteor panel is displayed. Therefore, the output will be as displayed as in the following screenshot:

As you can see, the accordion feature is quite useful to manage large amounts of content. In the preceding code, we defined the data attributes by assigning the value accordion as data-parent in addition to defining collapse as the value for the data-toggle attribute. We have defined the panels and used the .panel-collapse class in conjunction with the .collapse and .collapse in classes. While collapse hides the content, the .collapse in class shows the content. Therefore, we have defined the first panel with the .collapse in class so that the first panel is active and displays information by default.

ScrollSpy

If you have a web page with a lot of content that runs to more than a single page, ScrollSpy
is the solution for such navigation. It is especially used in conjunction with the navbar. The navigation menu gets highlighted based on the scroll position, thereby providing high accessibility to your website users.

Since the code is too large to fit in to a single page, we will discuss it part by part. You can always refer to the code bundle to see the entire code at once.

In the <head> section, we include all the relevant links and define the scroll-area:

<!DOCTYPE html>
<html>
<head>
<title>Scrollspy in Bootstrap</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.scroll-area {
  height: 500px;
  position: relative;
  overflow: auto;
}
#packt
    {padding: 30px 30px 30px 30px;}
    </style>
</head>

Then, we create a parent <div> element with the .container class in which we will put all our code, and then at the end of the following code samples, which will be incorporated in the complete code, we will close the .container class’ </div> element.

After, we create a navbar and also include a drop-down menu in one of the navbar list items:

<h2>ScrollSpy</h2>
    <p>The ScrollSpy plugin is quite useful for automatically updating nav targets based on scroll position. When you scroll the area below the navbar,you can witness the change in the active class.It works for dropdowns too.</p>
    <nav id="myNavbar" class="navbar navbar-default" role="navigation"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="#">Packt Publishing </a>
        </div>
        <div class="collapse navbar-collapse" >
            <ul class="nav navbar-nav">
                <li class="active"><a href="#packt1">Packt Information</a></li>
                <li><a href="#packt2">Ordering information</a></li>
                <li><a href="#packt3">Terms and Conditions</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blogs and Primers<b class="caret"></b></a>
                    <ul >
                        <li><a href="#packtsub1">Blog</a></li>
                        <li><a href="#packtsub2">Tech Hub</a></li>
                        <li><a href="#packtsub3">Articles</a></li>
                    </ul>
                </li>
                
            </ul>
    </div>
       </nav>

Following that, we create a div class and assign it the .scroll-area class and use data attributes such as adding data-spy="scroll" to enable the ScrollSpy behavior in addition to using data-target="#myNavbar" to select the navbar.

In the following code, the content in the paragraph is huge, so we will just refer to it as some text. However, you can refer to the entire content of the paragraph from the code bundle.

The code will look like this:

<div  data-spy="scroll" data-target="#myNavbar" data-offset="0">
        <h1 id="packt1"> Packt Info </h1>
        <p> ...Some text here... </p>
        
        <hr>
        <h1 id="packt2"> How Pre-Orders Work </h1>
        <p> ... Some text here... </p>
        <hr>
        <h1 id="packt3"> Packt's Terms and Conditions</h1>
        <p> ...Some text here... </p>
        <hr>
        <h1>Blogs and Primers: One stop Technical Hub </h1>
        <p> ... Some text here... </p>
        <h2 id="packtsub1">Golang Blog</h2>
        <p> ...Some text here... </p>
       
        <h2 id="packtsub2">Technical Hub for PhpStorm</h4>
        <p> ...Some text here... </p>
        <h2 >Article about Foundation</h2>
        <p> ...Some text here... </p>
        <hr>
        </div>

If you want to refer to the entire code, you need to refer to the ScrollSpy code in the code bundle. The output of the code will be as follows:

When you click on any item in the navbar, you will go to the respective paragraph as defined in the code; for example, if you choose any options in the drop-down menu under Blogs and Primers, it will scroll to that specific paragraph thereby enabling effective accessibility to your website users.

If you scroll down to Packt’s Terms and Conditions, you can see the following screen:

You can observe that when you scroll down to Packt’s Terms and Conditions, the Terms and Conditions item in the navigation bar gets highlighted. Thus, when you scroll to a specific paragraph, it will highlight the respective item that defines it.

Modals

A modal is a type of a dialog box that provides crucial information to your website users or educates the users prior to taking any decisive action on the website. A modal can be a confirmation, a warning, an informative dialog, or a dialog with a form that asks for some information from the user or something mundane, such as a login dialog for session timeout; for example, you are about to erase important data or click on a malicious link. The modal provides information that will help you decide whether you want to take a step forward in relation to an action.

Take a look at the following code so that you understand it better:

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 3 Modals </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#packtpub").modal('show');
  });
</script>
  <style>
      #packt { padding: 30px 30px 30px 30px; }
  </style>    
</head>
<body id="packt">
<div  class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h1 class="modal-title">Beware</h1>
            </div>
            <div class="modal-body">
                <p>The Site has been blocked due to malicious content</p>
                <p class="text-warning"><small> Proceed at your own risk</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Quit</button>
                <button type="button" >Proceed</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

The output of this code will be as follows:

As you can see from the preceding output, we created a modal that warns the user if they are about to access a malicious website or click on a malicious link.

From the preceding code, you can see that we used the .modal-dialog class, which will create a dialog box and the .modal-content class that will define the content in the dialog box. After that, we defined modal-header, modal-body, and modal-footer, where we have put the relevant content. We have also used contextual colors for the buttons to make it look genuine and apt for the purpose.

Carousels

A carousel is a presentation of content in a cyclic manner wherein the text and images are made visible or accessible in a slideshow format. In the following code example, we will use data attributes such as data-slide, data-interval, and data-ride to create the carousel functionality. The data-ride="carousel" attribute is used to mark a carousel as animation starting at page load. The data-slide attribute changes the position of the slide to the current position and is used to navigate to previous and next items. The data-slide-to attribute is used for a slide index for the carousel slides, thereby helping you create web pages consisting of image galleries. The data-interval attribute decides the time delay between the cycling of slides.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 3 Carousels </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">

.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.packt{
  padding: 30px 30px 30px 30px;
}
</style>
</head>
<body class="packt">
    <div  class="carousel slide" data-interval="500" data-ride="carousel">
      <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <img src="Packt1.png" alt="Packt">
                <div class="carousel-caption">
                  <h6><b>Packt: Always finding a way </b></h6>
                  </div>
            </div>
            <div class="item">
    <img src="Packt2.png" alt="PacktLib">
                  <div class="carousel-caption">
                  <h6><b>Packt: Always finding a way </b></h6>
                </div>
            </div>
            <div class="item">
    <img src="Packt3.png" alt="Packt">
                <div class="carousel-caption">
                 <h6><b>Packt: Always finding a way </b></h6>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span ></span>
        </a>
    </div>
</body>
</html>

The output of this code will display an image gallery with a carousel caption ( Packt: Always finding a way) as defined in the code:

By the use of Glyphicons, we also defined the symbols for the prev and next functionalities. Also, for the first image, we used the .active class alongside the .item class to set it as the first default slide that your website user will see on executing the preceding code.

Comments are closed.

loading...