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
Related
I want if someone clicks the navigation link "Mediengestaltung" (see picture) that he is scrolling to an anchor and additionally auto-click another id, in this example #design. Question is regarding this site: https://bm-translations.de/km.php within the navigation
I tried this, but its crashing the site:
Mediengestaltung
#button id which is set to the link. #design id which is set to the anchor. .carousel-selector-1 class to click on to switch to the desired slide
$('#button').on('click', function() {
var anchorTag = $("#design");
$('html,body').animate({scrollTop: anchorTag.offset().top},'slow');
$('.carousel-selector-1').click();
return false;
});
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');
});
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.
The following code is normally wrapped in an if statement to check if the browser is on a mobile device and if so then when you click on the main menu link it stops the href, hides the current nav bar links, then adds a new one. This allows for the drop menu to stay dropped and you can click on the main menu link again so that the href works. The problem is that you can only do this one time. After the first click and the javascript:void(0) is run and the links are updated I cannot stop the href from going to its original location. I need the javascript:void(0) to run on the first click of link each time and on the second click of the link redirect you to the respective page.
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$(this).attr('href', 'javascript:void(0)');
});
});
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$('.testing-a').css('display','block');
$('.testing-this').css('display','none')
});
});
Use preventDefault() in such scenario.
Example ::
$('.mobile-device > a').click(function(evt){
evt.preventDefault();
$(this).attr('href', 'javascript:void(0)');
});
I have this jquery code that dynamically loads an html page into a div when a user clicks on a link in a list.
Is there a way to disable one of the links if the user is already viewing the page it links to? Right now the loading animation is triggered every time the link is clicked even if the requested link is already showing.
I need the event to not trigger if the page it calls and loads is already displayed.
$('#navigation a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("slide",{direction:"up"},1000,loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show("slide",{direction:"down"},1000);
}
return false;
});
You can add a custom class which will disable your clicked link. Like:
$('#navigation a').click(function(){
......
$(this).addClass('disabled');
....
}
But you would obivously need to somehow remove that class from other previously added links (so you won't disable whole menu after few clicks. So you could make some reset like:
$('#navigation a').click(function(){
......
$('#navigation a').removeClass('disabled');
$(this).addClass('disabled');
....
}
This is just a simple logic. I believe it can be optimized or written in different way.
Edit: Css class probably won't make it in this case. I am not sure, if you can use disable() on anchor tag. Or you can just execute different logic like using preventDefault on this link, but then you still need to keep track of disabled elements this way so you can enable them once another one is clicked.