Develop Reference

Activate function based on URL rather than click [duplicate]

This question already has an answer here:
On page load, if URL hash matches one of the values in the array, scroll to the element with the matching data-load-id attribute
(1 answer)
Closed 4 years ago.
I have a toggle function that scrolls the page to a section and opens a tab, based on a click on the left side nav (based the id of the link):
<script>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container3").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger3").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
}).first().click()
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#over_left a").click(function(){
var id = $(this).attr("href");
$(id).addClass("active").next().show("slow");
})
});
</script>
Instead of the click being the trigger, I'd like the same loaded URL be the trigger. So, if https://www.sea.edu/sea_research/climate_change#news would also scroll to the News tab and open it (change the class to active) just like the link on the page does. It can be the same tab ID each time - for now only one tab on each page needs to have this treatment.
I don't know what to search for, but something like:
$("URL#news").onload{function()

Try this one
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
JS FIDDLE LINK

use jquery to anchor to certain overlay div

So I have a site, and on click I need it to show overlay div, plus scroll to certain div on that overlay div.
This is what I have:
$(".mcl-title").click(function() {
$("body").addClass("modal-on");
$(".overlay-container").show();
$('html,body').animate({scrollTop: $(".spm-mcl").offset().top}, 'slow');
});
So when the user clicks on .mcl-title, it shows the overlay-container, which covers the entire page, and I need it to move to .spm-mcl class in the middle of that overlay.
Any thoughts?

Your issue is that you are adding your event to a link. Default behaviour is to navigate to that anchor on the page which doesnt exist so you get the top of the page.
When you click:
<a class="item_download button_large news-title" href="#spm-mcl">See More</a>
It tries to navigate to an element with the ID spm-mcl. (You have not such element. You have an element with the class spm-mcl.
You need to call event.preventDefault(); to cancel the default link behaviour.
Also, you can greatly simplify your code and use just one event handler for all the links like this:
Working jsFiddle
<a class="item_download button_large news-title" data-scroll-target=".spm-mcl" href="#">See More</a>
$(document).on('click', '[data-scroll-target]', function(event) {
event.preventDefault(); // stop default link navigation
var $this=$(this); // the clicked button
var target=$this.data('scroll-target');
$("body").addClass("modal-on");
$(".overlay-container").show();
$('html,body').animate({
scrollTop: $(target).offset().top},
'slow');
});

Prevent anchor behaviour on click on DOM generated element inside anchor

An arrow button for moving a slider ended up inside an anchor element.
Now when the button is clicked the anchor link is activated.
The button is part of a dinamically created content on page load by 3rd party slider scripts.
Need to keep the anchor to link to the post. And prevent the anchor from working, only when the button is clicked on.
By the way it´s meant for Wordpress.
Thank you.
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq(document).on("click", 'button.next' , function() {
jq('a').defaultPrevented();
});
});

Try this:
jq(document).on("click", 'button.next' , function(event) {
event.preventDefault();
});

Jquery don't focus in disqus div

I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.

Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});

Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});

Determining when a page anchor (#) visit has occurred with jQuery

I am currently intercepting when a user clicks a particular link with jQuery and scrolling them to an anchor on the page. Once the page has scrolled to the anchor, I then want to show a div and focus on an element in that div. The following code does this but with a problem...
// Intercept the click on the link which scrolls to the signup form
$('#section-footer-buttons a').click(function(){
// Scroll to the welcome section
location.href = '#welcome';
// Show the hidden signup form if it's not already visible
$('#signup-form').slideDown(350, function(){
// Focus on the first element on the form now the animation is complete
$('#signup-form :input:enabled:visible:first').focus();
});
// We've handled this click so return false
return false;
});
The problem is that by the time the page has scrolled up to the anchor where the signup form is, the hidden div is already visible without the nice slideDown animation. Is there a way to only begin the slideDown animation once the page has stopped scrolling? Essentially, I need a callback from when location.href has completed.

You should come at this a different way.
$('#section-footer-buttons a').click(function(){
var welcome = '#welcome',
$offset = $('[href="'+welcome+'"]').offset().top;
$('html,body').animate({
scrollTop:$offset,350
},function(){
location.href = welcome;
$('#signup-form').slideDown(350, function(){
$(this).find('input').filter(':enabled:visible').first().focus();
});
});
return false;
});
Making use of the .animate() callback function like this should hopefully give you what you're looking for.