Trigger existing jquery with URL hash

Question

I have any existing jQuery on a page that changes the layout/masonry depending on the onclick selection. Content includes sections on advertising, music and photography. I would like to be to run the same functions when using a url hash.

Eg. foo.com/#advertising would run this specific function;

$('#show_advertising').click(function() {
    $('.advertisingon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.advertisingoff').slideUp('fast', function() {
        $masonry.masonry();
    });
});

Here is the full query as it stands.

<script>
(function ($) {
    $(document).ready(function(){
var $masonry = $('#masonry-content_fmzq1ep27, #masonry-content_HomeHeadingTy1, #masonry-content_HomeHeadingTy2, #masonry-content_HomeHeadingTy3, #masonry-content_HomeHeadingTy4, #masonry-content_HomeHeadingTy5,#masonry-content_HomeHeadingTy6, #masonry-content_HomeHeadingTy7, #masonry-content_HomeHeadingTy8, #masonry-content_HomeHeadingTy9, #masonry-content_HomeHeadingTy10');
$('#show_all').click(function() {  
    $('.allon').slideDown('fast', function() {
        $masonry.masonry();
    });
    });
$('#show_music').click(function() {
    $('.musicon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.musicoff').slideUp('fast', function() {
        $masonry.masonry();
    }); 
});
$('#show_advertising').click(function() {
    $('.advertisingon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.advertisingoff').slideUp('fast', function() {
        $masonry.masonry();
    });
});
$('#show_photographer').click(function() {
    $('.photographeron').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.photographeroff').slideUp('fast', function() {
        $masonry.masonry();
    });
});
});
})(jQuery);
</script>

Many thanks!

Thanks David. Although I'm not sure how to call upon that window.location.hash within this query? — Ty Johnson
– Ty Johnson, Commented Nov 17, 2020 at 21:44

Liftoff · Accepted Answer · 2020-11-17 21:52:52Z

1

From page load:

<script>
$(function(){

    var hash = window.location.hash;
    if(hash == "advertising")
    {
        //Do advertising code here
    }

});
</script>

On hash change:

window.onhashchange = function(){

    var hash = window.location.hash;
    if(hash == "advertising")
    {
        //Do advertising code here
    }

}

answered Nov 17, 2020 at 21:52

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

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

3 Comments

Ty Johnson Over a year ago

Thanks David. I told the following however this isn't working. Should I amend the original query or just duplicate the same again within the new window.location.has function.

Liftoff Over a year ago

I would make your code into a function and call the function in both places. That way you're not duplicating code.

Ty Johnson Over a year ago

Thanks David. Makes sense. It not quite at that level though I'm afraid. Not sure how to define this as a function inside or outside the larger query.

Ty Johnson · Accepted Answer · 2020-11-17 22:47:48Z

0

I tried adding this as per your suggestion, below the original full query...

$(function(){

var hash = window.location.hash;
if(hash == "advertising")
{
$('#show_advertising').click(function() {
    $('.advertisingon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.advertisingoff').slideUp('fast', function() {
        $masonry.masonry();
    });
});
}

});

answered Nov 17, 2020 at 22:47

Ty Johnson

1

2 Comments

Liftoff Over a year ago

.click(function(){ binds the interior function to the click event on the selected element. Just do the inside part. The .slidedown and .slideup part

Ty Johnson Over a year ago

Appreciate your help David! Much appreciated. I might be a little out of my depth here though today. Thanks anyway!

Ty Johnson · Accepted Answer · 2020-11-17 23:16:34Z

Here's what I now now... unfortunately still not triggering that #show_advertising function when going to foo.com/#advertising. The onclick version still functions correctly. I get the feeling that it not being part of the larger query above means it's missing out on some important elemets such as the "var" for the masonry.

<script>
(function ($) {
    $(document).ready(function(){
var $masonry = $('#masonry-content_fmzq1ep27, #masonry-content_HomeHeadingTy1, #masonry-content_HomeHeadingTy2, #masonry-content_HomeHeadingTy3, #masonry-content_HomeHeadingTy4, #masonry-content_HomeHeadingTy5,#masonry-content_HomeHeadingTy6, #masonry-content_HomeHeadingTy7, #masonry-content_HomeHeadingTy8, #masonry-content_HomeHeadingTy9, #masonry-content_HomeHeadingTy10');
$('#show_all').click(function() {  
    $('.allon').slideDown('fast', function() {
        $masonry.masonry();
    });
    });
$('#show_music').click(function() {
    $('.musicon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.musicoff').slideUp('fast', function() {
        $masonry.masonry();
    }); 
});
$('#show_advertising').click(function() {
    $('.advertisingon').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.advertisingoff').slideUp('fast', function() {
        $masonry.masonry();
    });
});
$('#show_photographer').click(function() {
    $('.photographeron').slideDown('fast', function() {
        $masonry.masonry();
    });
    $('.photographeroff').slideUp('fast', function() {
        $masonry.masonry();
    });
});
});
})(jQuery);
</script>

$(function(){ var hash = window.location.hash; if(hash == "advertising") { $('#show_advertising') { $('.advertisingon').slideDown('fast', function() { $masonry.masonry(); }); $('.advertisingoff').slideUp('fast', function() { $masonry.masonry(); }); }); } });

Collectives™ on Stack Overflow

Trigger existing jquery with URL hash

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related