We Keep Coding

Sticky menu jumps to fixed position too early on iOS Safari and Chrome

I am losing my mind with this seemingly simple code.
I have created a sticky menu for a few sites and they all share the same problem. On iOS devices, at least the iPhone 6 with up to date iOS, the menu jumps into its fixed position too early. It's as if iOS miscalculates the offset for the element and runs the function too early. Though for the life of me I can't figure out how or why. On desktop it works fine. On Android it works fine. Please help!! The site is [DreaD Illustrations][1]. I have tried everything I can think of and find on the internet. Also, I noticed, it calculates incorrectly on initial load, but when you scroll down and scroll back up it seems to work. Help! The code is below.
var navBar = jQuery("nav.site-navigation.main-navigation.primary.mobile-navigation");
var topofNav = navBar.offset().top;
stickyDiv = "being-sticky";
mahMain = jQuery('#main').outerWidth();
jQuery(window).load(function(){
jQuery(window).on('scroll', function() {
if (jQuery(document).scrollTop() > topofNav) {
navBar.addClass(stickyDiv);
navBar.outerWidth(mahMain);
} else {
navBar.removeClass(stickyDiv);
}
});
});
.being-sticky {
position:fixed;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Thanks everyone for your help!
So it was a simple fix for me for safari. I created a variable of whenToScroll and set it differently if it was safari or another browser! That seemed to fix it! Though I tried the safari setting for chrome and no go.
if (jQuery.browser.safari)
var whenToScroll = jQuery("div.hgroup.full-container").outerHeight();
else
var whenToScroll = navBar.offset().top;

Have you tried setting a timeout and seeing how that displays on IOS? If it's a timing thing that's being read differently, you can use navigator.userAgent to remove the class a bit later for IOS devices only.
if(/iPhone|iPad|iPod/.test(navigator.userAgent)) { //IOS browsers
setTimeout(function(){
navBar.removeClass(stickyDiv);
}, 7000); // however many milliseconds you need it to wait for
}else{
navBar.removeClass(stickyDiv);
}

Firefox mobile resizes screen when scrolling to bottom from JavaScript

there is a very interesting situation I am facing right now that I would like to ask about, I have a web site which is called from any device (Tablet, smarthphone, Laptop, etc.) and I have a problem only with Firefox on the smarthphones, here is the scenario:
There is a page that has a text box at the end, when the text box is focused the keyboard comes out (I mean in the smarthphones) and takes part of the screen, for the user to see the textbox and what is he writing I execute a javascript function in the onfocus event of the textbox that scrolls to the end of the page, I have tried with two different aproaches having the same result:
function scrollToMe(tBox) {
var element = document.getElementById(tBox);
setTimeout(function () { element.scrollIntoView(true); }, 600);
return false;}
Here tBox is the textbox, I just scroll down to him after 600 miliseconds.
function scrollInPage() {
var element = document.getElementById('theDIV');
setTimeout(function () { element.scrollTop = element.scrollHeight; }, 600);
return false;}
Here I apply scroll to the general div.
Both functions work perfect in all mobile browsers I have tested except in Firefox, the div mentioned above has nothing special, just has the overflow:scroll; property in the css, here is how it looks the page after the scroll down function in all other mobile browsers I have tested:
The page moves to the end, this works in Chrome, Opera Mini, Safari, Dolphin, Default Android Browser, Web Browser, Chrome Dev and Ghostery.
But this is what Mozilla does after the scroll function is executed:
It just resizes the div, only Firefox in the Smarthphones does it and after more than 8 hours trying to solve it and searching in Internet any clue on how to do it I would like to ask if someone has an idea of what could be the issue.
I am testing with a galaxy Note 4, a Galaxy S4 and Galaxy S3 Mini (Firefox 48 for all of them), it does the same in all of them.
Many thanks in advance for any answer and comment.

Detect if browser has smooth scrolling feature already

I have added smooth scrolling to a site of mine using this piece of JavaScript when clicking on hash links.
$('a[href*=#]')
.click(onAnchorClick);
function onAnchorClick(event)
{
return ! scrollTo(this.hash);
}
function scrollTo(target)
{
var e = $(target);
var y = e.exists() ? e.offset().top : 0;
if(y == 0 && target != '#top')
return false;
if(Math.max($('html').scrollTop(), $('body').scrollTop()) != y)
$('html,body')
.animate({scrollTop: y}, 500, function() { location.hash = target; } );
else
location.hash = target;
return true;
}
$.fn.exists = function()
{
return this.length > 0 ? this : false;
}
Works fantastic in desktop browsers and looks to work fine on at least iOS devices as well. However, on my WinPhone 8 device it was garbage. Scrolling was a mess and didn't even end up where it should. So I decided to not enable it there through an if( ! /Windows Phone 8\.0/.test(navigator.userAgent)).
Now it works well, and seems the browser on the WinPhone actually is smooth scrolling by default, which is great.
But it is of course a bit dumb to have a smooth scroll script active if the browser already does this by default. Is there a way I can detect if a browser already has a smooth scrolling feature enabled?

I managed to solve it this way:
<style>
body {
scroll-behavior: smooth;
}
</style>
<script>
if(getComputedStyle(document.body).scrollBehavior === 'smooth'){
console.log('This browser supports scrollBehavior smooth');
}
</script>

Yes and no. Unfortunately there are no standards for these types of things. However there are work arounds, one of which you are already doing: browser sniffing.
Basically, that's about as advanced as this kind of detection goes because some browsers don't yet even support smooth scrolling officially or without experimental developments (like Chromium). And standards won't be set unless the majority are on the same page. Not only that but it also comes down to GPU hardware abilities as some devices and computers struggle with smooth scrolling and animations. So technically speaking, even if a browser did support smooth scrolling, who's to say the device or desktop running it can render fast enough to even display the effect. That's another bottle neck.
I believe someday in the future there will be more of a need for browser feature specifications such as this to better improve user interactions, but until that day you're doing it right.

Several years later, there now is a CSS property in the Working Draft for this:
scroll-behavior 🎉
So instead of the Javascript in my original question, or similar, we can just do this:
html {
scroll-behavior: smooth;
}
#media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Right now, it seems to work for all browsers except IE and Edge, and since this is just a nice-to-have feature that makes things look a bit nicer... Yeah, I don't really care about IE or Edge. 😛👍

Full Screen Video HTML 5 Internet Explorer

I'm creating my own HTML 5 Browser Player. All controls work apart form getting the full screen working in IE 10, Chrome, Safari and Firefox work great.
My JavaScript skills aren't the best so would be great if some could explain things in a simple way for me that would be great.
I've read on some website that IE doesn't support Full Screen, if this is the case why can I go Full Screen via the browser player controls on IE10? (hate Microsoft so crap and behind on everything!)
Would appreciate and help and suggestions! thanks in advance!
This is what I have so far for my full screen function:
function toggleFullScreen() {
if(vid.requestFullScreen) {
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
}
}

IE hasn't supported the Full Screen API, until version 11.
However, if you're looking to produce a similar effect in IE10<=, you could toggle an element between position: static and position: fixed. While the element has fixed positioning you could give it width: 100%; height: 100%.
You can see this is how it's done on YouTube's HTML5 player for IE.
Additionally, it appears you are able to send the F11 keypress from JavaScript which brings the browser window into a full screen viewing mode.
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
With these two method's combined, I think this is the closest IE can get in emulating the Full Screen API.

I've read on some website that IE doesn't support Full Screen
It won't support the full screen api until version 11.
if this is the case why can I go Full Screen via the browser player controls on IE10?
Because they are native controls; they don't use the full screen API.

IE 11 does support it, works well, better than Chrome in some cases, there is a bug with iframes however:
https://connect.microsoft.com/IE/feedback/details/814527/ie11-iframes-body-offsetwidth-incorrect-when-iframe-is-in-full-screen-mode#tabs

Note that IE11 also needs a vendor prefix. msRequestFullscreen()
So for full cross browser functionality you need something like this:
var video = document.getElementById('videoID');
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}

jQuery: Show "back-to-top" link on scroll? not working on windows?

i have the following situation. I'm having a really long webpage where I want to have a little "back to top link" at the side of the page (absolute positioned). I want to show the link only if the user is scrolling and the scroll position is larger than 100px from the top. Moreover I'm constrain the behaviour only to screens larger than 300px and Non-iOS devices.
This is my code:
//Back to top
$(window).scroll(function () {
if ( $(window).width() > 300 || !isiOS ) {
if ($('body').scrollTop() > 100) {
$('#back-to-top').fadeIn('fast');
} else {
$('#back-to-top').fadeOut('fast');
}
}
});
$(window).scroll();
The problem is it works fine on my mac. However it does not work on Windows machines. It works in Chrome on windows, but doesn't in any IE version, nor Firefox, nor anything else. It works in every major browser on my mac.
Any idea what could cause that or why it's buggy?
Thank you for your help!

Try $(window).scrollTop() instead of $('body').scrollTop()