JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy

Bootstrap Collapse Plugin

July 29, 2014 by Krishna Srinivasan Leave a Comment

In general term, the word collapse is a view of hierarchy so that only the roots of each branch are visible. It is widely used to manage large content and navigation lists on the website. We can easily create collapsing division within a webpage which is used to build accordion navigation, content boxes etc.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following examples demonstrate use of different techniques used for implementing the collapse plugin in Bootstrap. If you have any questions about bootstrap collapse plugin, please write it in the comments section.

Bootstrap Collapsible Accordion

The following example explains how to create collapsible accordion by using the .collapse class. The content can be shown by using the .collapse.in class. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-one">HTML</a>
</h4>
</div>
<div id="collapse-one" class="panel-collapse collapse in">
<div class="panel-body">
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-two">JavaScript</a>
</h4>
</div>
<div id="collapse-two" class="panel-collapse collapse">
<div class="panel-body">
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-three">CSS</a>
</h4>
</div>
<div id="collapse-three" class="panel-collapse collapse">
<div class="panel-body">
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Collapsible Accordion Example

Bootstrap Collapsible Accordion Example

Bootstrap Collapsible Accordion via Data Attributes

The Bootstrap enables to expand and collapse specific element by using some data attributes in the collapse plugin. We can add data-toggle to a controller element such as button or an anchor on which we click to expand or collapse the component. The data target attribute is added to the parent component which accepts id or class selector whose value is id of the child component. To create accordion-like group, use the data attribute data-parent=”#selector” and the value of the data parent attribute is same as the value of the main container div. We can also keep element open by using the additional class“in”.
The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
p{
border: 2px solid orange;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion via Data Attributes</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Collapsible Accordion via Data Attributes Example

Bootstrap Collapsible Accordion via Data Attributes Example

Bootstrap Collapsible Accordion via JavaScript

We can expand and collapse the element by using Bootstrap’s collapse() method with id or class selector in the JavaScript code as shown in the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#demo-toggle").collapse(‘toggle’);
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion via JavaScript</h2>
<button type="button" class="btn btn-success">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Collapsible Accordion via JavaScript Example

Bootstrap Collapsible Accordion via JavaScript Example

Bootstrap Collapse Options

There are certain options which can be used with Bootstrap collapse plugin as shown the below table:

Name Type Default Value Description
parent selector false If the value is selector, all the elements under the specified parent will be closed.
toggle boolean true It triggers when all collapsible elements are toggled.

Bootstrap Collapse Methods

There are some methods which are used with Bootstrap’s collapse class as shown in the below table:

Method Description
.collapse(options) It activates content as collapsible element.
.collapse(‘toggle’)</ It toggles collapsible element which is either shown or hidden.
.collapse(‘show’)</ It is used to show collapsible element.
.collapse(‘hide’)</ It is used to hide collapsible element.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-false").click(function(){
$("#demo-example").collapse({
toggle:false
});
});
$("#demo-show").click(function(){
$("#demo-example").collapse(‘show’);
});
$("#demo-hide").click(function(){
$("#demo-example").collapse(‘hide’);
});
$("#demo-toggle").click(function(){
$("#demo-example").collapse(‘toggle’);
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion using Methods</h2>
<button type="button" class="btn btn-success" id="toggle-false">Button False</button>
<button type="button" class="btn btn-success" id="demo-show">Show Button</button>
<button type="button" class="btn btn-success" id="demo-hide">Hide Button</button>
<button type="button" class="btn btn-success" id="demo-toggle">Toggle Button</button>
<div id="demo-example">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Collapsible Accordion using Methods Example

Bootstrap Collapsible Accordion using Methods Example

Bootstrap Collapse Events

There are some events which are used with Bootstrap’s collapse plugin as shown in the below table:

Event Description
show.bs.collapse It is used when the show instance method is invoked.
shown.bs.collapse It triggers when collapse element has been made visible to the user.
hide.bs.collapse It is used when the hide instance method has been called.
hidden.bs.collapse It triggers when the collapse element is hidden from the user.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(‘#demo-toggle’).on(‘hidden.bs.collapse’, function(){
alert("The collapsed element has been hidden!!!");
});
});
</script>
<style>
p{
border: 2px solid red;
margin:10px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>Collapsible Accordion using Events</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo-toggle">Click to expand and collapse</button>
<div id="demo-toggle" class="collapse in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text, HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Collapsible Accordion using Events Example

Bootstrap Collapsible Accordion using Events Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Affix Plugin

July 29, 2014 by Krishna Srinivasan Leave a Comment

The Bootstrap affix is a navigation attached to the content on the same webpage. By using this plugin, we can create fixed positioned element and toggles it’s pinning on and off. It can be used to jump to a certain section in the document and it will reflect which part of the content the user is looking at. We can use affix plugin for a large amount of data and scrollbar is part of the data which displays the page.

The affix plugin toggles between following three classes:

  • .affix-top
  • .affix
  • .affix-bottom

also read:

  • Bootstrap Setup
  • Bootstrap Typography
  1. The .affix-top class indicates the element in its top most position and no CSS positioning is required.
  2. The .affix class sets position fixed which affix the toolbar aside the element.
  3. The .affix-bottom class indicates the element in its bottom most position and CSS positioning fixed is used.
  4. The appropriate top or bottom property is required to specify position of affix element on the viewport.

The following examples demonstrate use of different techniques used for implementing the affix in Bootstrap. If you have any questions about bootstrap affix plugin, please write it in the comments section.

Bootstrap Affix via Data Attributes

We can easily create affix behavior to any element by just adding data-affix=”affix” to the element which is to be spied upon. The data-offset attributes specify how many pixels that it must scroll in order to toggle the position of an element. We use the attributes top and bottom for the pinned element to sets its position in the viewport. When the affix class is active the position is set to fixed.
The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Enable Affix via Data Attributes</h2>
<div class="well well-lg">
<h2>Bootstrap Affix Plugin Demo</h2>
</div>
<div id="my-demo" data-spy="affix" data-offset-top="60"
data-offset-bottom="200">
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked affix" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">JavaScript</a></li>
<li><a href="#myval2">JQuery</a></li>
</ul>
</div>
<div class="col-md-9">
<h2 id="myval">HTML</h2>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>

<h2 id="myval1">JavaScript</h2>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<h2 id="myval2">JQuery</h2>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Affix via Data Attributes Example

Bootstrap Affix via Data Attributes Example

Bootstrap Affix via JavaScript

We can enable affix plugin manually by using affix() method along with id or class selector in the javascript code as shown the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#myval").affix({
offset:{
top:100
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Enable Affix via JavaScript</h2>
<div class="well well-lg">
<h2>Bootstrap Affix Plugin Demo</h2>
</div>
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked affix" id="myval">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">JavaScript</a></li>
<li><a href="#myval2">JQuery</a></li>
</ul>
</div>
<div class="col-md-9">
<h2 id="myval">HTML</h2>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<h2 id="myval1">JavaScript</h2>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<h2 id="myval2">JQuery</h2>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

The above example is similar to previous example, but only small difference is that, here we are using javascript code instead of data attributes. The code uses affix() method which in turn uses offset attribute to specify how many pixels that it must scroll in order to toggle the position of an element.

  • Run Bootstrap Affix via JavaScript Example

Bootstrap Affix via JavaScript Example

Bootstrap Affix Options

There are certain options which can be used with Bootstrap affix plugin as shown the below table:

Name Type Default Value Description
offset number |
function |
object
10 It calculate the position of scroll when it specify the number of pixels to offset. If there is a single number, then it will be applied to both top and bottom. We provide an object offset like offset: {top:100, bottom:150}.
target selector |
node |
jQuery element
the window object It defines target element of the affix.

Bootstrap Affix Events

There are some event s which are used with Bootstrap’s affix class as shown in the below table:

Event Description
affix.bs.affix It triggers before the element has been affixed.
affixed.bs.affix It triggers after the element has been affixed.
affix-top.bs.affix It triggers before the element has been affixed to top.
affixed.bs.affix It triggers after the element has been affixed to top.
affix-bottom.bs.affix It triggers before the element has been affixed to bottom.
affixed-bottom.bs.affix It triggers after the element has been affixed to bottom.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#myval").affix({
offset:{
top:100
}
});
$("#myval").on(‘affix-top.bs.affix’,function(){
alert("The navigation has been affixed…doesn’t scroll with page!!!");
});
});
</script>
</head>
<body>
<div class="container">
<h2>Enable Affix via JavaScript</h2>
<div class="well well-lg">
<h2>Bootstrap Affix Plugin Demo</h2>
</div>
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked affix" id="myval">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">JavaScript</a></li>
<li><a href="#myval2">JQuery</a></li>
</ul>
</div>
<div class="col-md-9">
<h2 id="myval">HTML</h2>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<h2 id="myval1">JavaScript</h2>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<h2 id="myval2">JQuery</h2>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

