MainelyDesign.com Blog

Taking A Step Ahead With jQuery

Posted on 07/18/2014 at 09:24 am by Kevin Wentworth
Viewed 8,726 times | 0 comments

After spending a majority of my time developing with JavaScript and jQuery, I've come across many different things that proved very useful, but may not be thought of by most developers. Two things in particular stand out:

• The notorious download attribute, and
• Vertically aligning two DOM elements to their baseline

Both of these things have troubled developers across the globe, both new and experienced. However, a large scale problem sometimes has a very simple answer...

The Notorious Download Attribute

The download attribute on <a> tags has been seen many times, and used a few different ways. The download attribute allows an <a> tag to force the browser to download a file, instead of directly accessing it. This can be useful, for things such as PDF's, images, and printable forms.

One use of the download attribute, is as follows:

What this <a> element does, is accesses the http://example.com/sample-pdf.pdf file, then tells the browser to download sample-pdf.pdf as Sample PDF.pdf. Now, what if you only want them to download the file if there is no JavaScript being run? Well, I guess we'll have to access some of the attributes inside of the <a> element and mix it up a bit.

EDIT!

After deciding that using .is('[selector]') is a clunky way to write your own code, I put together a very small jQuery plugin for .hasAttr("attributeName")

To use this, just drop it inside of a .js file you're using, OUTSIDE of a $(document).ready() function.

Vertically Aligning Two DOM Elements To Their Baseline

Throughout the course of the internet, people have tried to position elements as perfectly as they can, while still being smooth running and effective. While trying to do this, many people overlook very small positioning issues that can be fixed with a quick jQuery line.

The example given here, is a "Donate Now" button being vertically aligned to the WebPage's <h1> elements baseline. Both elements were contained in a common ancestral position: relative div.

Good Luck, Fellow Programmers.