JQuery scrollTop - cross browser compatibility issues - javascript

Yesterday I had an issue with a JQuery scrolling script that worked in Chrome but not in IE and Firefox. I asked this query (JQuery scroll() / scrollTop() not working in IE or Firefox) yesterday which I marked as being the correct answer only to realise today that it doesn't work in Chrome anymore!
Can anyone help me get this working on all modern browsers?
HTML
<div id="dotted-line">
<div id="up-arrow">^up</div>
</div>
JQuery
//get window size values (cross browser compatible)
(function(undefined) {
var container = $("html,body");
$.windowScrollTop = function(newval) {
if( newval === undefined) {
return container.scrollTop();
}
else {
return container.scrollTop(newval);
}
}
})();
//draw dotted line on scroll
$(window).scroll(function(){
if ($.windowScrollTop() > 10) {
var pos = $.windowScrollTop();
$('#dashes').css('height',pos/4);
$('#footer-dot').css('top',pos/4);
} else {
$('#dashes').css('height','6px');
$('#footer-dot').css('top','-150px');
}
});

scrollTop() will return value of only first matched element in set
$('html,body'), that's why it no more works on chrome
I think your best bet would be to use:
var container = $(document.scrollingElement || "html");

Related

countTo script doesn't work in the last version of chrome/firefox

I have a script that counts to a number when i scroll to an element, but it stopped working in Chrome/Firefox for no reason. However it works fine in Edge.
I tried clearing cache and cookies and disabled extensions, but it still doesn't work.
$(function() {
var oTop = $('.stats').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
if (pTop > oTop) {
start_count();
}
});
});
var executed = false; // <= variable to false.
function start_count() {
if (!executed) { // <= make sure it didn't executed before.
$('.stats h1').countTo({
onComplete: function() {
var elementToPrepend = '<span style="margin-left:4px;">+</span>';
$(elementToPrepend).hide().appendTo(this).fadeIn();
}
});
executed = true; // <= the count() function already executed
}
}
.empty-space {
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
<div class="empty-space">
scroll down...
</div>
<div class="stats">
<h1 data-from="200" data-to="2000" data-speed="1750" data-refresh-interval="50">200</h1>
</div>
<div class="empty-space">
</div>
Demo link: https://jsfiddle.net/30w9kbfj
Chrome: Version 61.0.3163.79 (Official Build) (64-bit).
Firefox: Version 55.0.3 (64-bit).
OS: Windows 10 64-bit.
If it didn't work for you try using Edge and let me know, any help is appreciated.
So the issue was that Element.scrollTop got updated in Chrome/Firefox, whatever.
I found a workaround by combining Element.scrollTop and document.scrollingElement.scrollTop to make it cross-browser.
$(document.scrollingElement || "body").scrollTop();
Source.
Document.scrollingElement.
Element.scrollTop.

Mobile Safari, scrollIntoView doesn't work

I have a problem with scroll to element on mobile Safari in iframe (it works on other browsers, including Safari on mac).
I use scrollIntoView. I want to scroll when all content has been rendered. Here is my code:
var readyStateCheckInterval = setInterval(function () {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
$browser.notifyWhenNoOutstandingRequests(function () {
if (cinemaName != null && eventId == null) {
scrollToCinema();
} else {
scrollToEvent();
}
});
}
}, 10);
function scrollToEvent() {
var id = eventId;
var delay = 100;
if (cinemaName != null) {
id = cinemaName + "#" + eventId;
}
if ($rootScope.eventId != null) {
id = $rootScope.cinemaId + "#" + $rootScope.eventId;
}
$timeout(function () {
var el = document.getElementById(id);
if (el != null)
el.scrollIntoView(true);
$rootScope.eventId = null;
}, delay);
}
ScrollIntoView does not work (currently). But you can manually calculate the position of the element and scroll to it. Here is my solution
const element = document.getElementById('myId')
Pass the element to this function
/** Scrolls the element into view
* Manually created since Safari does not support the native one inside an iframe
*/
export const scrollElementIntoView = (element: HTMLElement, behavior?: 'smooth' | 'instant' | 'auto') => {
let scrollTop = window.pageYOffset || element.scrollTop
// Furthermore, if you have for example a header outside the iframe
// you need to factor in its dimensions when calculating the position to scroll to
const headerOutsideIframe = window.parent.document.getElementsByClassName('myHeader')[0].clientHeight
const finalOffset = element.getBoundingClientRect().top + scrollTop + headerOutsideIframe
window.parent.scrollTo({
top: finalOffset,
behavior: behavior || 'auto'
})
}
Pitfalls: Smooth scroll also does not work for ios mobile, but you can complement this code with this polyfill
In my experience scrollIntoView() fails sometimes on my iphone and my ipad and sometimes it works (on my own web sites). I'm not using iframes. This is true both with safari and firefox on the above devices.
The solution that works for me is to pop the element you need to scroll to inside a DIV eg. as the first element in that DIV. Hey presto it then works fine!
Seems like a dodgy implementation by Apple.
Your most likely having the exact same issue I just debugged. Safari automatically resizes the frame to fit it's contents. Therefore, the parent of the Iframe will have the scrollbars in Safari. So calling scrollintoview from within the Iframe itself 'fails'.
If Iframe is cross domain accessing the parent document via window.parent.document will be denied.
If you need a cross domain solution check my answer here.
Basically I use post message to tell the parent page to do the scrolling itself when inside Mobile Safari cross domain.

