I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.
Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.
The javascript that I'm using is this:
$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
$(this).click(function(e) {
e.preventDefault();
var targetOffset = $($(this).attr('href')).offset().top;
$('body').animate({scrollTop: targetOffset - 70}, 700);
});
}
});
What am I missing/doing wrong?
You can take a look at the actual site in question here.
Change your scrollTop animation to
$('body,html').animate({scrollTop: targetOffset - 70}, 700);
That should fix it in FF an also still work in Chrome.
update
Just in case you're asking why: I don't know for sure, so this is what I guess is happening: if you compare the HTML and BODY in FF and Chrome, in FF the size of the HTML-Element is as big as your rendered document. In Chrome your HTML-Element has the size of the Browser-Window and your BODY-Element is as big as your Page rendered. They render differently. FF scrolls the HTML inside its Window and Chrome scrolls the BODY inside the HTML.
As pointed out in other threads / comments (here for expample) this solution makes two calls. So you could put an if before scrolling or use document. The latter didn't do the trick for me, because it scrolled where I wanted it to scroll to, but didn't animate. Without if I personally just find it nicer to read and it shouldn't be such a big thing to call animate twice in that case. So the better solution would be detecting the browser and using either $('html') or $('body').
Related
Now this really has me stumped. I'm not going to use a codepen because I simply can't recreate it until I identify the problem. Currently, I'm using Google Chrome. The problem doesn't exist in Modzilla Firefox, Microsoft Edge, Internet Explorer, or Opera.
It's an issue with usually a simple fix. The page scrolls horizontally off the page canvas. I believe it may have something to do with the fact that my laptop I'm viewing the page on has a touchscreen, but most likely not.
I've tried a number of hacks to fix it, including:
1) Tried to put set the max-width of the browser to the innerWidth with javascript.
2) Tried to add overflow:hidden to the CSS of the outer container of my off-canvas menu.
3) I even used the Chrome Dev Tools to delete each element at the time to try and identify the problem. Until EVERY visible element was gone, the problem remained.
4) Set overflow-x:hidden on html and body
5) Also tried to add the following javascript try and to debug:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
6) Tried all of these at the same time.
Therefore, I'm completely stumped.
Here's the link to the site: The Problem
yes, there are similar questions, where scrollTo doesn't work on Ipad, but I didn't yet find the solution, that works for that little snippet down there. So allow me to ask it again.
<body>...pages...more pages...even more pages...
<span onclick="var top = $('body').offset().top; $('html,body').animate({scrollTop: top}, 1000);">Scroll to top</span>
<body>
This works perfectly for Desktop, but not for Ipad.
BTW: I'm using that code snippet on a bigger page, so if this code works for you (on a minimal page), that would be helpful to know, too.
For Ipad, it waits some time, then jumps directly to the top, instead of scrolling smoothly to the top. What am I doing wrong?
UPDATE: We have a fixed element on our page, so the currently available solutions won't work.
Thanks,
Bernhard
So i made a website, basically first time messing around with jquery.
I have a div main-container which contains all the content. This main-slider slides in the window. i'd set it up by doing this in the document.ready function:
<script>
$("#main-slider").hide().animate({left:'+=2000', opacity:'0.0'},0);
$("#main-slider").fadeIn(100).animate({left:'-60', opacity:'1.0'},1000);
$("#inhoud").delay(100).animate({left:'-30', opacity:'1.0'},300);
$("#inhoud").delay(20).animate({left:'-5', opacity:'1.0'},300);
$("#main-slider").animate({left:'-40', opacity:'1.0'},150);
</script>
On normal browsers (tested with safari, chrome and firefox) it looks like how i want to but on mobile devices it starts zoomed out since the main-slider starts animating from +=2000;
Is there a way to hide the div when it's not inside the viewport ?
I made a jsFiddle with a basic concept of what i have, unfortunately it doesn't seem to work tho ;p sorry.
JSFiddle
A concept version of the website : http://paparashie.nl/woonkans
I'm not sure I am understanding correctly, but have you tried with css?
html {
overflow: hidden;
}
Apply this to html or body...
JSfiddle is not working, can you attach screenshot to help us see the problem
I have a jQuery onclick menu that works great in IE9+, Chrome and Firefox. However in IE8 it opens extremely slowly. It takes approximately 10 seconds for the menu to show, and none of the animations play, the menu just appears.
The menu uses the latest version of jQuery (v1.10.2) and uses slide and animate only to open and close the different parts of the menu. I have tried googling various combinations of slow jQuery, slow loading menus and slow animations for IE8 and jQuery that I can, and I cannot even find anything remotely like the issue I'm having.
You can see the problem by going to my website here. Visit it with IE8 and you will notice the really slow speeds when you click on Test Category 1 or 2.
Has anyone come across this kind of issue before? Does anyone know what causes it and the solution to get it working fine?
Edit
I have noticed that it's not just affecting the menu, but also the carousel. If you look at the animations they are not sliding either, however in IE9 + they do slide. I'm not sure if the two are linked but it seems odd that it's both jQuery effects that are being affected.
Edit 2
After some more testing I have noticed that if the bottom of the menu falls over the Tabs below the carousel then the bit over the tabs shows straight away, if you however over the tabs. Same happens when you close the menu. Hover over the tabs and the bit of the menu drawn there goes away.
I then watched and noticed that the menu shows and disappears when the carousel changes. It does seem to be a redraw issue, however the code I've been trying to make it paint upon completion doesn't seem to be working. This is the code I got from another answer here (slightly modified to work with jQuery elements thanks to an answer below).
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
//var elementOnShow = document.getElementById(id);
var elementOnShow = $(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
I think it might be a case of either finding the correct function to redraw, or running that function on the correct element. I currently run that on the clicked element, which may not be the correct one. I have tried running that function on various elements, including the main UL, the element clicked, the element, opened and the element opened's parent. No luck with any of them.
JSFiddle: As requested here is a JSFiddle of the issue, however for me that won't even work in IE10. It works in Chrome fine.
EDIT 3:
I have stripped away everything except the bare essentials and put it in a test file. You can veiw it on my website here. I am getting no errors in IE console, nor in any other console. It is still giving the same issue, where the menu isn't drawn. However because there is no carousel behind it to force the redraw it never shows on this test site.
All the redraw scripts I've tried so far have failed. How can I get this working?
I don't know if this is related or not, but I noticed that there's an error that occurs each time you click on those menus.
Uncaught TypeError: Cannot read property 'offsetTop' of null
It occurs in the "FlushThis" function (from jquery.fluid-menu.js) which is apparently some kind of hack to support IE. If you look at the code, it attempts to read the "offsetTop" property of an element and then simply throws away the result. Perhaps this is a trick on IE to make it run some native code that will maybe repaint/relayout the page once the menu has been opened? It looks like a jqueryified element ($this) is being passed to that function instead of the ID of the element, which I presume is causing the look up to fail. You may want to try to get that code executing properly and see if it resolves your problem.
Too many script issues to look into the real problem.
SCRIPT1028: Expected identifier, string or number
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu'
main.js, line 3 character 2
The script issues arise when the menu is clicked.
Chrome, and Mozilla tolerate errors to the maximum without letting user know that there is a script error. But IE is not so kind hearted. IE 8 & - are natively slow in running scripts many animation effects wont work in them since the properties like opacity are ignored by it, unless you have fall back options.
Maybe the slideshow overlays the menu while animation is playing.
I could just set my ie10 to ie8 mode and saw the the layers are not in best order for display.
Did you try to set the z-index on the menu?
Perhaps you try hide the the carousel temporary and check if the menu opens well then.
Is there a specific reason you're using "document.getElementById" rather than a JQuery selector here? It's not finding document.getElementById(id) and it's throwing an error on this line: tmp = elementOnShow.parentNode.offsetTop + 'px';:
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
var elementOnShow = document.getElementById(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
Maybe change var elementOnShow = document.getElementById(id); to var elementOnShow = $("#" + id);?
Also, why are you adding 'px' to the end for IE? Try commenting that out so it just says tmp = elementOnShow.offsetTop and see if that makes a difference.
The error is probably just disabling most of the rest of the Javascript on that page.
One other thing I've found: sometimes "slideUp" and "slideDown" and other "built-in" animation methods seem to be buggy or crunchy in IE (like, they animate most of the way, then they stop for a second near the end of the animation, and suddenly blink to the end).
I always use the JQuery animate() function for everything. It's a bit more of a pain to write, but you can specify outerHeight/outerWidth values that take padding into account and things like that. Try replacing your functions with animate() and see if that helps!
I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?
You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.
There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.