I suddenly had the following stop working:
Html
<a id="scrollTop" href="#">Scroll</a>
jquery
$("#scrollTop").on("click", function(e){
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 'slow');
});
If I check in console I get this message
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
But I haven't changed anything so I don't get it. I did check on other SO questions but it still doesn't work and more importantly I don't understand why it sudden started doing this
I had overflow-x on body in css.
Shouldn't be using overflow on body when doing that (scrollTop). Removed it and page is working
Related
I have a weird problem... I'm just hoping someone will believe me.
I'm currently working with a platform called K2 where in a form I've injected some jQuery. The script is scrolling a list control to a specific element within that list and works without any problems in Chrome and in IE. But not in Edge (v16.16299), unless I have DevTools open.
This is the function. If I put an alert() before animate() I'm getting it, without having DevTools open... So I guess it has to do something with animate or scrollTop?
$(function() { jQuery.fn.scrollTo = function(elem) { $(this).animate({ scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top - 4 }, 500); return this; }; });
scrollTo is then called within a K2-rule):
$("#idOfParent").scrollTo("input[value='aValueImGetting'");
I'm clueless and the closest thing I've found is this, which didn't help me since I can't update Edge due to... stuff: Javascript in Edge only works with devtools open
However, the last comment about this being solved from an update is from 2016, and my Edge version is from mid 2017?
I am using the Polymer 1.0 tools to build a webapp and I am having trouble starting a smooth scroll to a specific div. I have success using the polymer method this.$.div.scrollIntoView() but this just moves to the specific div without scrolling to it. I would like to use the jQuery method scrollTop() but cannot seem to figure where to fire this function and when/how I can attach this function to a paper-fab. Here is what I have so far:
<div align="center">
<paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab>
</div>
And here are my scripts at the bottom of this specific Polymer element:
<script>
Polymer({
is: 'my-view',
scrollToView: function() {
this.$.parallax.scrollIntoView(false);
}
});
</script>
<script type="text/javascript">
function goToByScroll() {
$('html, body').animate({
scrollTop: $("#section_one_cont").offset().top}, 'slow');
}
$("#fab").click(function(e) {
goToByScroll();
})
</script>
So the first 'Polymer' script does in fact work but not in an appealing way, and then if I try to only use the jQuery scripts, they don't do anything.
This is the jQuery CDN I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Any and all help is appreciated, I would really like to figure out how to use non polymer scripts within Polymer elements as that would open up a few more things I would like to achieve with this. Thanks in advance!
I was trying for several hours to find a solution for my own project (preferable one that doesn't require JQuery). Unfortunately all options come with a twist.
scrollIntoView()
With scrollIntoView it is possible to define a behavior which can be set to smooth, instant or auto.
The catch is that the scrollIntoViewOptions which are defined in the scrollIntoView are only supported by Firefox.
element.scrollIntoView({block: "end", behavior: "smooth"});
scroll-behavior
I in person would prefer this solution. As it is just a simple CSS snippet.
However, similar to the above example not all Browser support it and Chrome and Opera only do it when enabling the experimental web platform features.
Which doesn't really help your users.
scroll-behavior: smooth;
I'm having troubles in getting my one-page-layout anchor-links working in Internet Explorer.
I'm using jQuery with the Easing plugin to go to an anchor on my webpage, this works in Chrome, and when I tested it out in Internet Explorer (9), this happened:
Internet Explorer gave a warning on the bottom of the page that an ActiveX-element needs to be enabled, when I click on one of my links then, I get taken to the anchor, but without the animation (and it also comes up wrong, as I'm using a fixed header).
When I activate the ActiveX-element, nothing happens at all when I click on the link.
This is my code:
<script>
$(function(){
$('ul.nav a, .top-logo a').bind('click',function(event){
var $anchor = $(this);
var $section = $($anchor.attr('href'));
if(!$section.length){ return }
$('body').stop().animate({
scrollTop: $section.offset().top-139
}, 1500,'easeInOutExpo');
event.preventDefault();
})
})
</script>
Could anyone help me out with this?
Cheers!
I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
window.onbeforeunload = function () {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.
I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
$('a.lockscrollbar').click(function() {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.
Any ideas?
This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:
$(window).on('load', function(){
$('html body').scrollTop(0);
});
Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)
var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);
Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.
This is the code I use (tho the site I'm working on is still in build stage, but this works):
$(document).ready(function(){
$(window).scroll(function(){
var posY = $(document).scrollTop();
$('#trigger').click(function(){
if($.browser.webkit){
$('body').stop().animate({scrollTop:0},'slow');
}else{
$('html').stop().animate({scrollTop:0},'slow');
}
});
});
});
Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).
I'm having a document.body is null error in my javascript because I use:
$(window).width()
as value to assign to a variable in my
$(document).ready(function(){});
I would be very grateful to anyone who could help me with this.
Kind regards
edit: sorry if this all was unclear. I have a demo at: http://www.wpmonk.com/demo/hypowired
at first the theme will load but then becomes white (because of the error) but when you reload you can see the whole theme because then he knows the value for $(window).width()
I'm using this code to center the layout (not possible with css because the left needs to have a width aswell.)
function positioneerElement(){
$breedte = (document.body.clientWidth - 1124) / 2;
$('#bg_left').css({
'width': $breedte
});
$('.container').css({
'margin-left': $breedte
});
}
I call function positioneerElement() in the load function.
Sorry if this wasn't clear I though it wasn't necessary to put the demo here for this nor the code.
However I would like to thank the people who are trying to help!
I agree with outis - we need some more code.
That said:
Are you sure you're doing all your work inside the $(document).ready function?
Do you definitely have a correctly formed (and closed) body tag and valid xhtml?
Does this happen on all browsers?
One suggestion:
Does the problem persist if you put the positioneerElement function in the $(document).ready function as well? I'm wondering whether the browser evaluates document.body prior to the document loading.
$(document).ready(function() {
function positioneerElement(){
$breedte = (document.body.clientWidth - 1124) / 2;
$('#bg_left').css({
'width': $breedte
});
$('.container').css({
'margin-left': $breedte
});
// your other code, including
positioneerElement();
});
Make sure you only call $(window).width() after you have included the <body> tag (eg. in the ready callback), and/or use a Standards Mode doctype declaration. You should be doing that anyway: Quirks Mode sucks.
The issue is, to read the viewport size in Quirks Mode jQuery must look at document.body.clientWidth instead of document.documentElement.clientWidth. If you haven't started your <body> yet, there is not document.body node present.
You have to include jquery.js, and not jquery.min.js
It looks like some bug in it
This works for me
Well, just based on the information you have given me it might be that the body has not loaded properly yet. Please see here for more detials: http://www.coderanch.com/t/122834/HTML-JavaScript/document-body-null-or-not#606782
I would say more but I too agree with outis that you need to post some more code for us to debug.