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)];
}
}
Related
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'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
In chrome & opera no working function scrollto.
In firefox working. I don't know in what a problem. Thanks for help.
function scroll_to_word(){
var pos = $('.content .selectHighlight').position();
$.scrollTo(".selectHighlight", 500, {offset:-50});
}
$('#search_text').bind('keyup oncnange', function() {
$('.content').removeHighlight();
txt = $('#search_text').val();
if (txt == '') return;
$('.content').highlight(txt);
search_count = $('.content span.highlight').size() - 1;
count_text = search_count + 1;
search_number = 0;
$('.content').selectHighlight(search_number);
if ( search_count >= 0 ) scroll_to_word();
$('#count').html('Найдено: <b>'+count_text+'</b>');
});
$('#clear_button').click(function() {
$('.content').removeHighlight();
$('#search_text').val('поиск по странице');
$('#count').html('');
});
You have a typo here:
keyup oncnange
should be:
keyup onchange
I have the following function being called via onmouseover on an
function showTooltip(tip, el, evt) {
if (document.layers) {
if (!el.tip) {
el.tip = new Layer(200);
el.tip.document.open();
el.tip.document.write(tip);
el.tip.document.close();
el.onclick = function (evt) { this.tip.visibility = 'hide'; };
el.onmouseout = function (evt) { this.tip.visibility = 'hide'; };
}
el.tip.left = evt.pageX;
el.tip.top = evt.pageY;
el.tip.visibility = 'show';
}
else if (document.all) {
if (!el.tip) {
document.body.insertAdjacentHTML('beforeEnd', '<DIV ID="tip' + tc + '" CLASS="tooltip">' + tip + '<\/DIV>');
el.tip = document.all['tip' + tc++];
el.onclick = function (evt) { this.tip.style.visibility = 'hidden'; };
el.onmouseout = function (evt) { this.tip.style.visibility = 'hidden'; };
}
el.tip.style.pixelLeft = event.clientX + document.body.scrollLeft - 200
el.tip.style.pixelTop = event.clientY + document.body.scrollTop + 10
el.tip.style.visibility = 'visible';
}
}
the call looks like;
<img id="ContentPlaceHolder1_DocumentList1_dg_imgNotes_0" onmouseover="javascript:showTooltip('<b>Pages:</b> 1<br><b>Date:</b> 8/7/2014<br><b>Rep ID:</b> 789',this,event);" src="/applications/Images/icons/no-a.bmp" align="absmiddle" style="border-width:0px;">
with the event of;
onmouseover="javascript:showTooltip('<b>Pages:</b> 1<br><b>Date:</b> 8/7/2014<br><b>Rep ID:</b> 789',this,event);"
this code has been working without a hitch for upwards of a year and still functions correctly in Firefox and IE, but not is Chrome Version 38.0.2125.111 m. I am no expert, but I feel like the declarations are all fine and the information being passed it alright, but when it hits the function it just steps over the if(document.layers) and the else if(document.all) when debugging, however, when in IE and debugging it steps into the else if statement just find and renders the tooltip for the exact same site.
any help would be appreciated.
document.all and document.layers is obsolete. They are no longer supported by chrome.
I wrote a small plugin for jQuery for a simple parallax scrolling effect. It's working in all browsers except for < ie8.
$.fn.extend({
//plugin name - parallax ( simpel )
parallax: function(options) {
var defaults = {
speed: 3
};
var options = $.extend(defaults, options);
var o = options;
var obj = $(this);
var s = $(window).scrollTop() / o.speed;
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
obj.css({"top" : -s + "px"});
}else{
obj.css("-webkit-transform", "translateY(-" + s + "px)");
obj.css("-moz-transform", "translateY(-" + s + "px)");
obj.css("-ms-transform", "translateY(-" + s + "px)");
}
}
});
In my main jQuery file i'm using the code like this:
$(window).scroll(function(){
$('.headMenu').parallax({speed: 6});
$('.header_img').parallax();
});
For some reason 's' Always stays 0. Can't find why. I think the $(window).scroll is not working in IE8.
I have had bad luck with scrollTop() in IE in the past, not sure why, though. If it fits your needs, try using window.scrollTo(0, 0); worked for me always, in all IEs :-)