All posts by Scott Godin

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.

Moving a cPanel Hosted WordPress Website from one WHM Managed Server to Another

Simplicity itself.

On the destination server, log in to WHM at www.yourdomain.com/whm. Once logged in, on the left you will see a Find searchbox; enter ‘copy’ in the searchbox, and below that you will see both “Copy an account from another server” and “Copy an account from another server with account password”. Choose the second option.

You will then be presented with the following fields to fill out, relating to the source (original) server that you are moving away from:

  • Domain Name
  • Server to copy from (IP or FQDN): (If possible this should be the same as the domain name)
  • Username to copy:
  • User’s password:

and a checkbox for whether to give the new account an IP address from the IP address pool on the receiving server (if you don’t want it on the shared primary IP).

To use this feature, the remote server must be runing cPanel version 3.0 or later.

As of cPanel 11.24.1, this feature will use the cPanel XML-API to generate a backup of the account and transfer it to this server for restore. This is much more reliable then the old method, and will deliver the same data as a transfer as root would.

Once you’re through filling in the fields, click the Copy Account button, and wait a short bit — you can view the progress of the transfer while it occurs (the page view will periodically update itself as it goes), and very shortly the site will have completed its transfer.

This process will move everything from the old server — database, email (including forwarders), subdomains, and the entire public_html/ directory contents. All passwords related to email and database accounts will remain the same.

Note that once this stage has successfully completed, you then will need to update your DNS information to point to the new server location.

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