The above script uses affix-top.bs.affix event which fires before the element has been affixed to top. It means that, when we scroll the page from bottom to top, it displays the alert message when it reaches the top with specified message as shown in the code.

  • Run Bootstrap Affix using Events Example

Bootstrap Affix using Events Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Button Plugin

July 29, 2014 by Krishna Srinivasan Leave a Comment

The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The buttons are used for various purposes such as submit button, reset button etc on a web page. It is often used with form element, can be also used as standalone control. The Bootstrap allows enhancing functionality of button. We can create group of buttons or button states for components like toolbars.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following examples demonstrate use of different techniques used for implementing the buttons in Bootstrap. If you have any questions about bootstrap button plugin, please write it in the comments section.

Bootstrap Stateful Button

We can set normal state of a button to a loading state by using the value of data-loading-text attribute. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Stateful Button</h2>
<button type="button" class="btn btn-warning" data-loading-text="Loading…">Load Data</button>
</div>
</body>
</html>
[/code]

As shown in the above script, we have used attribute called data-loading-text=”Loading…” to load the data on the webpage. When we click on the button, the click method occurs and it starts loading the data by showing the text “Loading…” . When it reaches to the 1000ms, it resets the button.

  • Run Bootstrap Stateful Button Example

Bootstrap Stateful Button Example

