Category Archives: Programming

Setting the Active Navbar item with Bootstrap 4 and jQuery

Following in the footsteps of the fine answer at StackOverflow for “How to extract class from body element using jQuery?” using regular expressions, if you are adding your navbar as an include (following DRY principles), here is a nice clean way to not only automatically enable the active item in the navbar and its submenu, but also append the <span class="sr-only">(current)</span> for screenreaders, to the appropriate link text.

Now, all you need to do is on each page, add a ‘page-*‘ class to the <body> tag, which will connect with a matching class that you add on your .nav-item or .dropdown-item, like so (observe the highlighted lines):

Notice how, in the dropdown markup above, the individual dropdown items get one class each, but the nav-item containing it gets each of them appended, so that both the top level nav gets highlighted as active, as well as its entry in the submenu

Bootstrap 4 Beta navbar with active dropdowns set via jquery

Now that’s slick. Check it out on Codeply

A new look for CSS3 Sprites

It’s interesting to realize just how long ago this technique began to be used, and in terms of web technology, the fact that it still sees widespread usage is pretty telling how groundbreaking this was back then.

Now, with more and more browsers supporting CSS3 transitions, it’s now possible to add fancy fading effects to your sprites without even needing javascript, and with minimal impact to the usual css3 sprites code for rollovers, and a bit of :active for mobile devices to at least catch the fade-in on click.

Starting with a typical sprite used for social media links ;  150×100 with 40px icons centered in a 50px matrix:

typical sprite used for social media rollovers

The markup is pretty simple:

But the CSS gets interesting:

It starts off pretty typical, but around line 23, instead of repositioning the css sprite on hover we do something a bit different —  using the CSS pseudo-class :after to hold the re-positioned image in the same place as the original but with an opacity of 0 (so it’s completely transparent), we adjust the opacity on :hover/:active to 1;

The even fancier bit comes from the new transition property where we adjust it over a 0.8 second span to create the fadein/fadeout effect.

The result?  Sexy.

The CSS for this feels a tad more elegant as well. Plus since this sort of fanciness requires no additional javascript, you save a tad on your website download payload to the client browser.

Leo Laporte discusses his website design cost and development time

On a recent episode of The Tech Guy (Show 865: http://twit.tv/show/the-tech-guy/865 at the 34:50 mark)  Leo Laporte discusses the wide range of website costs, development time and the price he’s paying for phase one of The Tech Guy Labs website’s redesign.

reference:
http://techguylabs.com
http://techguylabs.com/radio/ShowNotes/Show865#toc13

Integrating jQuery Fancybox and Tooltips plugins

In the process of adding the lightbox plugin at fancybox.net to a client’s website, it became necessary to integrate it with the jquery tooltip plugin that was already in place and in use on the site to create styled tooltip hovers on certain of the images there.

sample image showing tooltip plugin - image copyright Nancy Carol Willis, all rights reservedsample image showing lightbox with title overlay - image copyright Nancy Carol Willis, all rights reserved
images copyright by Nancy Carol Willis, all rights reserved

As the method of adding tooltips to the images conflicted with how the rel="" attribute was used by the lightbox for grouping sets of images, this required a bit of alteration to the lightbox plugin. Continue reading