Smooth scrolling with jQuery

There’s plenty of jQuery libraries out there for “smooth scrolling”, but the fact is, 91.3% of them aren’t required to pull off this affect. The jQuery code below replies only on jQuery itself. Keep it simple.
1
2
3
4
5
6
7
$(document).ready(function() {
    $('a[href^="#"]').click(function(e){    
        e.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800, 'swing');
    });
});

<HR> tag CSS styling (cross-browser compliant)

Here’s the 3 sets of code I use when styling a HR (horizontal rule) in CSS. This is for a styled border (dotted), solid color and a background image. For the background image, I’ve never been able to get IE to work right. What HR code do you use for cross-browser compatibility?

Note: the problem with IE background images is the shaded border (left and top) that won’t go away.

HR border (dotted) – has to offset the background with the parent element’s BG color.
1
2
3
4
5
6
hr {
    border:1px dotted #F0F;
    border-style:none none dotted;
    color:#FFF;
    background:#FFF;
}


HR color (solid color)
1
2
3
4
5
6
hr {
    border:0;
    color:#F0F;
    background:#F0F;
    height:1px;
}


HR background image – IE is a bust when it comes to background images, so I have a fallback.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
hr {
    border:0;
    background:url(/images/line_hr.gif) repeat-x;
    height:10px;
}
</style>

<!--[if IE]>
<style>
hr {
    border:2px dotted #F0F;
    color:#F0F;
    background:#F0F;
    height:1px;
}
</style>
<![endif]-->

Date formatting with jQuery UI

If you’re developing for a legacy CMS or an absolute POS in-house built platform, you’ll most likely need to change the way dates are formatted on the page. Using jQuery UI this is possible and here’s how to do it!



HTML
1
2
3
<span class="date">06-Aug-2012</span>
<span class="date">2012/06/Aug</span>
<span class="date">Monday, August 06, 2012</span>
jQuery
1
2
3
4
5
6
7
8
$(document).ready(function () {
    $('span.date').each(function() {
        var dateFormat = $(this).text()
        var dateFormat = $.datepicker.formatDate('MM dd, yy', new Date(dateFormat));
        //alert(dateFormat);
        $(this).html(dateFormat + "<br>");
    });
});​
Date Formatting options: http://docs.jquery.com/UI/Datepicker/formatDate

Hide dead or broken images using jQuery

If you’re like me, and have tasted all or most of the Content Management Systems (CMS) the world (Internet) has to offer, you know how difficult it can be developing for legacy systems. A while back I was building a custom “Web App” for Business Catalyst that my client could easily update on the back-end to update a gallery of images. If you’re familiar with Business Catalyst and it’s “Web App” module, you know that if a data field is blank, it won’t drop the data. The problem was that these images all needed to open in a lightbox once clicked. Looking back, I could have used jQuery’s
.wrap()
or similar to wrap each image, but at the time I wasn’t as smooth with jQuery as I am today. So at the time, with the limitations of the CMS (Business Catalyst) and the limitation of jQuery (HA!) I choose to hide/remove all images that didn’t load. This had to be done to give the client enough spots on the back-end to upload images for each gallery set they wanted. At the time I used
.hide()
, but later changed it to
.remove()
.

1
2
3
4
5
$(document).ready(function() {
    $("img").error(function(){
        $(this).remove();
    });
});