Bootstrap Single Toggle Button

We can create single toggling on the button, by simple using data-toggle=”button” attribute which activates toggling from normal state to push state and vice versa. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Single Toggle Button</h2><br>
<button type="button" class="btn btn-info" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-success" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-warning" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-danger" data-toggle="button">Toggle Button</button>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Single Toggle Button Example

Bootstrap Single Toggle Button Example

Bootstrap Buttons Checkbox

The checkboxes are alternatively referred to as selection boxes, which are commonly used when more than one option may need to be selected. We can create group of checkboxes, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Checkbox</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox">Checkbox-One
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Two
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Three
</label>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Button Checkbox Example

Bootstrap Button Checkbox Example

Bootstrap Buttons Radio

A radio button is a round circle represents choices in a common option list which are used when only one option is selectable. We can create group of radio inputs, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Radio</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption1">Radio-One
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption2">Radio-Two
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption3">Radio-Three
</label>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Button Radio Example

Bootstrap Button Radio Example

Bootstrap Buttons via JavaScript

It’s possible to enable the buttons by using the JavaScript method $(selector).button() . The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).button(‘loading’).delay(500).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Buttons via JavaScript</h2><br>
<div class="tabbale">
<ul class="nav nav-tabs">
<li class="active"><a href="#mydiv" data-toggle="tab" data-loading-text="Loading…">Tab 1</a></li>
<li><a href="#mydiv1" data-toggle="tab" data-loading-text="Loading…">Tab 2</a></li>
<li><a href="#mydiv2" data-toggle="tab" data-loading-text="Loading…">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="mydiv" class="tab-pane active fade in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
<div id="mydiv1" class="tab-pane fade">
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="mydiv2" class="tab-pane fade">
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Button via JavaScript Example

