I have a link inside modal, and I want to take users to a specific location upon clicking. Currently, this works the first time, but any subsequent uses of the same modal when using the "close" button (not the specific link) of the modal, it also sends me to my link (not expected behavior).
Here is a js fiddle that shows the weird behavior of a link in a Bootstrap modal. https://jsfiddle.net/x9kr2wwm/5/
My attempt is a modification of a very similar question/answer (but not a duplicate) found here: CSS Bootstrap close modal and go to link
HTML:
See the "Get Started" section for more
Javascipt:
jQuery(function($) {
$("a#gotoLink").click(function(){
$('#portfolioModal1').on('hidden.bs.modal', function (e) {
$('html, body').animate({
scrollTop: $("#getstarted").offset().top
}, 2000);
})
});
});
The default behavior for an <a> element is for the page to be redirected to its href attribute. To prevent the default behavior, use jQuery's .preventDefault() method.
jQuery(function($) {
$("a#gotoLink").click(function(event){
event.preventDefault();
$('#portfolioModal1').on('hidden.bs.modal', function (e) {
$('html, body').animate({
scrollTop: $("#getstarted").offset().top
}, 2000);
})
});
});
Related
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
For my anchorlinks I have set smooth scrolling, that is working. Also every outgoing link is working but not the outgoing links in the navigation (see green arrow in picture). Its producing a uncaught reference error. Why is this and how to solve this?
question is regarding this site: https://bm-translations.de/km.php
I had this problem at the beginning for all links and I could solve it with this code:
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function (event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function () {
// offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
Solution is the css :not() selector for excluding specific class from this function:
//Smooth scrolling when clicking an anchor link
$(document).on("click", ".navbar-nav a:not('.externallink')", function(event) {
event.preventDefault();
$("html, body").animate(
{
scrollTop: $($.prop(this, "hash")).offset().top
},
500
);
});
After window resize my scroll function does not work as I described below (description shows how I want it to work):
I do window resize.
After window resize when I click the given menu item the window should scroll to...
corresponding to that menu item section offset().top-45 for max-width:480px (first breakpoint)
corresponding to that menu item section offset().top-90px for min-width 481px (second breakpoint)
https://jsfiddle.net/d1abevro/1/
It only works as expected for a given breakpoint without window resize (onload).
function displaymenu() {
if ($(window).width() <= 480) {
$('.c-main-menu ul').css({display: 'none'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-56
}, 800);
$('.c-main-menu ul').slideToggle();
});
$('.c-nav .menu-trigger').click(function() {
$('.c-nav .c-main-menu ul').slideToggle();
});
} else {
$('.c-main-menu ul').css({display: 'block'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-90
}, 800);
});
}
}
That is caused because after each resize you append a new event. You should kill the old event an create a new one in order to prevent conflict with the old event. To get this approach the best way is to adding a namespace for your event, for example:
$(document).on("click.menuLinkEvent",".my_links", function(){});
And before adding the new event kill any old event it using unbind method and passing the event with the namespace:
$(document).unbind("click.menuLinkEvent");
Also looks like you understand correctly that the event will be appended each time after resize so you added a setTimeout function, but forgot to add a time, so however it will fire inmediately.
I made some changes to your fiddler. Let me know if it works as you expect
I was struggling to find a way to make it so when i click "Contact us!" on my modal, it would close the modal then scroll to the Contact Us part.The method i found now also scrolls when i press close, is there a way to fix this. This is the function used!
jQuery(function($) {
$('#leadworkModal, #tilingModal').on('hidden.bs.modal', function (e) {
$('html, body').stop().animate({
scrollTop: $("#contact-us").offset().top
}, 2000);
});
});
You have to attach an event to the button:
jQuery(function($) {
$(document).on('click', '#contactButton', function (e) {
if($('#leadworkModal').hasClass('in')) $('#leadworkModal').modal('hide');
if($('#tilingModal').hasClass('in')) $('#tilingModal').modal('hide');
$('html, body').stop().animate({
scrollTop: $("#contact-us").offset().top
}, 2000);
});
});
If you attach event inside button onclick event (as suggested in comments). It will work only once. Because event still is attached for further.
So I would just check if modal is shown just hide it.
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');
});