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

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.

Related

Disable body scrolling on element

I created a floating sticky bootstrap panel at the bottom right of the screen. It look like a chat support like intercom. When I'm scrolling on the panel the body will scroll too. And it's really weird when I'm scrolling on mobile because I display the panel in full screen and we can scroll on the body while the panel is in fullscreen.
So I put pieces of code in my JS to enable / disable the body scrollbar :
if (...) {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'scroll');
}
...
It works and it's overkill I think but I don't found better. But I have another problem. If I go on my mobile the chrome address bar will be hide when I scroll on the full screen panel and it's really ugly because the panel will be redrawed every time.
Do you know a better way to disable body scrolling when the cursor is on certain element (a magic css property ?) and disable auto hiding address bar of browsers ?
If you go on intercom with your mobile it's exactly what I want.
if you need to totally enable or disable scroll you must use this way:
if (...) {
$('html, body').css({ overflow: 'hidden', height: '100%' }); // to hide
} else {
$('html, body').css({ overflow: 'auto (or) scroll', height: 'auto' }); // to show
}
you must include html as just only body is not enough. Hope it helps.

Keep IE/FF from processing anchor during URL rewrite?

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);

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.

Jquery scroll until element reaches top

I have arrows in the center of my web pages at the end of sections and I was these to allow users to scroll to the next section on click. I have the following code where the first click works but subsequent clicks do not scroll even though the function is being called each time.
$('.scroll').on('click', function(event) {
alert('scroll');
$('html, body').animate({
scrollTop: $(".scroll").offset().top
}, 1000);
});
Can anyone assist? https://jsfiddle.net/avL459sm/2/
You should use current .scroll element you clicked on.
Look at this fiddle: https://jsfiddle.net/avL459sm/3/

smooth scroll a div to top just below header

How to smoothly scroll a div to top of the page but just below the header.
I have the code in jquery but I need to convert this to pure java-script and should be working in all the latest browsers.
$('html, body').animate({ scrollTop: $("#mydiv"+id).offset().top - 55 }, 699);
I got the java script function to scroll but not the animation.
document.getElementById('mydiv'+id).scrollIntoView(); scrollBy(0, -55);
Can someone help me here , I need to add a small animation to the scroll. Thanks.

Categories