Bootstrap Button via JavaScript Example

Bootstrap Buttons Methods

Following table shows Bootstrap’s button methods:

Method Description
$().button(‘toggle’) It toggles push state of the button which makes the button appear like it has been activated.
$().button(‘loading’) It sets button state to loading. i.e. when loading, the button is disabled and swaps the text to loading text.
$().button(‘reset’) It resets the button state and swaps text to original text.
$().button(string) It resets the button state by swapping text to any data defined text state.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#toggle-demo .btn").click(function(){
$(this).button(‘toggle’);
});
});
$(function() {
$("#load-demo .btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
});
});
});
$(function() {
$("#reset-demo .btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
$(this).button(‘reset’);
});
});
});
$(function() {
$("#string-demo").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
$(this).button(‘complete’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>$().button(‘toggle’)Method</h4>
<div id="toggle-demo">
<button type="button" class="btn btn-warning">Primary</button>
</div><br>
<h4>$().button(‘loading’)Method</h4>
<div id="load-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data…">Primary
</button>
</div><br>
<h4>$().button(‘reset’)Method</h4>
<div id="reset-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data…">Primary
</button>
</div><br>
<h4>$().button(string)Method</h4>
<button type="button" class="btn btn-warning" id="string-demo"
data-complete-text="Loading completed">Click Me
</button>
</div>
</body>
</html>
[/code]

The above script defines button methods which are specified in the above table. The first method, button(‘toggle’) which gives the button the appearance that it has been activated. It uses toggle-demo id to change its state when we click on the button. The second method, .button(‘loading’) sets the button state to loading. It uses load-demo id which swaps the button text to loading text when button is clicked. The third method, .button(‘reset’) resets button state by swapping text to original text and uses reset-demo id to resets the button. The last method, .button(string) swaps the text with the string specified by the user by using the string-demo id.

  • Run Bootstrap Button Methods Example

Bootstrap Button Methods Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Scrollspy Plugin

July 26, 2014 by Krishna Srinivasan Leave a Comment

The scrollspy is a navigation mechanism which checks scrollable area on webpage and activates a link to inform where the scrollbar is situated in a list. It automatically update targets on navigation bar based on scroll position. If we have different sections of a page which contain large amount of data, then we can use links to jump to a specific section in the scrollable area. It specifies the visitors, on which page they are currently.

It works in two directions: one is, navigates to an item and second, shows the displayed item in the scrollable area in the navigation list. The advantage of using this plugin is, we can save the time and content can be accessible more easily to the users.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following examples demonstrate use of different techniques used for implementing the scrollspy in Bootstrap. If you have any questions about bootstrap scrollspy plugin, please write it in the comments section.

Bootstrap Scrollspy via Data Attributes

We can easily create scrollspy behavior to navigation by using data-spy=”scroll” in the target division in which element is to be spied. We use the attribute, data-target to link to the navigation ID which uses the ID or class of the parent element within the .nav component.
The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ScrollSpy via Data Attributes</h2>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<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="#">Programming Tutorial</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#myval">HTML</a></li>
<li><a href="#myval1">CSS</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle"
data-toggle="dropdown">JS Frameworks<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#myval2" tabindex="-1">JavaScript</a></li>
<li><a href="#myval3" tabindex="-1">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="myval">HTML</h4>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </p>
<h4 id="myval1">CSS</h4>
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
<h4 id="myval2">JavaScript</h4>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </p>
<h4 id="myval3">JQuery</h4>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Scrollspy via Data Attributes Example

Bootstrap Scrollspy via Data Attributes Example

Bootstrap Scrollspy via JavaScript

We can also invoke scrollspy manually by using the scrollspy()method.Use id or class selector of the nav bar in the JavaScript code.

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#My-Demo").scrollspy();
});
</script>
</style>
<body>
<div class="container">
<h2>ScrollSpy via JavaScript</h2>
<nav id="#My-Demo" class="navbar navbar-default" role="navigation">
<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="#">Programming Tutorial</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">CSS</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#myval2" tabindex="-1">JavaScript</a></li>
<li><a href="#myval3" tabindex="-1">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#My-Demo" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="myval">HTML</h4>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
<h4 id="myval1">CSS</h4>
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>

<h4 id="myval2">JavaScript</h4>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
<h4 id="myval3">JQuery</h4>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Scrollspy via JavaScript Example

Bootstrap Scrollspy via JavaScript Example

Bootstrap Scrollspy Options

There are certain options which are passed to scrollspy() method via data attributes or JavaScript, which customize the functionality of a scrollspy.

Option Type Default Value Description
offset number 10 It determines number of pixels to offset from the top when calculating position of scroll.

Bootstrap Scrollspy Methods

When we want to add or remove the elements from the DOM, we need to call the refresh method as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
removeSection=function(e){
$(e).parents(".section").remove();
$(‘[data-spy="scroll"]’).each(function(){
var $spy=$(this).scrollspy(‘refresh’)
});
}
$("#my-demo").scrollspy();
});
</script>
</head>
<body>
<div class="container">
<h2>ScrollSpy using Methods</h2>
<nav id="my-demo" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<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="#">Programming Tutorial</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">CSS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">JS Frameworks<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#myval2" tabindex="-1">JavaScript</a></li>
<li><a href="#myval3" tabindex="-1">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#my-demo" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 id="myval">HTML<small><a href="#" onclick="removeSection(this);">
&times; Remove this section</a></small></h4>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
</div>

