Keep IE/FF from processing anchor during URL rewrite? - javascript

Sorry for the title, wasn't sure how to word this.
I have a nav menu at the top of my page. Clicking on each link will scroll to the targeted element. It also appends #sectionname to the URL. Everything works great in Chrome. The problem I'm having is that the menu itself is static, so when I initiate the scroll I'm offsetting the menu height. Again, works great in Chrome, but in IE and FF it scrolls to where I want it then immediately jumps back to the top of the element minus the offset.
Here is the code:
$('.nav').on('click', function (e) {
e.preventDefault();
var target = $(this).data('target');
$('html, body').stop().animate({
scrollTop: $(target).offset().top - 77 //should actually be 78 (height of the header, but IE has a 1px discrepancy.
}, 800, 'swing', function () {
window.location.hash = target; //causes IE and FF to jump back to the original top without the header offset.
});
});
How can I keep IE and FF from immediately processing the new URL? Or is there a better way to do this?

You can use history.replaceState() to modify address string see history.replaceState() example?
history.replaceState({}, target.slice(1), target);

Related

When I hide a div it pushes the div below it up

I am trying to make a scroll down animation where the user clicks a button is scrolls down to a div and deletes the two divs above it. However, my problem is that the animation works fine on chrome but on firefox and safari the button actually make you scroll past the beginning of the div.
My desired output is https://wearebarbarian.com/
My JS:
$(document).on('click', 'a[href^="#index"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 100
}, 1200);
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
$('body').css('overflowY', 'scroll');
$('#home-mobile-nav').css('position', 'fixed');
$('#home').css('margin-top', '0');
});
I think the problem is:
$('.introsection').delay(1300).hide(0);
$('#swipe-down').delay(1300).hide(0);
is there a better way to hide the divs.
the codepen to my problem is https://codepen.io/mrsalami/pen/GBRmgx
Use -webkit-, -moz- to the CSS to make the CSS specific for browser.
-webkit- is for Chrome and Safari and -moz- is for Firefox.
Only by defining specific CSS related to margin and padding, the design of the content can be maintain same through out the browser.

Scroll to specific section, smooth at first but then jumps/shifts down the screen

I'm currently trying to get my navigation bar (fixed at the top of the screen) to work better. Currently, if you press on a link within the nav bar, it will go to a certain section with this code:
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
However, it will go to that section but then shift down on the screen and cover content. But if I press the same section again, it will go to the correct spot. I need it to go to the correct spot on the first click.
When I take out the "- 35" part within animate(), it doesn't shift down and goes smoothly, but I need the "- 35" part to offset the nav bar or else it will cover content every time. What is causing this jumping/shifting? Any advice or information that would be helpful? Thanks!
Note: I also have this code, but I'm not sure if it's part of the issue:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed');
}
});
UPDATE: I fixed my issue by reading more into the details of jQuery's animate. The parameter "complete" (a function to call once the animation is complete, called once per matched element) that I was using was not necessary, so I removed it from my code.
You need to avoid setting the hash after the animation is completed. As you use an offset for the animation (the -45) the animation will run smoothly to the given coordinates, and then it will jump to the hash position when you set the location.hash (after the animation is completed). The solution is to remove the hash from the location (the preventDefault() does that), and don’t set it again after animation is completed.
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing');
});

How can i make smooth scrolling in a absolut element with Jquery?

Hi i added smooth scrolling in my website, but apparently it does just work in one pagers. How can i fix it,so it works in a absolut position element, which is scrollable? Link from my website and the javascript file.
$('a[href^=#]').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});
Ok i solved my problem. I just used a plugin called scrollTo:
https://github.com/flesler/jquery.scrollTo
After all the solution was pretty simple.

Sidebar offset using .affix and a fixed navbar

