I found the following in a previous post but need some help with it:
// For VML detection, here's what google maps does (search for "function Xd"):
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported;
}
I would like to use the code to divert users to an alternative page when VML is not supported. Please could somebody show me how to write and implement the code to divert, say, to a page called alternative.html.
I have some knowledge of javascript but not this level!
Thanks.
You can just make a call to that function provided by Google, and it will return true if VML is supported and false if not. Don't forget, you will still need to add the xmlns for VML somewhere in your HTML.
if (!supportsVml())
window.location = "http://somedomain.com/no-vml.html";
Also, I would recommend using a cross-browser library for drawing vector graphics. There's a few to choose from in this blog post: Canvas/SVG/VML Drawing Roundup.
VML is only supported in Internet Explorer (as of 5.0) and is not supported in any other browser. So checking for IE should be just enough. This can be done in many ways, for example: !!document.namespaces
Related
I'm looking for any javascript library that like modernizr (which actually does not) enables flexbox for "older browsers" (a polyfill).
Yea I know this is a really new feature (infact "there aren't" is a valid answer), but I'm hoping for something like this, I always have hard time with horizontal + vertical centering, this will really help and shorten the work.
I mean this flexbox: http://weblog.bocoup.com/dive-into-flexbox/ (the newest)
It might be too early for this. WebKit implemented it fairly recently, there's no hint of support in any mobile WebKit at all, Opera just released support for it, and Gecko's implementation is still in alpha. IE? Hah.
But as far as I can tell, no, there's no polyfill for the new flexbox. Flexie supports the old flexbox, and has a ticket open to support the new syntax... maybe you could give them a hand?
You could always use the old flexbox, I suppose, but then you're obsolete out of the gate. Sucky situation.
You're going to have to create your own.
http://www.sitepoint.com/detect-css3-property-browser-support/ has a section titled "Rolling Your Own Detection Code"
Basically you'll need something like this:
// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") {
console.log("Flex is supported");
}
else
{
console.log("Flex is not supported");
}
To expand on that and create a function:
function DetectDisplayValue(val)
{
// detect CSS display:val support in JavaScript
//
var detector = document.createElement("detect");
detector.style.display = val;
if (detector.style.display === val) {
console.log("Display value: " + val + " is supported");
}
else
{
console.log("Display value: " + val + " is not supported");
}
}
I am having the below code for population the select box dynamically.THis works fine in all browsers except FireFox 3.6
var option25 = document.createElement("option");
option25.text = '25 miles';
option25.value = 25;
if(rad == '25')
{
option25.selected = 'selected';
}
var combo = document.getElementById('ddlProximity_' + controlId);
combo.add(option25); //not working in FF3.6
Any suggestions
The add method on select elements takes two arguments in Gecko versions older than 7 (MDN).
In IE it only takes one argument, or two if it's IE 8 in IE 8 standards mode, or something MSDN.
If we take krg's code and check the arity before calling add it works in Firefox 3.6.28, Firefox 15.0.1, and IE 9:
if (typeof combo.add === 'function') {
if (combo.add.arity === 1) {
combo.add(option25);
} else {
combo.add(option25, null);
}
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
Assuming combo is a select menu, see this jsFiddle example.
if (typeof combo.add === 'function') {
combo.add(option25);
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
If you would like to ensure that your JS code works across a wide spectrum of browsers, I would use a JavaScript framework such as jQuery to perform the DOM manipulation. JS frameworks have worked out most of the cross-browser problems and abstracted away the handling of them, so that you don't have to worry about writing code to address problems in a specific browser. Here's jQuery's site: http://jquery.com/.
Now to accomplish what your example says in jQuery, you would do the following:
var option25 = $('<option>').val(25).text('25 miles');
if (rad == '25') {
option25.attr('selected', 'selected');
}
var combo = $('#ddlProximity_' + controlId);
combo.append(option25); // Will work in all browsers supported by jQuery
If you really want to do this without any JS frameworks, I would take a look here: http://www.w3schools.com/jsref/met_select_add.asp . The add method should work, but there are some caveats in IE versions prior to 8 and your page must have a proper DOCTYPE declaration. You can also try appendChild, but I would test it in a few browsers to see if that accomplishes what you need.
EDIT I have changed some Javascript now, so if I can find a javascript function that detects HTML5 Video support, it should work.
I have a HTML5 video player that has flash fallback, if HTML5 isnt supported, I want it to fallback to flash. Im currently using
<!--[if !IE]><!--> then load my custom player
else use SWFObject to render it.
Is it possible to do the folllowing:
` If (HTML5 supported browser) {
<some html and script> (My custom player)
}else{
<different html and script> (I would call SWFobject here)
}
`
Trying to find a nice easy solution idea.
Usually I would be able to have an additional <object> in the video tag, but this won't be possible due to the way the player is inserted into the page.
Even though I can detect HTML5 support with a possibly unreliable method, I'm not sure how to have my HTML based on the output of the support
Have you had a look at http://www.modernizr.com/docs/#features-css
It can do feature detection
The better solution is to use something like Modernizr to do your feature detection on the client-side.Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.
If your browser does not support the canvas API, the Modernizr.canvas property will be false.
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Ref
Another solution if you are using JQuery:
Checking for support for the canvas element of HTML 5
var test_canvas = document.createElement("canvas") //try and create sample canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element
alert(canvascheck) //alerts true if browser supports canvas element
Ref
One liner check...
// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function")
// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)
Check out everything at Dive into HTML5 especially the 'Detecting HTML5 Techniques' section. It has pretty much everything you may need.
Here is how w3schools does it:
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}
How do I detect if a browser supports HTML5 by
JS
(or)
jquery AND mootools.
Use modernizr to detect HTML5 and CSS features.
As the other suggested the best option is to use Modernizr, because it was created especially to do this work.
I don't know any plugin in jQuery that covers this functionality (jQuery.supports doesn't check much) but if you want you could try mooModernizr witch extends MooTools Browser.Features object
Another completely valid option is to check Modernizrs source code, and implment that with the features you want to detect.
To detect the video tag support is quite easy:
if (typeof HTMLVideoElement == 'function') {
alert('<video> tag supported');
}
That's in my opinion a simplistic version. Here is how the many times mentioned modernizr does it, which is a bit more bullet proof probably:
function supportsVideo() {
var elem = document.createElement('video'),
bool = false;
// IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
try {
if ( bool = !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('video/ogg; codecs="theora"');
// Workaround required for IE9, which doesn't report video support without audio codec specified.
// bug 599718 # msft connect
var h264 = 'video/mp4; codecs="avc1.42E01E';
bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');
bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}
} catch(e) { }
return bool;
}
Check out modernizr. It is an open source javascript library that specializes in detection of html5 / css3 features:
http://www.modernizr.com/
So loading up our new web application in Firefox and Chrome I had an alert subtly tell me that a tabStrip couldn't be found. Following through the code I found this function:
function initializeTabStrip() {
var tblList = document.getElementsByTagName("table");
var tabStrip = null;
for (var i = 0; i < tblList.length; ++i) {
if (typeof (tblList[i].tabStripRoot) != "undefined") {
tabStrip = tblList[i];
break;
}
}
if (tabStrip) {
window.tabStrip = new TabStrip(tabStrip);
}
else {
alert("couldn't find tabstrip");
}
}
In both Firefox and Chrome, typeof (tblList[i].tabStripRoot) comes up to be undefined, whereas in Internet Explorer the same section of code will find an item, and follow through correctly.
I've tried using Firebug and IE's developer toolbar script debugging tool to follow through and attempt to discover what 'tabStripRoot' is, but I haven't had any luck.
Would any of you JavaScript guru's be able to give me some direction into why one out of three browsers works?
Thanks for your help.
You're relying on IE's non-standard ability to access arbitrary attributes as properties of DOM elements.
In standards-compliant browsers, you cannot write someElement.tabStripRoot to access the tabStripRoot attribute.
Change it to tblList[i].getAttribute('tabStripRoot').