<h4 id="myval1">CSS</h4>
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</p>
<div class="section">
<h4 id="myval2">JavaScript<small><a href="#" onclick="removeSection(this);">
&times; Remove this section</a></small></h4>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<h4 id="myval3">JQuery</h4>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Scrollspy using Methods Example

Bootstrap Scrollspy using Methods Example

Bootstrap Scrollspy Events

Bootstrap provides following event customize the functionality of a scrollspy:

Event Description
activate.bs.scrollspy It triggers whenever an item gets activated with the scrollspy.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
removeSection=function(e){
$(e).parents(".section").remove();
$(‘[data-spy="scroll"]’).each(function(){
var $spy=$(this).scrollspy(‘refresh’)
});
}
$("#my-demo").scrollspy();
$("#my-demo").on(‘activate.bs.scrollspy’,function(){
var currentSection=$(".nav li.active > a").text();
$("#activeItem").html("You are viewing: "+currentSection);
})
});
</script>
</head>
<body>
<div class="container">
<h2>ScrollSpy using Events</h2>
<nav id="my-demo" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<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="#">Programming Tutorial</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#myval">HTML</a></li>
<li><a href="#myval1">CSS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">JS Frameworks<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#myval2" tabindex="-1">JavaScript</a></li>
<li><a href="#myval3" tabindex="-1">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#my-demo" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 id="myval">HTML<small><a href="#" onclick="removeSection(this);">
&times; Remove this section</a></small></h4>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
HTML documents contain HTML tags and plain textHTML documents are also called web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</p>
</div>
<h4 id="myval1">CSS</h4>
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</p>
<div class="section">
<h4 id="myval2">JavaScript<small><a href="#" onclick="removeSection(this);">
&times; Remove this section</a></small></h4>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.
All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<h4 id="myval3">JQuery</h4>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
</p>
</div>
<hr>
<h4 id="activeItem" class="text-info"></h4>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Scrollspy using Events Example

Bootstrap Scrollspy using Events Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Tab Plugin

July 22, 2014 by Krishna Srinivasan Leave a Comment

This tutorial highlights the use of Bootstrap tab plugin for the navigation. In general, the term tab allows for the user to access different parts of the menu or webpage. We can create dynamic tabs by clicking on tabbable areas or navigation panes to navigate to contents on the webpage. The most often used navigation is tab based navigation which contains large amount of data within small area separating content into different navigation panes where each pane can be view able one at a time.

