I'm attempting to work with Javascript through a cross browser platform that is required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
The goal is to have items that dynamically hide or show depending on the selection of other items. Normally I would just toggle between display:none and display:block but for the work of another developer, I can use the display:none to hide the field, but switching to display:block screws up the layout. The solution is to simply rip out either the display setting in the style, or tear out the style altogether. Unfortunately, I ran into the library problem
Firefox supports everything I've tried so far
IE8 & 6 didn't support getElementById().style.removeProperty('display')
IE6 doesn't support getElementById().removeAttribute('style')
Below is my code as it currently is, working in IE8 and FF...but it is required to also get it working in IE6.
function displayPrevLPQ(bShow) {
if (bShow) {
document.getElementById('prevLPQ').removeAttribute('style');
} else {
document.getElementById('prevLPQ').style.display = 'none';
}
}
function displayBusUnitSub() {
var buVal = document.getElementById('BusinessUnitID').value;
document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default");
document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default");
document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default");
switch (buVal) {
case '11':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').removeAttribute('style');
document.getElementById('buSub2').style.display = 'none';
break;
case '1':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').removeAttribute('style');
break;
default:
document.getElementById('buSub0').removeAttribute('style');
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').style.display = 'none';
break;
}
}
So, the question is...how can I tear out the Style or display properties in a way that will work across all three browsers?
Thanks in Advance.
Use a javascript library like jQuery that already has all the browser compatibility issues sorted and abstracted away.
From the docs it appears to support everything you need:
jQuery supports these browsers:
* Firefox 2.0+
* Internet Explorer 6+
* Safari 3+
* Opera 9+
* Chrome 1+
As for the specific jQuery function to to this - look at .toggle().
...required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
jQuery, Prototype, and YUI all support those three browsers (and more). I expect many of these others do as well. Closure doesn't (at least, it doesn't claim to and we know Google dropped IE6 support in most of its products), but it's the first major library I know of to wave bye-bye to IE6.
Use a class instead. If you only use one class on your element, it's as simple as this:
CSS:
*.hidden {
display: none;
}
JavaScript:
function show(el) {
el.className = "";
}
function hide(el) {
el.className = "hidden";
}
show(document.getElementById("foo"));
you can still toggle between display:block/none;
target the IEs via conditional comments or IE specific hacks to fix your layout issues.
so lets say that you have width set on id uSub0 of 200px. and its breaking in IEs, you need it to be 190px for them. heres how you can target them. example:
uSub0{width:200px}
/** ie6 only **/
uSub0{width:200px; *width:190px}
/** ie7 only **/
uSub0{width:200px}
:first-child+html #uSub0{width:190px}
/* ie7 only **/
uSub0{width:200px}
+html #uSub0{width:190px}
/* ie6, ie7, ie8 **/
uSub0{width:200px; width: 190px\9}
/** ie7, ie8 **/
uSub0{width:200px; width/*/: 190px}
Related
This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?
I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>
I have written a peace of code to get the event based on touch and non-touch. Its working all other browsers and devices, but Firefox. Default FF return the true.
var thumbsEvent, isTouch = Modernizr.touch; // detect the touch
if(isTouch){
thumbsEvent = 'click';//on touch surface, click
}
else {
thumbsEvent = 'mouseover';//on non touch surface, mouseover
}
Is there a way to manage this issue.
Example fiddle
On behalf of Modernizr - We're really sorry about this.
Modernizr.touch has been renamed Modernizr.touchevents in the yet-to-be-released version 3.0, as it is a far more accurate description of the detect. Basically, all this detect is doing is checking for the existence of touch events, and returning true if they are found. Desktop chrome does the same thing if you enable developer tools. It just means that your version of firefox on your laptop is reporting support of touch events, for several possible reasons.
i had the same issue, this fixed it for me: in firefox go to "about:config", then search for the setting "dom.w3c_touch_events.enabled" and reset that one. i then had to restart firefox and afterwards "Modernizr.touch" correctly returned "false" for me.
source: https://github.com/Modernizr/Modernizr/issues/1225
Have same issue: Modernizr.touch returns true at desktop FireFox 33.1, Mac OS.
My solution: using mobile-first approach, apply all touch-related bells-and-whistles by default. If Modernizr detect .no-touch then apply (or disable) some site features for desktop users.
I had the same issue some time ago.
The problem was that some laptop models come with a version with touchscreen. We found out that if one uses such a model, Modernizr.touch returns true even if this person is using the non-touch laptop model version.
Now, click-events do work on touch devices, but not the other way round. So we worked around this limitation by adding an additional check:
var thumbsEvent, isTouch = Modernizr.touch;
var isAndroid = ...; // Android detection code
var isIOs = ...; // iOS detection code
// touch is only supported on iOS and Android
// devices, which have for sure a touch interface
if(isTouch && (isAndroid || isIOs) ){
thumbsEvent = 'click';
}
else {
thumbsEvent = 'mouseover';
}
That's probably not an optimal solution, because you need to do the device detection with user-agent sniffing instead of feature detection, which was probably why you used Modernizr in the first place.
Also, devices which support touch but are neither iOS nor Android will be excluded from touch events.
There is a temporary fix to this. I was having the same problem so what i did was i did a little digging to find an html5 property which gets detected by FF but not on mobile devices and i found flexbox to be one of them. (Read: http://html5please.com/#flexbox).
So below is the code you can use to have your problem fixed:
var isTouch = Modernizr.touch, // detect the touch
isFlex = Modernizr.flexbox; // detect flexbox
if (isTouch) {
// Detect if FF
if (isFlex) ) {
thumbsEvent = 'mouseover'; //on FF, mouseover
} else {
thumbsEvent = 'click';//on non-FF touch surface, click
}
} else {
thumbsEvent = 'mouseover';//on non touch surface, mouseover
}
Please do note that this is temporary, if mobile devices start supporting flexbox it won't work.
It's a know Firefox Bug at least since FF27: https://bugzilla.mozilla.org/show_bug.cgi?id=970346
Since Firefox Australis is now on Nightly channel, I want to make my addon compatible with this new UI. I was wondering how I can detect if user is on Firefox Australis from both CSS and JavaScript. For CSS part I am interested to optimize my toolbar icon such that it is compatible with older versions of Firefox as well.
From (privileged) JavaScript
if("gCustomizeMode" in window){
//Australis code
}
This should accomplish what you are trying to do. If the user agent has Firefox/28 add the class 'firefox-australis' to the body. Then you can target that class in CSS.
<script>
var is_australis = false;
// if the user agent contains Firefox/28, we can assume it's australis
if(navigator.userAgent.match(/Firefox\/28/)){
var version = parseInt(navigator.userAgent.match(/Firefox\/([0-9]*)/)[1]);
// should be self-explanatory
if(version < 28){ return; }
var body = document.getElementsByTagName('body')[0]
, classes = body.getAttribute('class');
// add the class 'firefox-australis' to the body tag
body.setAttribute('class', ' firefox-australis');
// save for reference in JS
is_australis = true;
}
</script>
<style>
/* Target Australis */
body.firefox-australis{
background-color:#000;
color:#fff;
}
</style>
Run in the Chrome context
if(document.querySelector("#PanelUI-popup")){
//Australis code
}
#-moz-document url-prefix() {
//Element to style
}
I want to test if a particular css property attribute is supported in the browser. For a css property, i can do it like
var overflowSupport = document.createElement("detect").style["overflow-y"] === ""
But what if i have to check for a particular class or attribute. For example, i want to test the support for
overflow-y:auto
and use it for scrolling a large div, where supported, and use iScroll at other places.
How can i do that? Pls help.
Kind of an old question, but I thought I'd share my finds here, especially because the code sample given by Inkbug does not work as you would expect.
Overflow property support
overflow-y has been around since the CSS2.1 times (however it's been standardized pretty recently, in the css3 spec). For that reason, the support on desktop browsers is very decent.
Now, what you're asking here is whether or not the scrolling behavior actually works when we specify overflow-y: scroll on a particular element.
This behavior was introduced fairly recently in mobile browsers. More precisely, Apple introduced it in iOS 5 with a -webkit vendor prefix (see page 176 of Apple's documentation).
I can't find specific info for Android though.
What I can say about support for overflow-scrolling (vendor prefixed or not):
latest nexus7 (Android 4.1.1): yes
Android 2.3.x: no
iOS >= 5: yes
iOS < 5: no
Feature detection for scrolling-overflow
If you want to give scrolling behavior to an element, I would advise using feature detection.
Here's a gist showing how you can detect this scrolling-overflow property (it's been integrated in Modernizr since). If you don't want to use Modernizr, here is a simpler version that does pretty much the same:
/**
* Test to see if overflow-scrolling is enabled.
*/
var hasCSSProperty = function(prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(document.body, null)[prop];
} else {
return document.body.currentStyle[prop];
}
};
var supportOverflowScrolling = function() {
if (hasCSSProperty('overflow-scrolling') ||
hasCSSProperty('-webkit-overflow-scrolling') ||
hasCSSProperty('-moz-overflow-scrolling') ||
hasCSSProperty('-o-overflow-scrolling')) {
return true;
} else {
return false
}
};
When one assigns an invalid value to a dom style, it gets rejected. Therefore this should work:
var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";
Arnaud Brosseau's reply surely deserves the checkmark.
Anyway, consider also using Modernizr.
Using their addTest and testAllProps API functions, you can easily check for any css property support:
Modernizr.addTest('overflow-y',function(){
return Modernizr.testAllProps('overflowY'); /* camel case here */
});
Then you can check it with JavaScript:
if(Modernizr.overflowY){
/* do something if supported */
}
but it will also add a class to the <html> tag, so that you can custom rules on CSS too:
.overflowY #element {
/* style for browsers supporting overflow-y */
}
.no-overflowY #element {
/* style for browsers NOT supporting overflow-y */
}
Is there some css selector or something of the like that allows you to apply different styles to elements in an inactive page/window in webkit? There is for scrollbars: http://www.webkit.org/blog/363/styling-scrollbars/
I'm using this to make a Titanium desktop application feel more native on Mac OS X.
Thanks!
See: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
These events work in every major
browser (Firefox, Internet Explorer
6/7, Safari & Opera).
Demo: http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/
function onBlur() {
document.body.className = 'blurred';
};
function onFocus(){
document.body.className = 'focused';
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
Since you is focusing only WebKit, you theoricaly could use :window-inactive pseudo-selector, which is supposed to work with scrollbars. I haven't tested it on MacOS X, but you can try it.
But if you want something more cross-browser, use JavaScript to define a CSS class based on the window activity. See this thread: Is there a way to detect if a browser window is not currently active?
unfortunately :window-inactive is not standardized and only works on scrollbars and text selection using ::selection as far as I know. You'd have to use javascript to get what you want.