Bootstrap

Bootstrap model with jquery ui dialog occur a max callstack size exceeded error

Open a jquery ui dialog from bootstrap modal. This occur a max call stack size exceeded error in console.

We can solve this error in two way in my knowledge.

1) set 'modal' property to false in jqueryui dialog.
e.g.

$( ".selector" ).dialog({
modal: false
});

2) Add the below line of code to your page

$.fn.modal.Constructor.prototype.enforceFocus = function (){};

Sticky Footer Template for Bootstrap

Sticky footer is a fixed-height footer to the bottom of the viewport in desktop browsers. The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

Sample code and demo is here

<!DOCTYPE html><html>    <head>        <title>Online HTML Editor - webspeckle.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>        <style>            html              {                 position: relative;                 min-height: 100%;             }             body             {                 margin-bottom: 60px;             }             .footer             {                 position: absolute;                 bottom: 0;                 width: 100%;                 height: 60px;                 background-color: #f5f5f5;                 padding:17px 0px 17px 0px;             }         </style>    </head>    <body>        <nav class="navbar navbar-default navbar-fixed-top">            <div class="container">                <div class="navbar-header">                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                        <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="">Project name</a>                </div><div id="navbar" class="collapse navbar-collapse">                    <ul class="nav navbar-nav"><li class="active"><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Contact</a></li></ul></div></div></nav><br>        <div class="container">            <div class="page-header">                <h1>Sticky Footer Template for Bootstrap</h1></div></div><footer class="footer">            <div class="container">                <p class="text-muted">Place sticky footer content here.</p></div></footer>    </body></html>

Demo

How to create a modal dialog in bootstrap?

Modal is basically a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin.

Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal dialog
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as i

Name	Type	Default	Description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
show	boolean	true	Shows the modal when initialized.
remote	path	false	This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself. If a remote URL is provided, content will be loaded one time via jQuery's `load` method and injected into the `.modal-content` div. If you're using the data-api, you may alternatively use the `href` attribute to specify the remote source. An example of this is shown below: `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

Final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Online HTML Editor - webspeckle.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>    <body>         <div class="container-fluid">            <h3>How to create a modal dialog in bootstrap?</h3><br/>            <!-- Large modal -->            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>             <!-- Modal -->            <div class="modal fade bs-example-modal-lg" id="myModal" role="dialog">                <div class="modal-dialog modal-lg">                     <!-- Modal content-->                    <div class="modal-content">                        <div class="modal-header">                            <button type="button" class="close" data-dismiss="modal">×</button>                            <h4 class="modal-title">Modal Header</h4></div><div class="modal-body">                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p></div><div class="modal-footer">                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                        </div></div></div></div><!-- Small modal -->            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>             <div class="modal fade bs-example-modal-sm" id="myModal" role="dialog">                <div class="modal-dialog modal-sm">                     <!-- Modal content-->                    <div class="modal-content">                        <div class="modal-header">                            <button type="button" class="close" data-dismiss="modal">×</button>                            <h4 class="modal-title">Modal Header</h4></div><div class="modal-body">                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p></div><div class="modal-footer">                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                        </div></div></div></div><br/><br/>You can only see the difference in large screen         </div></body></html>

Demo

How to add required indication(*) in bootstrap form?

You can easily add asterisk (*) to the required field in bootstrap form fields. Add the below CSS to your page.

CSS:

.form-group.required .control-label:after
{
content:"*";
color:red;
}

Then add an additional 'required' class to the 'form-group' class.

<form>
<div class="form-group required">
<label class="control-label">Username</label>
<input type="text" name="userName"/>
</div>
</form>

final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Online HTML Editor - webspeckle.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <style>            .form-group.required .control-label:after              {                 content:"*";                 color:red;             }         </style>    </head>    <body>         <div class="container-fluid">            <h3>How to add required indication(*) in bootstrap form?</h3><br/>            <form class="form-horizontal">                <div class="form-group required">                    <label class="control-label col-sm-2" for="email">Email</label>                    <div class="col-sm-10">                        <input type="email" class="form-control" id="email" placeholder="Enter email">                    </div></div><div class="form-group required">                    <label class="control-label col-sm-2" for="pwd">Password</label>                    <div class="col-sm-10">                        <input type="password" class="form-control" id="pwd" placeholder="Enter password">                    </div></div><div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <div class="checkbox">                            <label><input type="checkbox"> Remember me</label>                        </div></div></div><div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <button type="submit" class="btn btn-default">Submit</button>                    </div></div></form></div></body></html>

Demo

How to create pagination in Bootstrap?

This jQuery plugin "twbsPagination()" simplifies the usage of Bootstrap Pagintion.

Plugin requires jQuery (required - 1.7.0 or higher).

You can use Bootstrap CSS styles and markup (or use your own).

More details available here

Add this lines in to your HTML code

<div class="well PageContent"></div>
<ul class="PaginationLinks pagination-sm"></ul>

Add this script in to your JavaScript section

$('.PaginationLinks').twbsPagination(
{
totalPages: 20,
visiblePages: 7,
onPageClick: function (event, PageNo) {
$('.PageContent').text('Page ' + PageNo);
}
});

Final code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$(document).ready(function () {     $('.PaginationLinks').twbsPagination(     {         totalPages: 20,         visiblePages: 7,         onPageClick: function (event, PageNo)         {             $('.PageContent').text('Page ' + PageNo);         }     }); }); </script>  </head><body>    <div class="container">        <h3>How to create pagination in Bootstrap?</h3><br/>        <div class="row">            <div class="col-md-12">                <div class="well PageContent"></div><ul class="PaginationLinks pagination-sm"></ul></div></div></div></body></html>

Demo

How to show bootstrap popover one at a time?

First you call the popover plugin with the selector

$('[data-toggle="popover"]').popover(options);

You must be set the "trigger" option to "manual" for showing one popover at a time.

$('[data-toggle="popover"]').popover({'trigger': 'manual'});

Then you should catch the click event. Show the current popover and hide others

$('[data-toggle="popover"]').on('click', function (e)
{
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});

The final code & demo is here

<!DOCTYPE html><!DOCTYPE html><html lang="en">    <head>        <title>How to show bootstrap popover one at a time</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>    <body>         <div class="container default-popover">            <h3>Popover example</h3><a href="#" data-toggle="popover" title="Header1" data-content="Some content inside the popover">Toggle popover1</a><br/>            <a href="#" data-toggle="popover" title="Header2" data-content="Some content inside the popover">Toggle popover2</a><br/>            <a href="#" data-toggle="popover" title="Header3" data-content="Some content inside the popover">Toggle popover3</a>        </div><div class="container modified-popover">            <h3>Popover One at a time</h3><a href="#" data-toggle="popover" title='Heading1 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover1</a><br/>            <a href="#" data-toggle="popover" title='Heading2 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover2</a><br/>            <a href="#" data-toggle="popover" title='Heading3 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover3</a>        </div><script>            $(document).ready(function ()              {                 $(".default-popover").find('[data-toggle="popover"]').popover();                 $(".modified-popover").find('[data-toggle="popover"]').on('click', function (e)                 {                     $(this).popover('show');                     $(".modified-popover").find('[data-toggle="popover"]').not(this).popover('hide');                 });                  $(".modified-popover").find('[data-toggle="popover"]').popover(                 {                     'placement': 'auto right',                     'container': 'body',                     'trigger': 'manual',                     html: true,                     content: "Some content inside the popover"                 });                                  $(document).on("click", ".popover .close", function ()                 {                     $(this).closest(".popover").popover("hide");                 });             });         </script>    </body></html>

Demo

Customize Blogger Contact Form

Customize blogger contact form, ie. change the default form to fully responsive contact form by using bootstrap. This tutorial helps you to customize all the elements in the contact form, such as input box, textarea, buttons, error and success messages.

Most of the tutorials doesn't touch the error and success message styling. But we will explain how to change the default style of the error and success messages.

Our contact form was created by using this method. Take a look at the following link

Demo

1: Include the bootstrap CDN

Go to Theme -> Edit Html -> paste the following code just before the </head> tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2: Add the default contact form through the Gadget.

3: Hide the default contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

div#ContactForm1
{
display:none;
}

4: Create a new page

Go to Pages -> New Page
Type the title like "Contact"
copy paste the follwing code to the new page

<div class="ContactForm"><br><div style='text-align: center; width: 100%' class="ContactFormMessages"><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div><form name='contact-form' class="form-horizontal"><div class="form-group"><label class="control-label col-sm-3">Name:</label><div class="col-sm-7"><input type="text" class="form-control" id='ContactForm1_contact-form-name' placeholder="Enter name..." name="name"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Email Address:</label><div class="col-sm-7"><input type="email" class="form-control" id='ContactForm1_contact-form-email' placeholder="Enter email address..." name="email"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Message:</label><div class="col-sm-7"><textarea class="form-control" id='ContactForm1_contact-form-email-message' rows="5" name='email-message' placeholder="Enter message..."></textarea></div></div><div class="form-group"><div class="col-sm-offset-3 col-sm-7"><button type="button" class="contact-form-button contact-form-button-submit" id='ContactForm1_contact-form-submit'>Send</button><button type='reset' class="contact-form-button contact-form-button-submit">Clear</button></div></div></form></div>

5: Add styling to the contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

.ContactForm .contact-form-button.contact-form-button-submit { margin:0px; padding: 3px 15px 3px 15px; height:auto; } .ContactForm .ContactFormMessages p { font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; box-shadow:none; } .ContactForm .ContactFormMessages p.contact-form-success-message-with-border { color:#005200; border:1px solid #81e181; background-color: #e2f4c6; padding:10px; } .ContactForm .ContactFormMessages p.contact-form-error-message-with-border { color: #dd0000; border:1px solid #e8b7b7; background-color: #fff1f1; padding:10px; } div#ContactForm1 { display:none; } .FollowByEmail .follow-by-email-inner .follow-by-email-address { height:30px; }

Done!

Bootstrap

Bootstrap model with jquery ui dialog occur a max callstack size exceeded error

Sticky Footer Template for Bootstrap

How to create a modal dialog in bootstrap?

Via data attributes

Via JavaScript

Options

How to add required indication(*) in bootstrap form?

How to create pagination in Bootstrap?

How to show bootstrap popover one at a time?

Customize Blogger Contact Form

1: Include the bootstrap CDN

2: Add the default contact form through the Gadget.

3: Hide the default contact form

4: Create a new page

5: Add styling to the contact form

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form