The tab plugin provided by Bootstrap can be used to access content in tabs or pills or even through dropdown menu. For more information about tab based navigation, just refer this link: Bootstrap Navigation Elements.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

We can create tabbable tabs by using following two ways:

  • Via Data Attributes
  • Via JavaScript

Bootstrap Tabs via Data Attributes

We can create tab component by using data-toggle=”tab” on each tab within an anchor tab. We are using the tab-content class as the parent element and tab-pane class to create tabs via data attributes. We are creating tab-pane for every tab with unique ID and wrapping them within tab-content class. While switching from one tab to another tab, to get fade effect for tabs, add the .fade class to each .tab-pane class.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tab Navigation via Data Attributes</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
<li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="mydropdown1" class="tab-pane fade in active">
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" class="tab-pane fade">
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Tabs via DataAttributes Example

Bootstrap Tabs via DataAttributes Example

Bootstrap Tabs via JavaScript

We create tab navigation by using JavaScript code as shown the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoTab a").click(function(e){
e.preventDefault();
$(this).tab(‘show’);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation via JavaScript</h2>
<ul class="nav nav-tabs" id="DemoTab">
<li><a href="#mydropdown1">HTML</a></li>
<li class="active"><a href="#mydropdown2">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1">JavaScript</a></li>
<li><a href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="mydropdown1" class="tab-pane fade">
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" class="tab-pane fade in active">
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Tabs via JavaScript Example

Bootstrap Tabs via JavaScript Example

Bootstrap Tab Methods

It’s possible to enable the tab element and view content of the particular tab by using method called $().tab. For targeting specific container, we should have either data-target or a href in the DOM. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoTab li:eq(1) a").tab(‘show’);
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation using Method</h2>
<ul class="nav nav-tabs" id="DemoTab">
<li><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">JavaScript</a></li>
<li><a href="#dropdown2" data-toggle="tab">JQuery</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="mydropdown1" class="tab-pane fade">
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" class="tab-pane fade in active">
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Tab Method Example

Bootstrap Tab Events Example

Bootstrap Tab Events

The following table shows four events which are used with tab to provide more functionality to the tab.