So I'm working on a website that has a fixed navbar:
http://abnetworksa.rewind9.com/servicios/infraestructura/
Besides the fixed navbar, there's a "sticky" sidebar. This sidebar links are anchors that redirect the user to specific content in the same page.
Everything seems to work properly. However, when clicking one of those sidebar links, the targeted content title is hidden under the fixed navbar. Is there a way I could set up and offset for this sidebar links?
I tried
var offset = 380;
$('.sidebar-nav li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, +offset);
});
But it does not work seems it seems to start doing some weird calculations from bottom to top.
Any help?
Thanks a lot!
The header is not fixed. I see you are using bootstrap so you can use navbar-fixed-top class to make it sticky. You need to change the class on your header tag from navbar-static-top to navbar-fixed-top.
To answer the second part of your question,Since you are using bootstrap in your project this answer https://stackoverflow.com/a/14805098/3070770 will help you.
$(".sidebar-nav li a").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
var heightOfNavigationMenu = $('.navbar').height
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top - heightOfNavigationMenu
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
Note the variable heightOfNavigationMenu. Also ScrollIntoView is not supported in some of the browsers.

event.preventDefault() Causing :hover pseudo class to stick

I am trying to implement a document navigation, similar to that on the Bootstrap site for their documentation. I've got it working on the whole, but there is one little aspect of it which is bugging me.
Like on Bootstrap, I am using a combination of the affix.js and scrollSpy.js, and this is working. See the following
JSFiddle.
$('#doc_nav').on( "click", "a", function( e ){
// e.preventDefault();
var target = this.hash;
var $target = $(target);
var offset = $target.offset().top;
console.log(offset);
offset = offset - 100;
console.log(offset);
$('html, body').scrollTop( offset );
});
With the e.preventDefault() commented out, the behavior of the navigation menu is as expected. Scrolling down the window results in the displayed div being highlighted on the menu. Clicking on an item in the menu list, takes you directly to corresponding div on the page and when you then scroll away from that section on the page, the menu updates accordingly.
On my 'real' page, I have a fixed header of height 100px. So currently, when I click on a menu link, the pages jumps to the required section and places it at the top of the page where the header obscures it slightly. The scrollTop part of the code above doesn't seem to work unless I use e.preventDefault(). If you uncomment this line in the fiddle and run it again, click on 'Heading 3' link on the menu, and you will see that it now puts the Heading 3 content in the page offset by 100px from the top. Perfect.
However, now scroll back up the page towards the top. You will see that the 'Heading 3' list item, remains in its :hover state, even when the mouse is no where near it. Its as though the e.preventDefault() has prevented the browser from detecting that the mouse is no longer hovering on the item.
Mouseclicking anywhere outside the browser window, corrects the problem.
Can anyone shed any light on what I'm doing wrong here? How can I prevent the default behavior of the anchor click so I can control the page scroll placement, without stopping the correct CSS painting in the process?
The problem arises because I am preventing the browsers default behavior, using e.preventDefault(), as I want to control the scroll to the anchored element.
I've tested this in Firefox and IE10.
The issue is not the :hover state, but the :focus state.
When you click on a link, that link gains focus so you apply the :focus styling (that is the same as the :hover styling in your code). By preventing the default behavior, that link stays active and doesn't lose the focus.
One quick solution would be to unfocus/blur the element by using: $(this).blur().
In your code it would look like this:
$('#doc_nav').on( "click", "a", function( e ){
e.preventDefault();
var target = this.hash;
var $target = $(target);
var offset = $target.offset().top;
console.log(offset);
offset = offset - 100;
console.log(offset);
$(this).blur();
$('html, body').scrollTop( offset );
});
You can see a demo here: https://jsfiddle.net/z32rpe3b/30/
Why did it work fine with e.preventDefault() but incorrectly without it?
The answer to this has to do with the order of execution. The onclick event happens before the href redirection happens in the browser:
Without the e.preventDefault(), the code is executed, and the browser scrolled correctly to the target offset - 100 position (in the onclick), but then it executed the link href and scrolled to the target offset. It just happens so fast that it seems that it goes directly to the target position.
With e.preventDefault(), the code is executed (scrolling to offset - 100), and the browser doesn't execute the href action (so it stays at offset - 100).

Categories