How to set cursor position at the end of input text in Google Chrome

I'm trying to set the cursor in a text field with a focus function. I've made some research but none of the provided solutions seemed to work in Google Chrome. In Internet Explorer and Firefox this solution is working fine:
The js:
$('#Search').focus(function() {
var SearchInput = $('#Search');
var strLength= SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
The HTML:
<input type="text" id="Search" value="Hello World" />
Here's the link to my jsfiddle.
Is there any way to make this work in Google Chrome too?
It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:
$('#Search').focus(function() {
setTimeout((function(el) {
var strLength = el.value.length;
return function() {
if(el.setSelectionRange !== undefined) {
el.setSelectionRange(strLength, strLength);
} else {
$(el).val(el.value);
}
}}(this)), 0);
});
Try this fiddle: http://jsfiddle.net/esnvh/26/
Edited to 0ms timeout, as #SparK pointed out this is enough to push to end of execution queue.
Updated code
Reference: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
setSelectionRange is not supported on IE, Opera & Safari
I suggest you to make something like this (works on IE, Chrome, Safari, Firefox).
$('#Search').on('mouseup', function() {
var element = $(this)[0];
if (this.setSelectionRange) {
var len = $(this).val().length * 2;
element.setSelectionRange(len, len);
}
else {
$(this).val($(this).val());
$(this).focus();
}
element.scrollTop = 9999;
});
Try this: http://jsfiddle.net/r5UVW/4/
Use mouseup event for that:
$("#Search").mouseup(function () {
this.setSelectionRange(this.value.length, this.value.length);
});
Without jQuery :)
private focusOnLastInput(): void {
const items = this.fields.querySelectorAll('input');
const lastInput = items[items.length - 1];
const valueLength = lastInput.value.length;
lastInput.focus();
lastInput.setSelectionRange(valueLength, valueLength);
}
FYI, currently the number input doesn't support setSelectionRange(), so a quick solution is to simply select the text using .select(). On desktop browsers this highlights the text, on mobiles this moves the cursor straight to the end of the text.

jQuery toggleClass on IE8

I'm trying to change color to a header when it reaches a certain scroll. I use this script with jQuery:
var $document = jQuery(document),
$element = jQuery('#header'),
className = 'red';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 400);
});
That works on every browser, except for IE8. Does IE8 does not support the toggleClass? How can I solve it?
Any help would be appreciated. Thanks
jsFiddle: http://jsfiddle.net/itzuki87/e4XTw/
in IE: http://jsfiddle.net/itzuki87/e4XTw/show/
The problem is $(document) is read different in IE. IE prefers you to use $(window). You'll find the following to be much more cross-browser compatible.
$(function() {
$(window).scroll(function(e) {
$("#header").toggleClass("red", $(this).scrollTop() >= 400);
});
})
Or using your variable type setup:
jQuery(function() {
var $window = jQuery(window),
$element = jQuery("#header"),
className = "red";
$window.scroll(function(e) {
$element.toggleClass(className, jQuery(this).scrollTop() >= 400);
});
})
See working in IE8! and more (Safari, FF, Chrome, Opera)!
Using my smaller HTML

Detecting if a browser is in full screen mode

