problem in using code HTML, CSS, JS in chrome xp
hi i got this function that do brightnes on full page by clicking on button
<html id="html">
<button onclick="brightness()">lightting</button>
<script>
function brightness(){document.getElementById('html').style.filter =
"brightness(140%)";}
</script>
</html>
the code work in other chrome browsers (like chrome version 90) but in windows xp chrome its not what the problem (is it the javascript?)? what can i change so it will work?
MDN brightness says full support since v18
but
Chrome 49 is the last version to run on XP and according to can I use brightness you need -webkit
function brightness() {
document.getElementById('html').classList.toggle("bright");
}
.bright {
-webkit-filter: brightness(140%);
filter: brightness(140%);
}
<html id="html">
<button onclick="brightness()">lighting</button>
I'm not sure what version of Chrome you are running on your Windows XP, but according to caniuse, CSS-filters such as brightness were added in Chrome version 18, and have been supported since 2010.
If you're running an older version of chrome, that's why it doesn't work.
Related
On Android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3), the window.print() command in JavaScript doesn't do anything. As far as I can tell it doesn't even register an error.
I know for a fact that most if not all of these browsers can print because you can use mobile Chrome's menu to choose "print".
Why doesn't window.print() trigger the behavior you would expect (opening the clients print menu)? And is there an Android alternative to window.print()?
It is clearly stated in this Documentation, "The command is supported on iOS, Chrome on Windows and Safari and Chrome on Mac. It is not supported on Android."
Android phones don't have native support for printing yet, so window.print() will not work. Which means you need to use third-party app to do the printing. You could find some alternatives in this article.
I'm working on a simular problem and came up with this solution:
$(document).ready(function($) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
$('button.print').click(function(e) {
e.preventDefault();
if (isAndroid) {
// https://developers.google.com/cloud-print/docs/gadget
var gadget = new cloudprint.Gadget();
gadget.setPrintDocument("url", $('title').html(), window.location.href, "utf-8");
gadget.openPrintDialog();
} else {
window.print();
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="print">Print this page</button>
I haven't had the time to check if this works, i don't have an android device with me at the moment. I Would love to have some feedback on this ;-)
⚠️ [Deprecated] : Google Cloud Print will no longer be supported as of December 31, 2020. Please see the support article for help migrating.
Use Google Cloud Print (GCP) - there is no app required. The user must have set up a printer via GCP though.
This example uses GCP gadget
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print</title>
</head>
<body>
<div>
<p>On android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3) the window.print() command in javascript doesn't do anything, as far as I can tell it doesn't even register an error.</p>
<p>I know for a fact that most if not all of these browsers can print because you can use mobile chromes menu to choose "print". My questions is, why doesn't window.print() trigger the behavior you would expect (opening the clients print menu).
And is there an android alternative to window.print()?</p>
</div>
<div id="gcpPrint"></div>
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(cloudprint.Gadget.createDefaultPrintButton("gcpPrint"));
gadget.setPrintDocument("text/html", "Print", document.documentElement.innerHTML);
</script>
</body>
</html>
I think, direct print() method is disabled on devices by default. I not saw so many phones or other Android devices with printer, however by USB it should be possible of course.
Instead, recommended is saving content/page as pdf and print it via some cloud print service.
At this moment, window.print() functionality works perfectly on my Android 5.0.1 device with both, Chrome and the default browser.
Now, window.print() is working on Android devices.
Download adobe acrobat in your phone and you can use windows.print() in mobile.
Trying to use pinch-to-zoom on multitouch screen with Windows 8.1 preview and Internet Explorer 11 (IE later on) does not work with Google Maps API V3 (none of the latest versions: 3.12, 3.13 and 3.14). The expected behaviour is map zooming in and out.
The same feature is working just fine with Windows 8 and IE 10.
There seem to be two exceptions for the case:
https://maps.google.com
https://developers.google.com/maps/documentation/javascript/examples/map-simple (any example being embedded in the docs pages; when viewed in a standalone tab or window by pressing the view "full screen" pinch-to-zoom does not work)
Does anyone know how that is achieved so that it could be used until the issue is fixed?
For the time being you can add this meta tag to your head tag (make sure it's the first tag after the head)
<meta http-equiv="X-UA-Compatible" content="IE=10" />
That will fix the problem for IE 11 users because the browser will behave as an IE 10 browser.
When Google fixes the bug you can put it back to IE=edge or just remove it.
EDIT : The bug has been fixed by now
I am using google visualization for charts, which doesn't render very well in IE8, and doesn't work at all in IE6.
I added google chrome frame, and if the user installs the plug-in google visualization works flawlessly.
Is there a way that I can force IE users to install GFC? Right now it is optional. I read the documentation, and there does not seem to be a way to configure this through the GFCInstall.check() function call.
Here is my current code:
<!--[if IE]>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
.chromeFrameInstallDefaultStyle {
border: 5px solid blue;
top:55%;
}
</style>
<script>
// The conditional ensures that this code will only execute in IE,
// Therefore we can use the IE-specific attachEvent without worry
window.attachEvent("onload", function() {
CFInstall.check({
mode: "inline"
});
});
</script>
<![endif]-->
It would almost certainly be better to do this via capability-sniffing. Assuming that the feature you need to get nice visualisations is <canvas> support, sniff for that rather than a specific browser:
if (!('width' in document.createElement('canvas'))) {
document.write(
'The visualisations on this page don\'t work well in your current browser. '+
'Please upgrade to a modern browser such as IE9, Firefox, Opera, Safari or '+
'Chrome, or install Chrome Frame for earlier IE versions.'
);
}
No you cannot force the user - your best options from the Google Chrome Frame FAQ:
How do I tell if a user has Google Chrome Frame installed?
Google Chrome Frame adds a ‘chromeframe/X.X.X.X’ token to the User-Agent header so you can check for its presence that way. If Google Chrome Frame isn’t present, you can choose to either prompt or show fallback content. See http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/understanding-chrome-frame-user-agent for more information on the User-Agent header.
We've also provided a JavaScript library you can use to test whether Google Chrome Frame is installed and if not, to prompt the user to install it. See http://www.chromium.org/developers/how-tos/chrome-frame-getting-started for more details on how to use and customize the JavaScript library.
Is support of HTML, CSS and Javascript same in Desktop Safari ( Mac & Windows ) and Mobile Safari (iPhone)?
If I'm making some thing for iPhone Safari and use Desktop version Safari on my Windows 7 PC to test and debugging, after fininsh will it look same on both? Are there any difference between Safari ( Desktop ) and Safari (iphone) in terms of support of HTML, CSS and Javascript?
They are based on the same html render engine - WebKit. Pure HTML, CSS and Javascript are supported in mobile safari and desktop version. But if you are doing sth in Flash or Applet, mobile safari does not support that. Some HTML5 tags are not fully supported, like File/FileSystem interface. You still need to test the pages in mobile safari, although developing them in desktop version safari in first place is a good way.
I'm trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).
Basically...
//pseudo code
<!--[if IE]>
<a href"ie-only.html">click here!</a>
<!--[else]>
<a href"all-other-browsers.html">click here!</a>
<![endif]-->
I don't think this is possible with conditional comment tags (which only work in internet explorer). Plus I don't think there is an "else" statement.
Is there a way to do this with javascript? Please help! Thanks!
I don't think this is possible with conditional comment tags (which only work in internet explorer)
Sure it is. You just have to leave the content for non-IE browsers in a position such that it's part of a conditional comment clause but not actually inside a <!-- comment -->. Then browsers that don't know about conditional comments will see the content fine. This is known as a downlevel-revealed conditional comment.
Unfortunately the markup Microsoft give you there is invalid HTML (and not even well-formed XML). To make it pass muster you just need a few additional ‘--’s:
<!--[if IE]> This is IE! <![endif]-->
<!--[if !IE]><!--> This ain't IE! <!--<![endif]-->
Although I have to echo AnonJr's non-answer, in that it's rare you should need a completely separate link/page for IE compared to other browsers. If you're doing something tricky like complex VML and ActiveX work in IE with Flash on other browsers I guess there could be a reason for it, but usually a few CSS and script hacks over the same basic page should suffice.
This is not going to be the popular answer, but its damn time somebody started posting it - stop with the browser-specific junk. You're only perpetuating future problems when new versions come out.
If developers had taken the additional time (yes, it takes time and hard work. If you can't convince your clients you aren't trying hard enough) then we wouldn't have seen IE7 "break the web" and there would have been even less of a brouhaha with IE8.
Yes, IE is less standards compliant than the others. But, Fx is also missing certain things that are a part of the standard too. They all suck when it comes to "standards". But they are all getting better. (At different rates, but they are all getting better.)
Think first why you are trying to do this, and ask yourself if you really want to deal with this when the next browser version comes out and you have to re-jigger your browser detection and how you handle version X of browser Y.
[/rant]
Edit: To answer some of the comments that point out the obvious fact that I didn't really answer the question, without more information this question makes me wonder if we're not trying to help a person decide to hammer in a nail with a glass bottle or a shoe...
This is the Microsoft-approved way:
<!--[if IE]>
click here!
<![endif]-->
<![if !IE]>
click here!
<![endif]>
More information available at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.
Edit
This code is implicitly guaranteed to work in all current and future versions of IE starting with IE 5. For non-IE browsers, the code works by relying on those browsers ignoring the "nonsensical" <![if !IE]> tag, which they all do, and I've never seen it fail. For a version that uses nothing but good ol' HTML comments, see bobince's answer, which I actually prefer to the Microsoft-provided solution.
One way that I've figured out how to do it:
Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.
Then in your <body> tag use:
<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer') {
document.write('Explorer');
} else {
document.write('Other Browsers');
}
// -->
</script>
Not sure if this is the most simple way to do it but it got the job done.
A shot in the dark, maybe, but would this work?
<style>
a.forIeOnly {display: none; }
a.notForIe {display: block; }
</style>
<!--[if ie]>
<style>
a.forIeOnly {display: block;}
a.notForIe {display: none; }
</style>
<![endif]-->
Link One
Link Two
It's nowhere near as clean/attractive as an if/else statement could be, but...it was the easiest way I could think of to implement a solution. Though it may well be fraught with issues all of its own.
Add this to your header :
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
Then whatever you want to your .css page :
/* Chrome Only */
.chrome embed {
display: none;
}
/* Firefox Only */
.gecko video {
display: none;
}
Source : http://rafael.adm.br/css_browser_selector/
Available Browser Codes [browser]:
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
I didn't try, but maybe you could use IE flaws on CSS. Eric Meyer has written this article on the subject: Tricking Browsers and Hiding Styles.
You could always use CSS to hide the code from specific browsers. For instance, considering the following code:
<a href"ie-only.html" id="ie-only">click here!</a>
<a href"all-other-browsers.html" id="other-browsers">click here!</a>
You could apply the following CSS hacks, and the appropriate links would be displayed to the appropriate browsers.
/* Display settings for most browsers */
#ie-only {display: none;}
#other-browsers {display: block;}
/* Display settings for IE <= 6 */
* html #ie-only {display: block;}
* html #other-browsers {display: none;}
IE supports conditional compilation, which you can use to easily deliver IE-only code without needing to perform user agent sniffing or feature detection.
/*#cc_on
/*#if (#_jscript)
alert("IE.");
#else #*/
alert("Not IE.");
/*#end
#*/