javascript

All posts tagged javascript

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.

You’ll notice that there are two sections to the tabs. The first is the nav-bar ul. This is where you give each tab a title. You can even do drop downs here because they are normal Bootstrap nav items.  That’s all there is to the basic Bootstrap tabs.  They work wonders and you can see the live demo on their site here.

To make each tab load in data via AJAX you’ll need to tap into Bootstrap’s triggers.  Here’s what I did using the same example as above and the JQuery below.

The trigger is fired when the tab is changed and the e.target is the event target, or in our case the newly activated tab.  Since the tab’s href points to the id of the element we want to change data we can use that to point our data to when it comes.  I’ve added a check to make sure we are only making the AJAX call if that tab is empty to help on load times of large data sets but you can remove that if you’d like.

That’s all there is to it.  Nothing too difficult but useful when you need tabs and need to change that data without reloading the page.  Let me know how you are using tabs below in the comments.

menu-title

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 in mind I needed another solution for a large page of information that could be easily navigable…enter Bootstrap ScrollSpy.

Anyone who has looked at the Bootstrap documentation will immediately notice that has exactly the same problem I’m having; long page with lots of information.  On the left they have a static menu that follows you and highlights what section you are currently in.  Clicking on any one of those links will bring you to that portion of the page.  If it’s good enough for them it’s good enough for me so I set about recreating their side menu style.

ScrollSpy can be used with any .nav menu whether it is one your create with a ul or if it is the main nav-bar at the top of the screen.  ScrollSpy works by checking what element is currently at the top of the visible screen and adding making that nav element active.  This is great but there are a few quirks and tweeks that took me a while to figure out.

At the most basic level you want to add the HTML 5 data-spy attribute to your body because that is what we are going to spy on.  Here is the example code from Bootstrap’s documentation.

The data-target attribute needs to point to the parent element of your nav.  So if you have a nav-bar you’ll need to have an outer div or element with the id that you will use in your ScrollSpy.

Now all of your elements in your nav will need to have an href pointing to the id of the element you will be spying on.  These will need to be valid elements in your DOM.  If you are adding things dynamically and need to update your ScrollSpy use

That’s it for the simple example.  Set the data-spy and data-target on your body tag and you should be all set assuming your nav is set up properly.  One issue you may run into is not spying on the body.  When I originally started this I wasn’t spying on the body tag because I was loading in a template using Django’s block tags.  Granted it was within the body tag at one point but not specifically and I wanted to only watch my div.  ScrollSpy will only work correctly on non-body tag elements if they have a fixed height and a scroll bar.  If you do not have a scroll bar on the element you are spying on it will not work.  Your nav-bar will always have the last element as active.  To fix this just give the element you are spying on a fixed height and you should be good.  In my case instead of using the HTML 5 tags on the body I used JavaScript.  The body tag is used in every page and I didn’t want the ScrollSpy loaded on every single page.  In my JavaScript for my marketing page I have the line $("body").scrollspy({target: "#side-nav", offset:50});.  The offset tells ScrollSpy by how many pixels to offset the scroll before we are actually “in” the element.  I added some padding so when you see the header near the top we are now in the section.

To mimic the fixed sidebar used on the Bootstrap documentation use either the Affix JavaScript from Bootstrap or the affix class on your nav.  Below I have my full example and how it all works.

HTML

 JavaScript

I hide the side nav on smaller resolutions to give more screen real estate. The a tags have both a name and an id because the id is used by ScrollSpy and the name is used as a normal locator on a page.  Let me know what you think and if there are any questions or comments.

Bootstrap 3 RC1

Bootstrap 3

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 already.  All in all it has been for the best but the headache will continue probably through the rest of the week as we smash all the bugs related to their new JavaScript and CSS.

Let me know if you’re using it and what you think about the changes.

Simple JavaScript Clock with Time Zone Support

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.

Let’s break it down a bit.  At the beginning we get the user’s current office which is held in an input hidden in a modal on every page.  We then run the startTime function and begin our journey.  First we add a couple of features to the JavaScript Date to help us account for day light savings time in countries that follow that.  Then we figure out the time zone offset from UTC time depending on the office.  This offset is not including day light savings time which is what gets calculated next.  We get the current date by calling new Date().  This gets the system time which we use to see if it is day light savings time.  Day light savings time is not followed in China and so the check for office number is there to not do the calculation for China and Taiwan.  We then convert the current time to UTC and add the offset to the hours.

At this point we just need to output our result to be displayed.  The checkTime function is called to add a zero in front of numbers less than 10.  Then we get AM/PM and calculate for a 12 hour clock.  Modding by 12 will give us the current hour for all cases except noon and midnight where 0 is returned.  In these cases we simply check and return 12.  Then we output to our div and we’re done.  Then we run a timer to run every half-second.  It may run a bit fast but the results are negligible when it has a run-time of a certain amount of milliseconds and the timer gets recalculated at each page refresh it is not noticeable.  I’d rather have it a moment or two fast than slow.

I got a lot of this code from Googleing around but altered it almost entirely to fit my needs.  I couldn’t find anything that consistently accounted for time zones and day light savings time easily so I wrote my own.  Now when users log into our site and are looking at data they can make sure they are seeing the times for their office and won’t need to calculate time zone conversions on their own.

Final product!  Works great.  Everyone I’ve showed seems to love it and I’m pretty proud of it.

Screenshot from 2013-07-29 17:10:06

 

EDIT:

Here’s a shot when the user clicks on the time.  It displays the user’s office.  Clicking on the office will bring up their profile where they can change this setting.

Screenshot from 2013-07-29 17:13:02