JS Highlight Text

I needed to setup some text search functionality on a page and the client really wanted the searched words to be highlighted.

I found a great library for exactly this over on The Art of the Web.

They do a great job of explaining this library so please check them out to learn more!

Hash Link Offset

When you have a hash link on your page ( href=”#target” ) sometimes the browser scrolls too low and cuts off or puts too close to the top the target element.

You can offset this hash link by hooking into the ‘hashchange’ event.

This does NOT resolve linking directly to this hash tag, but will fix the on page hash link.

To do that you can setup the following functions.

Thanks to Eric Olsen over at stack overflow!

Upload Images Using JS

I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.

At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!

Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.

I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:

On the server script you can access this data just like any other form submission.

PHP

There we go! Now we can submit our form, including images, to our server script!

NOTE: We are using a custom function to serialize our form data. You can find that function here.

Cross Browser HTML5 Date Input

I have been waiting for the day when using <input type=”date” /> would be common…alas, 3 years after the standards were written it is still not supported in IE or Safari.

UNFORTUNATELY we still have to support these browsers…

Traditionally I have been using a third party datepicker (jQuery UI, Bootstrap Datepicker, etc) but I REALLY wanted to just use the default type=”date” this time.

I found a great solution over on Stack Overflow from Kashif Latif.

BAM! We have a polyfill. As far as I can tell this does the trick.

Helpful Javascript Prototype Functions

Sometimes the built in functionality for various Javascript primitives is not enough. Here is an assortment of useful Prototype functions. Enjoy!

 

JS Capitalize a String

Just a simple String prototype to capitalize the first letter of the string.