SmoothScoll and lightbox conflict - javascript

I've this website, and there's a conflict between Smoothscroll javascript and lightbox one.
Here's the script for the Scroll
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
How can I solve it? How can I make the lightbox and the smooth scrolling work simultaneously?

I'm not an jQuery expert and don't know how flexible the selectors are, but here are some suggestions:
Suggestion 1:
I don't think this selector:
a[href*="#"]:not([href="#"])
will work properly. You're selecting all href elements if they dont't have the attribute value "#". I think this case doesn't cover the links with a different value like you have: "#queen-bee". I consider you to use a different selector.
Suggestion 2:
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false; // Try removing the return
}
The return statement could prevent the event from bubbling, so the lightbox won't receive it. Try to remove it.

Related

Use offset to section for wordpress [duplicate]

I need help with this scrollto code snippet. The problem is that I need to set an offset to account for my menu. Without the offset the header that I scroll to gets buried underneath the menu. See for yourselves here:https://julyfx.mystagingwebsite.com/stanford-mba-msx-essay-topic-analysis-examples/
Would anyone happen to have a suggestion?
Thank you! Leah
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
});
</script>
Should be relatively easy: If your header is for example 85px high, you can just add these 85px to the offset in your code, so this line
scrollTop: target.offset().top
becomes
scrollTop: target.offset().top - 85
that way the window will scroll 85px less than calculated, so the section will not be hidden behind the header.
Just a suggestion have you tried something like:
window.scrollTo({top: (jQuery('#2').position().top-jQuery('header').height()), behavior: 'smooth' })
?
Where #2 would be taken from your this.hash target above?

What is the best way to separate javascript functions?

I have two javascript files that come in conflict with each other. One is to open modals and uses links like open modal, and would then open the modal with id="modal". But the other script is for smooth scroll and it removes the anchor from the url (I'd like to keep that part!) but after adding the smooth scroll script, the modals don't work. any ideas how I can fix it?
modal.js:
$(".modal-wide").on("show.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
$('a[data-toggle="modal"]').bind('click',function(){
$('.modal').modal('hide');
});
scroll.js:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
scroll.js source: https://css-tricks.com/snippets/jquery/smooth-scrolling/
Try adding your specific href tags to the not selector the the smooth scroll function.
$('a[href*="#"]:not([href="#"]):not([href="#modal"])').click(function()
Here is a fiddle showing the smoothscroll only works for the smooth scroll div which should preserve your modal functionality.
https://jsfiddle.net/bryangators/wjgu1vL9/

How do you use "Scroll To" to factor in the fixed nav heights at different media queries?

I have a button in my banner. This button, when clicked, I'd like it to scroll me to the div below the banner. This is the code I am using:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
When I click on it it'll scroll me, but it'll scroll me past the div. What I believe I need to do is factor in the height of the fixed nav and possibly the padding-top of the div I'm scrolling to.
The next thing is, what if I'm in the mobile view now and the height of the nav changes? How do I factor that in?
I suck at Javascript so any help/pointers would be greatly appreciated.
you could do something like this, so you can modify the scroll length
function scrollNav() {
$('a').click(function(){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
};

Link to Anchor on the same page minus some pixels

I integrated smooth scrolling to an anchor to my page. It works great with the code:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Now when i click a link, it scrolls to that position. But since i got a fixed menubar on the top (height: 100px), it overlaps the content a bit.
Can i fix this somehow? like say in the code: scroll to that anchor minus 100px...
i thought it might work with
scrollTop: target.offset(-100).top
is that right?
jQuery's offset is a function to just give you an elements offset. This is not mean to change the offset itself. Just substract the 100px afterwards.
scrollTop: target.offset().top - 100

conflict between click.funcion and bootstraps' carousel buttons

I want to use bootsraps carousel and smooth scrolling with jquery.
Here is how I make smooth scrolling:
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
I assumed this code prevents functions of carousel buttons. How can I modify it in a way that it doesnt affects carousel buttons.
Note that I am complete beginner at web development.
Thanks.
If I understand the question correctly, I think you can do one of two things:
Namespace the smooth scroll click event to avoid conflicts with
the carousel.
E.g. $('a').on('click.scroll', function() {…})
Allow event propagation in the smooth scroll function by removing return false;
Hope that helps!

Categories

Resources