Is there any way of reliably detecting if a browser is running in full screen mode? I'm pretty sure there isn't any browser API I can query, but has anyone worked it out by inspecting and comparing certain height/width measurements exposed by the DOM? Even if it only works for certain browsers I'm interested in hearing about it.
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provides events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements.
See this hacks.mozilla.org blog post for details.
What about determining the distance between the viewport width and the resolution width and likewise for height. If it is a small amount of pixels (especially for height) it may be at fullscreen.
However, this will never be reliable.
Opera treats full screen as a different CSS media type. They call it Opera Show, and you can control it yourself easily:
#media projection {
/* these rules only apply in full screen mode */
}
Combined with Opera#USB, I've personally found it extremely handy.
You can check if document.fullscreenElement is not null to determine if fullscreen mode is on. You'll need to vendor prefix fullscreenElement accordingly. I would use something like this:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx has a good example for this which I quote below:
document.addEventListener("fullscreenChange", function () {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
The Document read-only property returns the Element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.
if(document.fullscreenElement){
console.log("Fullscreen");
}else{
console.log("Not Fullscreen");
};
Supports in all major browsers.
Firefox 3+ provides a non-standard property on the window object that reports whether the browser is in full screen mode or not: window.fullScreen.
Just thought I'd add my thruppence to save anyone banging their heads. The first answer is excellent if you have complete control over the process, that is you initiate the fullscreen process in code. Useless should anyone do it thissen by hitting F11.
The glimmer of hope on the horizon come in the form of this W3C recommendation http://www.w3.org/TR/view-mode/ which will enable detection of windowed, floating (without chrome), maximized, minimized and fullscreen via media queries (which of course means window.matchMedia and associated).
I've seen signs that it's in the implementation process with -webkit and -moz prefixes but it doesn't appear to be in production yet.
So no, no solutions but hopefully I'll save someone doing a lot of running around before hitting the same wall.
PS *:-moz-full-screen does doo-dah as well, but nice to know about.
While searching high & low I have found only half-solutions.
So it's better to post here a modern, working approach to this issue:
var isAtMaxWidth = (screen.availWidth - window.innerWidth) === 0;
var isAtMaxHeight = (screen.availHeight - window.outerHeight <= 1);
if (!isAtMaxWidth || !isAtMaxHeight) {
alert("Browser NOT maximized!");
}
Tested and working properly in Chrome, Firefox, Edge and Opera* (*with Sidebar unpinned) as of 10.11.2019.
Testing environment (only desktop):
CHROME - Ver. 78.0.3904.97 (64-bit)
FIREFOX - Ver. 70.0.1 (64-bit)
EDGE - Ver. 44.18362.449.0 (64-bit)
OPERA - Ver. 64.0.3417.92 (64-bit)
OS - WIN10 build 18362.449 (64-bit)
Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight
https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight
In Chrome at least:
onkeydown can be used to detect the F11 key being pressed to enter fullscreen.
onkeyup can be used to detect the F11 key being pressed to exit fullscreen.
Use that in conjunction with checking for keyCode == 122
The tricky part would be to tell the keydown/keyup not to execute its code if the other one just did.
Right. Totally late on this one...
As of 25th Nov, 2014 (Time of writing), it is possible for elements to request fullscreen access, and subsequently control entering/exiting fullscreen mode.
MDN Explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Straightforward explanation by David Walsh: http://davidwalsh.name/fullscreen
For Safari on iOS can use:
if (window.navigator.standalone) {
alert("Full Screen");
}
More:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
This works for all new browsers :
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
There is my NOT cross-browser variant:
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
if (!fullscreen) {
setTimeout(function(heightStamp) {
if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
fullscreen = true;
$('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
}
}, 500, $(window).height());
} else {
setTimeout(function(heightStamp) {
if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
fullscreen = false;
$('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
}
}, 500, $(window).height());
}
});
</script>
</body>
</html>
Tested on:
Kubuntu 13.10:
Firefox 27 (<!DOCTYPE html> is required, script correctly works with dual-monitors), Chrome 33, Rekonq - pass
Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pass
IE < 10 - fail
My solution is:
var fullscreenCount = 0;
var changeHandler = function() {
fullscreenCount ++;
if(fullscreenCount % 2 === 0)
{
console.log('fullscreen exit');
}
else
{
console.log('fullscreened');
}
}
document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
This is the solution that I've come to...
I wrote it as an es6 module but the code should be pretty straightforward.
/**
* Created by sam on 9/9/16.
*/
import $ from "jquery"
function isFullScreenWebkit(){
return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
return $("*:-ms-fullscreen").length > 0;
}
function isFullScreen(){
// Fastist way
var result =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if(result) return true;
// A fallback
try{
return isFullScreenMicrosoft();
}catch(ex){}
try{
return isFullScreenMozilla();
}catch(ex){}
try{
return isFullScreenWebkit();
}catch(ex){}
console.log("This browser is not supported, sorry!");
return false;
}
window.isFullScreen = isFullScreen;
export default isFullScreen;
2021, the Fullscreen API is available. It's a Living Standard and is supported by all browsers (except the usual suspects - IE11 and iOS Safari).
// toggle fullscreen
if (!document.fullscreenElement) {
// enter fullscreen
if (docElm.requestFullscreen) {
console.log('entering fullscreen')
docElm.requestFullscreen()
}
} else {
// exit fullscreen
if (document.exitFullscreen) {
console.log('exiting fullscreen')
document.exitFullscreen()
}
}
User window.innerHeight and screen.availHeight. Also the widths.
window.onresize = function(event) {
if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
console.log("This is your MOMENT of fullscreen: " + Date());
}
To detect whether browser is in fullscreen mode:
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
according to caniuse you should be fine for majority of browsers.
This property returns the Element that is currently in fullscreen mode.
document.fullscreenElement; // HTML Element or null
Also, you can subscribe to fullscreen change events with this method
addEventListener('fullscreenchange', (event) => { });
You can combine both to detect the nature of the change
addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
// Your Logic if fullscreen
}
});
More on this here.
You can detect full screen using CSS like this:
#media all and (display-mode: fullscreen) {
// Regular CSS to be applied in full-screen mode
}

Categories