Capturing the URL anchor with jQuery & flashing an element

Learn how to use the jQuery URL parser to capture an anchor tag in the URL, and then animate an element if that anchor is present.

Today were going to be doing a jQuery tutorial. I was searching a way to animate an element, as if to flash it on and off. But, I didn’t want this to happen on every single page load, just when a certain link was clicked from the home page.

What to do

The easiest way was to capture something from the link that was clicked. Maybe a cookie, or the URL it’s self? I decided to add an anchor of “#like” to the link. Now all I had to do was do something if, and only if the anchor was present.

How to capture the anchor

I went searching for, and found the URL plugin for jQuery which allowed me to do just that. Find elements in the URL.

A jQuery plugin to parse urls and provides easy access to information within them, such as the protocol, host, port, the segments that make up the path and the various query string values.

To do so we need to capture the variable:

var anchor = jQuery.url.attr('anchor');

This is setting the variable anchor to capture any anchor that may or may not be attached to the URL.

Then will use an if statement:

if (anchor == 'like') {
    //do something
}

The above states that if the anchor of the current site’s URL is #like, do something. Be sure to omit the pound key

What are we going to do?

Well, I’m glad you asked, or I implied. If you came to this post from the home page after clicking Likes: (x) then you may have noticed the like this field flash yellow on the left sidebar. If not, you can try it now?

Well I’m capturing the #like anchor and animating the opacity of said element which has a background color of yellow. Lets check out that code:

$j('<span class="like-flash"><br /></span>')
	.insertAfter( $j('.iLikeThis .counter') )
	.fadeIn('normal').fadeOut('normal')
	.fadeIn('normal').fadeOut('normal')
	.fadeIn('normal').fadeOut('normal')
	.fadeIn('normal').fadeOut('normal')
	.fadeIn('normal')
	.fadeOut(3000, function() {
		$j(this).remove();
	});

Can you figure out what’s happening? We’re just creating an element with a class, inserting it after a particular element* and fading it in and out a few times. *You don’t have to add it after a certain element, you can add it where ever you like πŸ™‚

That’s it, lets see the whole code now:

var anchor = jQuery.url.attr('anchor');
//console.log(url); //to see what the anchor is (checking purposes)
if (anchor == 'like') {
	$j('<span class="like-flash"><br /></span>')
		.insertAfter( $j('.iLikeThis .counter') )
		.fadeIn('normal').fadeOut('normal')
		.fadeIn('normal').fadeOut('normal')
		.fadeIn('normal').fadeOut('normal')
		.fadeIn('normal').fadeOut('normal')
		.fadeIn('normal')
		.fadeOut(3000, function() {
			$j(this).remove();
		});
}
Default image
Austin
πŸ’πŸ½β€β™‚οΈ Husband to Jeana. ⚾️ Dodgers obsessed. πŸ† World Series Champs. πŸ’» Senior WordPress engineer @ Beachbody. πŸŒπŸΌβ€β™‚οΈScratch golfer. 🌱 Hydroponic Gardner. 🍿 Plex nerd. πŸš™ '15 WRX & '66 Corvette C2. 🐢 Missing my love Keiki; RIP 😒. Follow me on Twitter @TheFrosty & Instagram @TheFrosty.
Articles: 285

6 Comments

  1. Would this jQuery.url.attr function be able to add and remove a anchor from the end of a url?
    for example I have a few buttons: web, print, and logo that add #web, #print, #logo to the end of the url so that it jumps to that section. My issue is removing the anchors so they dont stack when I click two different buttons.
    so if I sort by print then web it looks http://mysite.com#print#web and doesnt work.

  2. Hey Austin,

    This didn’t work for me either.

    Guess you’ve changed your site around a bit…and the code is broken to that extent.

  3. just a quick note, as of 1.6, .prop should be used instead of .attr

Leave a Reply

%d bloggers like this: