Jquery, activate a script when a hash is in url

Question

So I have some images that are positioned absolutely above a page set to hidden that display inherit when you click on the appropriate link triggering the event that displays them.

Now, here's where my question comes in. Say I assign an image an ID of "example" - is there any way that when someone enters the site with a hash tag #example or clicks on a link with the hash tag #example in the url, that the event would trigger for an image with the same ID? I'm really stumped on this one

What I had been using is this:

$("#activate1").click(function () {
$("#flyer1").css("display", "inherit");

});

Which worked fine but now I'll have to add flyers each week which would mean I need to change that unless I want to write the above code for each unique case. But on top of that, I also now have to send them to people through a link so the script now has to trigger when they click the link - I figured the best way to tackle this would probably be implementing a hash tag trigger

Sure thing! I added it just now and explained a bit more - didn't mean to be so vague — Brittany Smith
– Brittany Smith, Commented Apr 20, 2012 at 3:27
You are not supposed to edit the title to show you've solved it. You are supposed to pick the answer that helped you the most and click the checkmark to the left of that answer. That indicates to the system that you have selected a best answer and then that info shows in all queries. — jfriend00
– jfriend00, Commented Apr 20, 2012 at 6:49

user1106925 · Accepted Answer · 2012-04-20 03:18:21Z

4

$(function() {

    $('#example').on('click', function() {
        alert('was triggered');
    });

    $(window.location.hash).trigger('click');

});

answered Apr 20, 2012 at 3:18

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

1 Comment

Brittany Smith Over a year ago

Well, here's the issue: there's going to be a lot of different images each needing a unique function if I go with that - I was hoping there would be a way to look at what the hash code in their url is and triggering an image to appear that has the same matching ID

jfriend00 · Accepted Answer · 2012-04-20 04:11:25Z

2

To activate all the links in the page that have a hash tag in them without coding for any specific names, you can do this:

$('a[href*="#"]').on('click', function(e) {
    var match = this.href.match(/#[^#]+$/);
    if (match) {
        // trigger a click on the object that has an id 
        // matching the hash value in the link
        $(match[0]).trigger('click');
        return(false);   // no default processing for the link
    }
});

To process the hash tag on the initial link, you could run this code:

$(document).ready(function() {
    if (window.location.hash && window.location.hash != "#") {
        $(window.location.hash).trigger('click');
    }
});

answered Apr 20, 2012 at 4:11

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Brittany Smith Over a year ago

Thanks! This wasn't exactly what I was looking for but I modified it to fit my situation and it works :) Thank you so much!

user1106925 Over a year ago

@BrittanySmith: FYI, you can indicate that this was the most helpful answer by clicking the large check mark to the left of it.

Kyle Hotchkiss · Accepted Answer · 2012-04-20 03:42:33Z

0

Plugins are your friend. A quick Google shows that Ben Alman's jQuery BBQ library can lead you a helpful hand!

(unrelated: jQuery libraries with cool names are an awesome addition to your future projects!)

answered Apr 20, 2012 at 3:42

Kyle Hotchkiss

11.2k21 gold badges60 silver badges83 bronze badges

1 Comment

Brittany Smith Over a year ago

I was looking at that earlier but I couldn't find what I needed to get this to work - unless I missed it?

Collectives™ on Stack Overflow

Jquery, activate a script when a hash is in url

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related