Here’s Why Your Bootstrap Collapsed Alert Jumps When Expanded

I’ve seen this Bootstrap issue countless times. A collapsed div is collapsed and expanded with Bootstrap Collapse. When it opens up, it appears to over-expand and then jump back up. It’s super annoying.

Here’s what your code might look like:

<div class="collapse alert alert-info" id="my-alert-box">My hidden alert box with some text.</div>

Here’s what you should do:

<div class="collapse" id="my-alert-box">
    <div class="alert alert-info">My hidden alert box with some text.</div>
</div>

The collapsed div can’t have padding applied to it. By moving the alert inside of the collapsed div, we solve the problem.

Body Height + CSS Background Images

If you’ve ever tried adding a background to the body element of a web page, you may have been a tad frustrated. By itself, the background will only cover the used portion of the page. If the height of the browser window is taller than the page, your background is cut short. Continue reading Body Height + CSS Background Images

Adding the Bootstrap “active” class to a WordPress Menu Item

Working with WordPress and Bootstrap, you might be frustrated with the built in menu options. There isn’t an easy way to tell WordPress to swap out the ¬†current-menu-item class with bootstrap’s active class. Fortunately for you and me, there’s jQuery for that. Just a little dab will do ya.

jQuery(document).ready(function () {
  $(".current-menu-item").addClass("active");
});

This little blessed bit of jQuery will add the active class to your menu on the fly.

Set a Container to the Window Height with jQuery

A common issue with CSS is finding the best way to set an element, such as a div, to stretch from the top of the screen, to the bottom of the screen. You can do this with positioning. Sometimes, though, you want the div to start from after the banner, navigation, or something else. This creates some additional variables. You also need to account for what happens if someone resizes the screen. Continue reading Set a Container to the Window Height with jQuery

WordPress Pagination With Bootstrap

I love Bootstrap. I also love WordPress.

One issue I came across in my WordPress theme development using Bootstrap was the pagination styling. It wasn’t complete, and some edits needed to be made in order for it to look right. Continue reading WordPress Pagination With Bootstrap

Simple PHP+CSS+jQuery Anti-Spam Measure

Today I set out to implement some additional anti-spam measures for some forms on one of my sites. Let me start by saying that this should not be the only thing you do to prevent spam. Nor are these ideas new or unique. This is just a simple technique to help prevent spam. Continue reading Simple PHP+CSS+jQuery Anti-Spam Measure