Event Type Description
show.bs.tab It is used before the new tab has been shown.
shown.bs.tab It triggers after the tab has been shown.

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(‘a[data-toggle="tab"]’).on(‘shown.bs.tab’,function(e){
var activeTab=$(e.target).text();
var previousTab=$(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation using Events</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
<li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
<li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="mydropdown1" class="tab-pane fade in active">
<h3>HTML</h3>
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
</div>
<div id="mydropdown2" class="tab-pane fade">
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>JavaScript</h3>
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>JQuery</h3>
<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
</div>
</div>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Tab Events Example

Bootstrap Tab Events Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Modals

July 19, 2014 by Krishna Srinivasan Leave a Comment

Bootstrap Modals are basically dialog box which are created using custom jQuery plugin. Modals are streamlined, dialog prompts which will have content from an outside source to indicate important information to the user to take necessary actions before moving on. A modal is often called as child window which is used as a window to display slideshows, user login, advertising etc without leaving the parent window. Modals are widely used to warn users for situations like confirmation before going to perform any actions such as saving or deleting important data.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

We can create flexible dialog boxes easily with Bootstrap by using the .modal class along with div element. The below example shows how to use Bootstrap Modals in our webpage. If you have any questions about bootstrap modals, please write it in the comments section.

Bootstrap Static Modal

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Static Modal</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#DemoModal">Click to Launch Demo Modal</button>
<div class="modal fade" id="DemoModal">
<div class="modal-dailog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

As shown in the above script, we have used two classes. First is .modal which defines div element as modal. Second is .fade which causes the content to fade in and fade out when modal is toggled. We can see in the <button> tag, the data-target=”#DemoModal” to set target of the modal which we want to load on the webpage. The div element contains .modal-content class which indicates where to look for the contents of the model.

The .modal-header class, as the name implies, it defines title for the modal window and within this class, we are using data-dismiss=”modal” class is used to close the modal window. The .modal-body class indicates content for the modal which we want to display on the webpage such as video, an image or anything else. Lastly, we have the .modal-footer class which is by default right aligned and we could place action buttons such as save, close, yes, no, accept etc are associated with the action.

  • Run Bootstrap Static Modal Example

Bootstrap Static Modal Example1
Bootstrap Static Modal Example2

Bootstrap Modal Usage

We can toggle the modal plugin content by using data attributes and javascript method. The above example is written by using data attributes. Now we will see, how to activate Bootstrap modal window via JavaScript.

Modal via JavaScript

We can activate the Bootstrap modal by using JavaScript code as shown as shown in the below line:

[code lang=”xml”]
$(“#DemoModal”).modal(options)
[/code]

Here we have used option as show to show the modal when initialized. Just use id or class selector with the modal in the JavaScript code. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Example of Twitter 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal(‘show’);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal via JavaScript</h2>
<a href="#" class="btn btn-lg btn-primary">Click to Launch Demo Modal</a>
<div id="myModal" 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>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Modal via JavaScript Example

Bootstrap Modal via JavaScript Example

Bootstrap Modal Options

The following table shows options which can be used with modal window:

Option Type Value Default Value Description
backdrop boolean true It is used to include modal backdrop element i.e. black overlay area.
keyboard boolean true Modal window is closed when escape key is pressed.
show boolean true Modal window is showed when initialized.
remote URL false Content will be loaded by using jQuery’s load method and injected into modal content.

Bootstrap Modal Methods

Method Description Example
.modal(options) It activates the content as modal. $(‘#DemoModal’).modal({
Keyboard: false
})
.modal(‘toggle’) It toggles the modal window manually. $(‘#DemoModal’).modal(‘toggle’)
.modal(show) It is used to open modal window manually. >$(‘#DemoModal’).modal(‘show’)
.modal(‘hide’) It hides the modal manually. >$(‘#DemoModal’).modal(‘hide’)

The following example shows use of modal method called hide and option called show. When we run the script, we will get modal window immediately. After clicking on the specified button, the modal window will be hidden.

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#DemoModal").modal(‘show’);
$(‘.hide-modal’).click(function(){
$("#DemoModal").modal(‘hide’);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal via JavaScript</h2>
<a href="#" class="btn btn-lg btn-primary hide-modal">Click to Hide Demo Modal</a>
<div id="DemoModal" 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>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Modal Method Example

Bootstrap Modal Method Example

Bootstrap Modal Events

The following table shows four events which are used with modal.

Event Type Description
show.bs.modal It is used when the show instance method is invoked.
shown.bs.modal It triggers when modal has been made visible to the user.
hide.bs.modal It is used when the hide instance method has been called.
hidden.bs.modal It triggers when the modal is hidden from the user.

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Dropdown Plugin

July 19, 2014 by Krishna Srinivasan Leave a Comment

The Bootstrap drop down menu is sometimes referred to as pull down menu or drop down list which appears when clicking on a button or text selection which allows the user to choose a single value. A drop down list can be used to display large list of options where only one option is displayed initially, the remaining options will get display when user activates drop down box.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Using dropdown plugin, we can create dropdown menu to any components like navbars, tabs and pills as shown in the following examples:

Dropdown Menu within Navbar

We can create dropdown to navbar by using .navbar class within the nav element. The following example demonstrates how to add dropdown menu to navbar:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">Home</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Tutorials</a></li>
<li><a href="#">Java/J2EE</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">DOJO</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Navbar Dropdown Example

Bootstrap Navbar Dropdown Example

Dropdown Menu within Navpills

We can create pill based navigation with Bootstrap, by using the class .nav-pills. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Tutorials</a></li>
<li><a href="#">Java/J2EE</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">JS Frameworks<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">DOJO</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
</ul>
</body>
</html>
[/code]

  • Run Bootstrap Navpills Dropdown Example

Bootstrap Navpills Dropdown Example

Bootstrap Dropdown Usage

We can toggle the dropdown plugin hidden content by using data attributes and java script.

Via data Attributes

We can create dropdown menu by using data attribute by using data-toggle=”dropdown” to link or button as shown in the following simple snippet:

[code lang=”xml”]
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Trigger</a>
<ul class="dropdown-menu”>
…
</ul>
[/code]

If we want to keep URLs intact, then use the data-target attribute instead of href=”#”. The above examples navbar and navpills uses the data toggle attribute.

Via JavaScript

We can create manually dropdown menu via JavaScript by using the following line in the JavaScript code:

[code lang=”xml”]
$(".dropdown-toggle").dropdown();
[/code]

The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<div class="dropdown">
<a href="#" class="dropdown-toggle">Country List<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Dropdown using JavaScript Example

Bootstrap Dropdown using JavaScript Example

Bootstrap Dropdown Events

The following table shows four drop down events which are used based on the behavior of dropdown menu. All these events are used within the .dropdown-menu’s parent element.

Event Type Description
show.bs.dropdown It is used when the show instance method is invoked.
shown.bs.dropdown It triggers when dropdown has been made visible to the user.
hide.bs.dropdown It is used when the hide instance method has been called.
hidden.bs.dropdown It triggers when the dropdown is hidden from the user.

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Bootstrap Plugins

July 19, 2014 by Krishna Srinivasan Leave a Comment

Bootstrap provides bundle of plugins which specifies more functionality and adds more interaction to website by using Bootstrap’s individual *.js files or using bootstrap.js and minified bootstrap.min.js files at once. If we include individually then, we have to check for dependencies in the docs.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Bootstrap plugins includes following forms:

  • Using complied JavaScript: We can include plugins at once by using both bootstrap.js and bootstrap.min.js files or using individual file.
  • Component data attributes: Data attributes allows to store extra information on HTML elements. We cannot have data attributes from multiple plugins. To perform this, use wrapping element which specifies HTML structure around each element.
  • Plugin dependencies: The dependencies page shows the dependencies that plugins has on other plugins. If we include individually then, we have to check for dependencies in the docs.

Data Attributes

We access the Bootstrap plugins by using Data API without including a single line of JavaScript to use plugin features. Data attribute is the first consideration when using the program. Sometimes we need to turn the Data API functionality off. To unbind this functionality, we use the following line:

[code lang=”xml”]
$(document).off(‘.data-api’)
[/code]

If we want to turn off the particular plugin, just write the name of the plugin along with the data-api namespace as shown in the following line:

[code lang=”xml”]
$(document).off(‘alert.data-api’)
[/code]

Programmatic API

We can use Bootstrap plugins by using JavaScript API’s which are single, chainable methods and return the collection acted upon. For example:

[code lang=”xml”]
$(“.btn-danger”).button(“toggle”).addClass(“fat”)
[/code]

All methods accept options object, string or nothing which has default behavior as shown below:

[code lang=”xml”]
$(“#myModel”).modal(); //initializes with defaults
$(“#myModel”).modal({keyboard: false}); //initialized with no keyboard
$(“#myModel”).modal(‘show’); //initializes and invokes show immediately
[/code]

No conflict

Sometimes we use Bootstrap plugins with other UI frameworks. So there may be chances of collision between plugins and UI frameworks. To prevent this collision, we use .noConflict class on the plugin.

[code lang=”xml”]
var bootstrapButton=$.fn.button.noConflict() //return $ fn.button to previously assigned value
$.fn.bootstrapBtn=bootstrapButton //give $().bootstrapBtn the Bootstrap functionality
[/code]

Events

Bootstrap provides custom events for most of the plugins by using two forms:

  • infinitive form: It is used when event begins. It specifies preventDefault functionality which could stop the execution of action before it starts.

[code lang=”xml”]
$(‘#myModel’).on(‘show.bs.modal’,function(e){
If(!data)return e.preventDefault() //
})
[/code]

  • past participle form: This form executes after the completion of an action. As in the above script, show is the infinitive form which triggers at the start of event and shown triggers on the completion of an action.

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved