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');
});
Related
I have an element with fixed sidebar with onclick function. When it is clicked at bottom page, the other element as content back to top of page. How I can stop this problem?
Here is my jquery function :
$(document).ready(function(){
$("#sidebarCollapse").on('click', function(e){
e.stopPropagation();
$('#sidebar').toggleClass('show-side-nav');
e.stopPropagation();
$('#user').toggleClass('d-none');
e.stopPropagation();
$('#navbar').toggleClass('show-side-nav');
});
Regards!
Guessing it's either a button which will reload the page, or <a href="#"> which will go to top. You need to use preventDefault(). You may not even need stopPropagation() in this instance, but if you do you only need it once. Also when you're toggling the same class on two elements, you can select them together.
$("#sidebarCollapse").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$('#sidebar, #navbar').toggleClass('show-side-nav');
$('#user').toggleClass('d-none');
});
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;
});
This is my code: Js Fiddle
As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.
Normally it would be quite simple as I could do this:
$('body').animate({
scrollTop:$(document).height()
});
However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.
I guess the code would be something like (in pseudo): scroll to top sectiona + 1
with jQuery and smooth scrolling
$('a').click(function(){
var nextSection = $(this).closest('section').next('section');
$('html, body').animate({
scrollTop: $(nextSection).offset().top
}, 2000);
});
Why not you pass id's to each section and in href refer to that id like
<section id="sectionOne">
Move to section two
</section>
<section id="sectionTwo">
Move to section one
</section>
You can also try the following.
var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);
$(document).scrollTop(amount_to_scroll_by); // animate this scroll
Hope this helps :)
Using jquery, you can smoothly scroll to the target.
Here is a SAMPLE
JS:
$("a").click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({ scrollTop : $(target).offset().top + "px"});
});
You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.
I have created a very simple demo for you to understand this (not using your markup to keep it simple).
Demo: http://jsfiddle.net/abhitalks/9uxGq/15/
(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)
You need two anchors, one as click link and the other to mark the position of target as anchor.
For example:
<div>
<a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
<h2>Sub Heading 2</h2>
<p>
Some text content here
</p>
Learn More <!-- Used to click to got to next anchor -->
</div>
Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.
Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.
It would be as simple as this:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor
var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Alternatively:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = $(this).attr('href'); // get the next marker anchor
var gotoPoint = $(nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/
Hope that helps, and you can work it out in your markup and use-case.
.
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)');
});