Category : Bootstrap

Adding tabbed panels to Bootstrap – No jQuery

A great little piece of functionality built into Bootstrap is the ability to clear up some screen space using panels cascaded behind each other in tabs.  The best part is, it’s super easy to implement.

Here’s the code:

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="tab1">
        <h1>Tab 1</h1>
    </div>
    <div class="tab-pane" id="tab2">
        <h1>Tab 2</h1>
    </div>
    <div class="tab-pane" id="tab3">
        <h1>Tab 3</h1>
    </div>
    <div class="tab-pane" id="tab4">
        <h1>Tab 4</h1>
    </div>
    <div class="tab-pane" id="tab5">
        <h1>Tab 5</h1>
    </div>
</div>

The above code will leave you something looking like this:

bootstrap-tab-loader

Feel free to use, copy and modify this code as you need to.

Share this post:
read more

Centre a form using Bootstrap 4 native controls

That pesky login form that simply refuses to be in the middle.  Not a problem, see the example below:

<div class="row h-75 justify-content-center align-items-center">
        <form>
            <div class="form-group">
                <label for="formGroupExampleInput">Example label</label>
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">Another label</label>
                <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
            </div>
        </form>
    </div>

The h-XXX after the row attribute is the height of the box.  A small number, a higher box.  If this number is set to 100, the form will be centred.

Share this post:
read more

Disable and enable buttons (Bootstrap) using a jQuery extension

A nice easy way to disable and re-enable buttons [etc] in Bootstrap with a little extension to the jQuery library.

Add this into the js file, either a custom.js or the main jQuery class file.  Custom being better so it doesn’t get overwriten in the future.

jQuery.fn.extend({
    disable: function (state) {
        return this.each(function () {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

Then use like this:

$("#button").disable(true);
$("#button").disable(false);

 

 

 

Share this post:
read more

Bootstrap modal background doesn’t disappear when modal closes

This can happen in certain circumstances for a lot of reasons.  If you need a quick and dirty hack to get everything shut down (modal wise) in full, you can use:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

It’s overkill, but effective.

Share this post:
read more

Disable a dynamically created Bootstrap button onClick

There might be times when you need to produce a dynamic list of things that you don’t want to happen twice, like updating the status of something, but in particular only wanting to act as a single use event on that line.  You can use jQuery to send a post request to perform the action, but it’s handy to be able to disable the button as well.  Doing so will guarantee the end user won’t be able to click again before the page/div/section refreshes,  even if you do update those above in the background.

If you have a button producing loop like this:

while([something happens to produce $row(for example)]){
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
}

Ignore the weird formatting on this thin blog page.

onClick calls a function and takes the ID value of the row to send to the said JavaScript method.  This, in turn, can then be used to disable (or anything else you need it to) the buttons on that line.  It’s quite generic actually and can be tailored for many different uses if you need it to do specific things to anything with the ID you are sending.

The JavaScript looks like this:

function buttonFunction(rowID) {
  $('#dynamicBtn'+rowID).prop("disabled", true);
  // Then do anything you need to do in the background if required
}

If the “do something in the background” is performing an AJAX request, you can make part of the “success” attribute re-enabling the button and giving an appropriate error message if something goes wrong.

You could also do this backwards and make disabling the button part of the AJAX success, but it leaves open the option of clicking several times if the request takes a few seconds to process.

It’s not good practice to be using jQuery lower than version 1.6 at the point of writing this, however, if you do, then switch out the newer “prop” method for “attr” to achieve the same thing.

Share this post:
read more

Really easy registration form with JavaScript validation for Bootstrap

Easy to use registration form with some validation.

This works for me and the site I am using it on, some styling/tweaking may be required for others.

The HTML:

<form action="" method="post" id="fileForm" role="form">
    <fieldset>
      <div class="form-group">
        <label for="email"><span class="req">* </span> Email Address: </label>
        <input class="form-control" required type="text" name="email" id="email" onchange="email_validate(this.value);" />
        <div class="status" id="status"></div>
      </div>

      <div class="form-group">
        <label for="username"><span class="req">* </span> User name:</label>
        <input class="form-control" type="text" name="username" id="txt" minlength="6" onkeyup="Validate(this.value)" placeholder="minimum 6 letters" required autocomplete="off" />
        <div id="errLast"></div>
      </div>

      <div class="form-group">
        <label for="password"><span class="req">* </span> Password: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" id="pass1" /> </p>

        <label for="password"><span class="req">* </span> Password Confirm: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" placeholder="Enter again to validate" id="pass2" onkeyup="checkPass(); return false;" />
        <span id="confirmMessage" class="confirmMessage"></span>
      </div>

      <div class="form-group">

        <input type="checkbox" required name="terms" onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions' : '');" id="field_terms">   <label for="terms">I agree with the <a href="terms.php" title="You may read our terms and conditions by clicking on this link">terms and conditions</a> for Registration.</label>
        <span class="req">* </span>
      </div>

      <div class="form-group">
        <input class="btn btn-success" type="submit" name="submit_reg" value="Register">
      </div>
    </fieldset>
  </form>
  <!-- ends register form -->

  <script type="text/javascript">
    document.getElementById("field_terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");
  </script>

The JavaScript:

function checkPass()
{
    
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
   
    var message = document.getElementById('confirmMessage');
    
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
} 
function validatephone(phone) 
{
    var maintainplus = '';
    var numval = phone.value
    if ( numval.charAt(0)=='+' )
    {
        maintainplus = '';
    }
    curphonevar = numval.replace(/[\A-Za-z!"£$%^&,*+_={};:'@#~,.Š/<>?|`¬][]/g,'');
    phone.value = maintainplus + curphonevar;
    maintainplus = '';
    phone.focus;
}

function Validate(txt) {
    txt.value = txt.value.replace(/[^a-zA-Z-'nr.]+/g, '');
}

function email_validate(email)
{
var regMail = /^([_a-zA-Z0-9-]+)(.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+.)+([a-zA-Z]{2,3})$/;

    if(regMail.test(email) === false)
    {
    document.getElementById("status").innerHTML    = "<span class='warning'>Please enter a valid email address.</span>";
    }
    else
    {
    document.getElementById("status").innerHTML	= "<span class='valid'>Email address valid</span>";	
    }
}

function dob_validate(dob)
{
var regDOB = /^(d{1,2})[-/](d{1,2})[-/](d{4})$/;

    if(regDOB.test(dob) === false)
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='warning'>DOB is only used to verify your age.</span>";
    }
    else
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='valid'>Thanks, you have entered a valid DOB!</span>";	
    }
}

function add_validate(address)
{
var regAdd = /^(?=.*d)[a-zA-Zsd/]+$/;
  
    if(regAdd.test(address) === false)
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='warning'>Address is not valid yet.</span>";
    }
    else
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='valid'>Thanks, Address looks valid!</span>";	
    }
}

 

Share this post:
read more

Send data to a Bootstrap modal

How to send data to a Bootstrap modal on ‘shown’.  Works with multiple data points.

<a data-toggle="modal" data-id="whateverDataYouArePassing" href="#idOfModal" class="classOfThetrigger btn btn-default">Full Info</a>

$(document).on("click", ".classOfTheTrigger", function () {
   var rowID = $(this).data('id');
   $("#nameOfModal").load("../something/in/here");  
});

 

Share this post:
read more

Toggle / open / close a Bootstrap modal with jQuery

Short and sweet, the jQuery for opening and closing Bootstrap modals.

$(function () {
   $('#modal').modal('toggle');
});

 

Share this post:
read more