MainelyDesign.com Blog

Taking A Step Ahead With jQuery

Posted on 07/18/2014 at 09:24 am by Kevin Wentworth
Viewed 8,319 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:

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:

  1. <a download="Sample PDF" href="http://example.com/sample-pdf.pdf" title="Download Sample PDF">Download Sample PDF</a>

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.

  1. jQuery(document).ready(function(){
  2.         $("a").each(function(){
  3.             /*
  4.              * .is("[attribute-selector]") works as .hasAttr would
  5.              * .hasAttr does not exist
  6.             */
  7.             if($(this).is("[download]")) {
  8.                 $(this).removeAttr('download');
  9.                 // Remove the attribute forcing the browser to download
  10.                
  11.                 $(this).attr('title', $(this).attr('title').replace('Download', 'View'));
  12.                 // Change element hover-title to say View instead of Download
  13.                
  14.                 $(this).text( $(this).text().replace('Download', 'View') );
  15.             }
  16.         });
  17.     });

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")

  1. (function($) {
  2.     $.fn.hasAttr = function( selector ) {
  3.         if($(this).is('[' + selector + ']')) {
  4.             return true;
  5.         } else {
  6.             return false;
  7.         }
  8.        
  9.         return this;
  10.     }
  11. })(jQuery);

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.

  1. $("div#donate-now a").css({
  2.     'top':
  3.     (
  4.         // Height of <h1> from top of div
  5.         $("h1").position().top +
  6.         // true height of <h1>, now button is totally under <h1>
  7.         $("h1").height()
  8.     )
  9.     // remove height of donate button from offset, and now..
  10.     - $("div#donate-now a").height()
  11.     // perfectly aligned to the baseline of the <h1>
  12. });

Good Luck, Fellow Programmers.

Bookmark and Share

Tags for Taking A Step Ahead With jQuery

Jquery | Hack | Css | Example

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design