Web Dev Notes

Blog about web development by Robert Dawson

My path to JavaScript mastery

"Mastery" is probably a little exaggerated. This is more my path beyond jQuery.

Ebooks

Web

Command Line

Save to file all links on page

This code below works in Chrome's console (on Mac, but should work on Windows), assuming that jQuery is loaded on the page. Run this script, then right-click and save. I also renamed the resulting file with a .txt extension to see a preview in Finder.

jQuery('*').find('a').each(function(){
  console.log(jQuery(this).attr('href'));
});

How to make HTML elements the same height

See how the "Read more." links at the bottom are horizontally aligned on this page?

Below is how I did it. Note that the elements variable is an array to let you equalize differently identified elements (e.g., [".div1", ".div2"]).

function setSameHeight(elements) 
{
var heights = new Array();
for (e = 0; e < elements.length; e++)
{
heights[e] = $(elements[e]).height();
}
var tallest = Math.max.apply(Math, heights);
for (e = 0; e < elements.length; e++)
{
$(elements[e]).height(tallest);
}
}

var elements = [".sqs-block.summary-block"];
setSameHeight(elements);

CSS and jQuery tricks!

So, this morning, I ran across two unrelated web-dev problems, Q1) how to prevent that annoying blue highlight box from appearing when clicking on image map areas and Q2) how to close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today.

Q1: How do you prevent  that annoying blue highlight box from appearing when clicking on image map areas?

A1: Do this: 

area {
outline: none;
}

Q2: How do you close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today?

A2: Do this: 

$(document).on('keydown', function(e)
{
if (e.keyCode === 27) // ESC
{
$('.modal_window').hide();
}
});

Hide/show info and change URL without reloading

Problem

You have a page with information by year. And year headings are linked, like this:


Information under the latest year is shown, while information under previous years is hidden. When a user clicks a year, you want to show that year's information and add a hash value (e.g., #2013) to the URL so that returning to this page will return it to the previous open/close state.

Solution

var current_path = location.pathname;
var year_hash = (location.hash.substr(1) != "") ? location.hash.substr(1) : "";

$("h2").on("click", function()
{
location.hash = $(this).text();
});

if ( location.hash.match(/^\#\d{4}$/) )
{
$("h2:first").click();
$("h2:contains(" + year_hash + ")").click();
}

Greasemonkey script to convert Redmine URLs into actual hyperlinks

I use Redmine and each issue page contains a field identified as "URL(s) to be edited," which contains URLs related to the issue at hand. Unfortunately, these URLs aren't actually linked! They're just text. And I have been tediously copying and pasting each link, one at a time, into a new tab in my browser.

Well, not anymore! Today, to ease my suffering (and to try something new), I created my first Greasemonkey script to convert those text-only URLs into hyperlinks. I hope it's helpful, as this script could be easily modified to work with any text in any HTML element (thanks so much to jQuery).

To use this script, first install a Greasemonkey-compatible extension in your browser. Greasemonkey has traditionally been primarily used in Firefox, but you can also add Greasemonkey support in Chrome (and probably IE, but why even check?). Then, install my script! And modify to suit your own needs.

How to automatically update the copyright year on Squarespace

Question

It's 2012 and your copyright year still reads 2011. You vaguely remember that computers allegedly save time. So, you wonder if there might be an easy way to automatically display the current year and save yourself a few clicks and minutes each year.

Answer

There is! And it's easy. JavaScript 101 easy. No, jQuery 101 easy!

Note: This assumes you have jQuery installed. If not, see this post. Also, this solution basically applies to any site with jQuery.

Step 1: Add container element

  1. Go to Website Management > Structure > Website Settings > Header & Footer Website Footer / Licensing Notice
  2. Paste this:
    Copyright &copy; <span class="current-year"></span>
    

Step 2: Add jQuery

  1. Go to Website Management > Structure > Website Settings > Code Injection
  2. Paste this:
    <script type="text/javascript">
    $(function(){
      $('.current-year').html((new Date).getFullYear());
    });
    </script>
    

Easy way to include HTML in Squarespace pages

Question

How do you include snippets of HTML code into multiple pages on your Squarespace site?

Answer

There are several ways to do this, but one particularly straightforward solution was to add jQuery to the head of every page, create an HTML page to include, and then load part of that page into an empty DOM element. Here are instructions based on what I did. You can use whatever DOM element (e.g., <div> or <p>) and class or id you like.

First, insert jQuery into the <head> of every page.

  1. Click Website Management.
  2. Under Structure, click Website Settings.
  3. Click Code Injection.
  4. In the "Extra Header Code" text field, add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
  $('#updates').load('/updates/ #content');
});
</script>

<script type="text/javascript">$(function(){$('#updates').load('/updates/ #content');});</script>

Second, create a new HTML page.

  1. Click Website Management.
  2. Under Structure, click Architecture.
  3. Add a new section. I called mine "Hidden from nav."
  4. In this section, click "add page" and make a new HTML page. I called mine "Updates."
  5. Go to that page and add the content you want to display elsewhere.

Third, add an empty DOM element to your target page(s).

  1. Go to a page where you want to display this new HTML page.
  2. Click "edit page" and, in HTML view, add an empty DOM element.
  3. Give that element a class or id, like this:
<div id="updates"></div>

And you're done! It's more than one step (and Squarespace should offer this functionality natively) but it's still easy and quick to implement.

The only small issue I found with this solution is that Squarespace adds another "edit page" link above the included code, which opens the edit window for the page you're on and not the included page. To edit that page, just go to it directly.