I'm having this script, and it works fine in every browser except firefox.
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
window.onscroll = function () {
"use strict";
if (document.body.scrollTop > 7) {
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
The script doesn't seem to load at all. It's supposed to change the color of my header on scroll, and bring forth a 'back to top' button, but in firefox it does nothing. Any ideas on why this doesn't work?
I've tried updating browser to latest version, start in safe-mode without any add-ons.
Edit: I no longer have any errors in console on my site. The script still won't load, it seems like there is something in the script that firefox doesn't understand?
This code works in IE, Chrome and FF:
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
window.onscroll = function() {
"use strict";
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
if (y > 7) {
console.log('here 1')
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
console.log('here 2')
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
Fiddle: https://jsfiddle.net/zevane/zf8d4u36/
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
Related
Hi all the following script was working fine on chrome and firefox but not in IE11. Any solutions please
window.onscroll = function (i)
{
window.innerHeight + window.scrollY >= document.body.offsetHeight ?
$("#str").removeClass("str_one") : $("#str").addClass("str_one")
};
window.getWindowSize= function(){
if(window.innerWidth!= undefined){
return [window.innerWidth, window.innerHeight];
}
else{
var docBody= document.body,
docEle= document.documentElement;
return [Math.max(docEle.clientWidth, docBody.clientWidth),
Math.max(docEle.clientHeight, docBody.clientHeight)];
}
}
I have a script on my site that works in every browser, except Internet Explorer. Can someone explain why this doesn't work?
var header = document.getElementById('header');
var picturebg = document.getElementsByClassName('picturebg')[0];
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
window.onscroll = function() {
"use strict";
var y = window.scrollY;
if (y > 7) {
header.className = 'header-colored';
arrow.className = 'toTop';
picturebg.className = 'picturebgns';
} else {
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
picturebg.className = 'picturebg';
}
};
The console doesn't give any errors, it just doesn't work. I have another jQuery script that runs just fine.
I've seen the other question here about the same thing, but it didn't help in any way.
Certain properties used in your snippet are not supported by IE.
From the MDN page on scrollY:
For cross-browser compatibility, use window.pageYOffset instead of window.scrollY. Additionally, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties.1
It appears you already have found the check for pageOffset support, so also check if non-standard properties are supported (e.g. CSS1 is compatible):
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
Try this sample, using addEventListener() instead of onscroll.
var header = document.getElementById('header');
var picturebg = document.getElementsByClassName('picturebg')[0];
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
header.addEventListener('scroll', function(event) {
"use strict";
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
console.log('y: ',y);
if (y > 7) {
header.className = 'header-colored';
arrow.className = 'toTop';
picturebg.className = 'picturebgns';
} else {
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
picturebg.className = 'picturebg';
}
});
<div id="header" style="height: 50px; overflow: scroll;">
<img class="picturebg" src="https://www.gravatar.com/avatar/684fa9ff80577cbde88ffbdebafac5b4?s=32&d=identicon&r=PG&f=1" />
<div id="arrow" class="toTop-transparent">↓</div>
</div>
1https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
I use the following script to change the url hash when scrolling to a section of a one page website. This is working perfect in ie and firefox, but not in chrome and opera and i cant figure it out.
(jQuery)(function ($) {
// CHANGE URL ON SCROLL
$(function () {
var currentHash = "#intro"
$(document).scroll(function () {
$('section').each(function () {
var top = window.pageYOffset;
var distance = top - $(this).offset().top;
var hash = $(this).attr('id');
if (distance < 30 && distance > -30 && currentHash != hash) {
window.location.hash = (hash);
currentHash = hash;
}
});
});
});
});
Try using $("body").offset().top instead of window.pageYOffset
I have a code which works in Chrome and Firefox but does not in Safari.
Here is a code:
var menu = document.getElementById("navigation1");
var already_moved = 0;
menu.onmouseover = function moveNavigation(menu) {
if (already_moved == 0) {
document.getElementById("navigation1").style.marginLeft = "0px";
already_moved = 1;
}
};
menu.onmouseleave = function moveBackNavigation(menu) {
if (already_moved == 1) {
//document.getElementById("navigation1").style.marginLeft = "-341px";
closeMenu();
already_moved = 0;
}
};
function closeMenu(){
setTimeout(function f(){
document.getElementById("navigation1").style.marginLeft = "-341px";
already_moved = 0;
}, 2000);
};
This code moves menu to left and back.
Thanks for any ideas - how to make it works in Safari.
I would like to clarify that you did actually enable JavaScript within Safari, right? As shown here.
I have this jquery code:
$(function(){
var $win = $(window);
var $nav = $('.subnav');
var navTop = $('.subnav').length && $('.subnav').offset().top - 38;
var isFixed = 0;
processScroll();
$win.on('scroll', processScroll);
function processScroll() {
console.log('test');
var i, scrollTop = $win.scrollTop();
if (scrollTop >= navTop && !isFixed) {
isFixed = 1;
$nav.addClass('subnav-fixed');
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0;
$nav.removeClass('subnav-fixed');
}
};
})
If I have this url for example:
http://mydomain.com/posts or http://mydomain.com or http://mydomain.com/post?utf8=✓&search=
the code does works fine, but if I have for example:
http://mydomain.com/post?utf8=✓&search=port or http://mydomain.com/post?utf8=✓&search=word
The code does not works fine...
Why if I pass a param for url with my search engine the code does not works fine?
Thank you very much!
Edited
I am using this sunspot solr for my as search engine
http://sunspot.github.com/
I found the fix in this question:
Replicating Bootstraps main nav and subnav
This is the code:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
Thank you