Javascript

Bootstrap Tabs with Dynamic Content Loading by Eric on February 1, 2020

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I'm going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div...

Just wanted to write down a quick little JavaScript clock I made that converts to the user's time zone.  Since we have offices all over the world and the date time fields keep track of time in UTC it is important for users to know what time zone they are currently logged into.  I have placed this clock in the navbar at the top of the page next to the user to let them know what the current time is for their settings.  If they need to change it they can do so by clicking on it and changing their user profile.  Here is the code and feel free to fork this project at GitHub.$(document).ready(function() { //Get user office for UTC offset var office = $("[name='office']").val(); startTime(office); }); function startTime(office){ //Extra functionality for Date to calculate DST Date.prototype.stdTimezoneOffset = function() { var jan = new Date(this.getFullYear(), 0, 1); var jul = new Date(this.getFullYear(), 6, 1); return Math.max(jan.getTimezoneOffs...

Bootstrap ScrollSpy Pitfalls and Fixes by Eric on February 1, 2020

![](/img/menu-title-300x221.png) Designing our new internal marketing tools has been a pet project of mine for a couple of weeks now.  I spend a little time here and there adding information and tools for our employees to better understand our relationship with our clients.  I'm displaying basic contact information, some information on the kind of business we do with them, a log of notes we take, past business, and company information.  All of that equates to a rather long page of information.  All of the information is relevant and displayed in an attractive compact manner the problem is it is just so much information that it can be overwhelming.  I showed it to a coworker and he wanted tabs to flip between the various bits of information because he found it overwhelming.  I didn't want to go to tabs because of the increased difficulty that would be added when they wanted to print off the marketing information and I didn't feel that tabs were the right way to go here.  With that i...

Bootstrap 3 RC1 by Eric on February 1, 2020

Creating our new site required a better base.  We chose to use the popular Bootstrap CSS engine to unify our CSS and help us get things started quickly.  After using Bootstrap 2.3.2 for nearly three months Bootstrap 3 was released.  We had hoped that the update would not affect our code base but we were wrong.  Nearly everything has changed in our styling.  Bootstrap 3 has gone for a mobile-first approach making even the basic framework responsive.  This is great for most developers, and even for us, because we can make wonderful sites that look and feel great on all platforms.  Our company had talked about wanting mobile versions of applications but we had put that on the back burner as many of our applications involve data entry.  Converting our project to use Bootstrap 3 has been a headache due to changes to simple classes that were used before but we are moving forward and should have things squared away by tomorrow.  The site looks cleaner, runs faster, and works on mobile alre...