In Chrome and IE (non-compatibility), custom tags work fine as far as inspecting and navigating the DOM.
In IE+compatibility mode, it does not work.
Here is some sample code in jsbin: http://jsbin.com/ozajeh/1/edit
<html>
<!-- Run this in IE 8/9, possibly 10, with compatibility mode on to see the issue -->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
if (document.createElement) {
document.createElement("myelement");
}
</script>
</head>
<body>
<script>
var div = $("<div>content</div>");
if( div.contents().length > 0 && div[0].childNodes.length > 0){
alert("found content in div");
}
var myElement = $("<myelement>content</myelement>");
if (myElement.contents().length > 0 && myElement[0].childNodes.length > 0) {
alert("found content in myelement");
}else{
alert("IE issue: cannot find content in myelement");
}
</script>
</body>
</html>
How can I get Internet Explorer in compatibility mode to deal with the tag correctly?
Current, what happens, is that myElement.nextSibling() returns the text node, which is obviously incorrect.
I can figure out a workaround based on property/value testing, but is there a more solid approach to handling this scenario?
Related
I have piece of HTML code in which we are applying special css for IE9, IE10 & IE11.
<!doctype html>
<!--[if IE 9]><html data-placeholder-focus="false" lang="{%=user_locale_html}}" dir="ltr" class="ie9 lt-ie10 lt-ie11 lt-ie12 gt-ie8 gt-ie7 gt-ie6"><![endif]-->
<!--[if !(IE)]><!--><html lang="{%=user_locale_html}}" dir="{%=dir}}">
<script>
var ua = window.navigator.userAgent;
if (ua.indexOf("Trident/7.0") > 0)
document.documentElement.className='ie11 lt-ie12 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
else if (ua.indexOf("Trident/6.0") > 0)
document.documentElement.className='ie10 lt-ie11 lt-ie12 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
if(/*#cc_on!#*/false){
document.documentElement.className='gt-ie11 gt-ie10 gt-ie9 gt-ie8 gt-ie7 gt-ie6';
}
</script>
<!--<![endif]-->
</html>
Note the code if(/*#cc_on!#*/false) {}
This code is overriding the css class applied in IE10 when we have userAgant=Trident/6.0. (Which causing me problem to override ie10 class.
But my question is, Why this code is not overriding the classes when the browser is IE9?
I know that #cc_on related stuff is not needed in the code, But i am curious to know how it is behaving differently.
Thanks!
Possible that your code is not identifying the IE 9 and that is why CSS class not get override.
I suggest you to try to refer code example below which can able to find the IE 8, IE 9, IE 10, IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
if (GetIEVersion() > 0)
alert("This is IE " + GetIEVersion());
else
alert("This is not IE.");
</script>
</head>
<body>
</body>
</html>
Output:
Further, you can try to modify it as per your requirement may help you to solve your issue.
I have a script but used in same page. like two times. i got error while working when i working on desktop it's work but when i check on below 1000px then it's get error like:- Duplicate Embedded Players Detected.
I think it's worked when i open desktop then show desktop script and when i open mobile then desktop not show mobile script show. please help me how to do that. :-
this is the script i used:-
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
I used for this but it's show syntax error:-
<script>
if (jQuery(window).width() < 1000) {
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
}
</script>
Please tell me how to fix that issue. Thanks alot
if (jQuery(window).width() < 1000) {
<script type="text/javascript" ...snip...></script>
}
This code is Javascript, so you need to construct a script element in Javascript and append it to the document manually.
var headElem = document.getElementsByTagName('head')[0];
var scriptElem = document.createElement("script");
scriptElem.type = "text/javascript";
if (jQuery(window).width() < 1000) {
scriptElem.src = "play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox";
scriptElem.class = "mobile";
}
else {
scriptElem.src = "desktop.vidyard.com/.......js";
scriptElem.class = "desktop";
}
headElem.appendChild(scriptElem);
I'd like to check if IE11 compatibility view is enabled for the current domain. Setting compatibility view is through: Tools > Compatibility View Settings.
I know this has been asked by a few a couple of years ago but looks like the answers doesn't work anymore due to recent update on IE11.
Does anyone know an alternative way to do this?
In IE versions 8-11 You can use document.documentMode. Valid values are 5, 7 (compatibility mode), 8, 9, 10, and 11 (Edge).
Setting compatibility mode in the console changes the value directly.
Loading a page with a <meta http-equiv tag changes the value
Adding a site to compatibility mode in "Tools -> Compatibility View
settings" changes the value to 7.
https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Examples
For example if I load this page in IE11 I get documentMode of 11.
<!doctype HTML>
<body>
<p>Hello World!<p>
</body>
This page loaded in IE11 sets documentMode to 9.
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=9"/>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
If you just wanting to check if you are being run in compatibility mode you can use this script.
// Create new ieUserAgent object
var ieUserAgent = {
init: function () {
// Get the user agent string
var ua = navigator.userAgent;
this.compatibilityMode = false;
// alert (ua);
if(ua.indexOf("MSIE") == -1){
this.version = 0;
return 0;
}
if(ua.indexOf("compatible") == -1){
this.compatibilityMode = false;
return 0;
}else{
this.compatibilityMode = true;
return 0;
}
}
};
// Initialize the ieUserAgent object
ieUserAgent.init();
-OR-
/**
* Check if client is IE and in compatibility view
*
* #returns {boolean}
*/
function isIECompatibilityMode() {
var ua = navigator.userAgent;
if (ua.indexOf("MSIE") == -1) {
return false;
}
return (ua.indexOf("compatible") != -1); }
The HTML code below works fine in IE 8, but not in FF 11. Although the code seems to take different browsers into account, for some reason FF does not do the trick. Can someone please tell me how to get this to work in both IE and FF? The idea is to rotate several clickable pictures.
<html>
<head>
</head>
<body>
<ilayer id='l1'>
<layer id='l2'>
<div id='l1'>
<div id='l3' style='position:relative'>
</div>
</div>
</layer>
</ilayer>
<script language='JavaScript'>
<!--
var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<a href='http://www.google.com' target='_blank'><img src='image1.jpg' BORDER=0 height='50'/></a>";
bannerArray[1] = "<a href='http://www.google.com' target='_blank'><img src='image2.jpg' BORDER=0 height='50'/></a>";
bannerArray[2] = "<a href='http://www.google.com' target='_blank'><img src='image3.jpg' BORDER=0 height='50'/></a>";
bannerRotate();
function bannerRotate() {
if(myCount > bannerArray.length-1){myCount=0;}
// Write out rotation
if (document.all){ // it is IE
document.all.l3.innerHTML=bannerArray[myCount];
}
else if (document.layers){ // it is NN
document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout('bannerRotate()', 1000);
myCount++;
}
// -->
</script>
</body>
</html>
You haven't specified a DOCTYPE.
This is an important part of a HTML document. Without it, IE see the HTML as invalid and render it in Quirks Mode. Other browsers won't.
When I is in Quirks mode, it is basically rendering the page as it would have done in IE5.
This is why you are seeing the page look different in IE vs FF. Firefox is actually rendering it correctly; it is IE that is wrong.
Add a valid DOCTYPE to make IE render it correctly. If you don't know which doctype to use, use this one:
<!DOCTYPE html>
This will make the page render the same in all browsers.
It will, however, be IE that changes, so if you think it's rendering fine in IE now, then you'll probably have to make some changes to your layout to fix it.
Hope that helps.
In addition, your Javascript code is very badly obsolete. You will need to consider rewriting all of that from scratch. Nobody uses document.all or document.layers any more. However, the doctype is the main thing that is making your page render incorrectly in the first instance.
document.all and document.layers are proprietary and obsolete. Use document.getElementById() instead.
Just replace if (document.all) with if (document) and it will work in Firefox.
It will, but no really, don't do that! That's based on some almighty hacks.
Where-ever you got that code from, stop using it NOW.
There's plenty of tutorials out on the web that will show you how to rotate the display of images in a modern fashion. Go and find one.
Lets bring this code into the 21st century, and don't forget the docype!!!!
HTML
<ul id="banner">
<li id="bannerItem1"><img src="http://placehold.it/450x150/FF0000/FFFFFF/&text=Image1" /></li>
<li id="bannerItem2"><img src="http://placehold.it/450x150/00FF00/FFFFFF&text=Image2" /></li>
<li id="bannerItem3"><img src="http://placehold.it/450x150/0000FF/FFFFFF&text=Image3" /></li>
</ul>
CSS
#banner
{
list-style:none; /*Turn Off List Styling */
}
#banner li
{
display:none; /*Hide the List Items*/
}
#banner li#bannerItem1
{
display:block;/*Show The First One */
}
Javascript
var listItems = document.getElementById("banner").getElementsByTagName("li");
var limiter = 0;//this is to stop it infinatly looping...optional
var activeNode = 0;
var t = setInterval(function(){bannerRotate()},1000);
function bannerRotate() {
var listItemsCount = listItems.length;
//LOOP THROUGH List Items
for(i = 0; i < listItemsCount; i++)
{
//Turn off all but next active node
if(i != activeNode +1)
{
listItems[i].style.display = "none";
}
//Check if next active node is outside the list range
else if((activeNode + 1) < listItemsCount)
{
listItems[activeNode +1].style.display = "block"
}
}
activeNode++;
if(activeNode >= listItemsCount)
{
listItems[0].style.display = "block";
activeNode = 0;
}
if(limiter++ > 4)
{
clearInterval(t);
}
}
Example: http://jsfiddle.net/Hj78T/
I am new to JavaScript, trying to figure out a tag information value. GWT Code is as follows..
public static native boolean isToolBarInstalled() /*-{
alert("Validating the toolbar installed.");
var metas = document.getElementsByTagName('head')[0].getElementsByTagName('meta');
var i;
alert ("Meta length: "+metas.length);
for (i = 0; i < metas.length; i++){
alert("Value: "+metas[i].value);
if (metas[i].getAttribute('name') == "toolbar"){
return true;
}
}
return false;
}-*/;
FF return true whereas IE returns false, for the same page? Any clue/suggestions would be helpful.
WM.
HTML is too huge to post, here is a snippet of the code..
<html>
<head>
....
<title>My App</title>
<meta name="toolbar" content="1.0">
</head>
<body>
.....
</body>
<html>
Works for me in IE7.
Check you haven't got any text content before the <meta> end-tag other than simple whitespace.
If you have any non-whitespace text in or before <html> or <head>, the browser will decide that you meant to open the <body> to contain the text. (This is actually valid in non-XHTML HTML, as the </head> end-tag and the <body> start-tag are optional.) That means closing the <head> section, so the number of <meta> tags inside <head> will be 0.
In any case you might as well say just:
var metas= document.getElementsByTagName('meta');
as the bit about checking they're in <head> is redundant for a valid document; that's the only place <meta> is allowed to appear.
alert("Value: "+metas[i].value);
There's no .value on <meta>, do you mean .content?
if (metas[i].getAttribute('name') == "toolbar"){
Use metas[i].name. There's no reason to use getAttribute/setAttribute on an HTML document and there are problems with it on IE.
Try this:
element.attributes[value].nodeAttribute;
As explained here:
The getAttribute() method will return
"null" in Internet Explorer when
trying to get the for attribute of a
label element.
Might be the same issue...
Well look:
Example
Source
In this example it is working on IE.
function isToolBarInstalled() {
alert("Validating the toolbar installed.");
var metas = document.getElementsByTagName('head')[0].getElementsByTagName('meta');
var i;
alert ("Meta length: "+metas.length);
for (i = 0; i < metas.length; i++){
alert("Value: "+metas[i].value);
var attr = metas[i].getAttribute('name');
// IE workaround
if (attr == null)
{
attr = metas[i].attributes["name"];
if (attr != null) attr = attr.nodeValue;
}
if (attr == "toolbar")
return true;
}
return false;
}
alert( "Is installed: " + isToolBarInstalled() );