IE8 issue - jQuery adjusting navigation html when page resizes - javascript

Using the below code, I don't want IE8 to pick up the responsive navigation. When a window is resized, IE8 is removing navigation. My has a class of "lt-ie9" for IE8. Can you tell me how to adjust the code so if the browser size is below 767, it will use the desktop version.
function resizeNav() {
if (!nav) {
nav = {};
nav.root = jQuery('#navigation');
nav.primary = nav.root.find('.menu');
nav.secondary = jQuery('.secondary-links');
nav.moveable = nav.secondary.children('li');
nav.icon = jQuery('<div id="menu-icon" class="btn">Navigation</div>');
nav.icon.click(function () {
nav.primary.slideToggle('slow');
nav.icon.toggleClass('active');
});
}
// Position everything
if (getWidth() <= 767) {
nav.moveable.appendTo(nav.primary);
nav.root.prepend(nav.icon);
nav.primary.hide();
} else {
nav.moveable.appendTo(nav.secondary);
nav.icon.detach();
nav.primary.show();
}
nav.icon.removeClass('active');
}

Assuming your lt-ie9 class is added the html element, the easiest way to do this is just check for it along with the width:
if (!html.lt-ie9 && getWidth() <= 767) {
You could also store the lt-ie9 as a boolean to be more efficient:
var isLtIe9 = $('html.lt-ie9').length;
And then modify the above to:
if (!isLtIe9 && getWidth() <= 767) {

Why use JS if you only want to effect IE8? Wouldn't it be better to just use an IE8 only CSS file. This would keep your code clean and hack free.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Related

Why css class is not overridden for IE9?

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.

Changing StyleSheet on Webpage Resize

I've got this script almost to 100% of where I want it, but I just cannot get it stop flickering when the window re-sizes over 865px.
I basically built it change the style of my website from mobile to desktop when the window gets past a certain size. For the most part I built it using the awesome other questions asked on this site, but I just cannot get the end of it.
JavaScript:
$(window).on("resize", function() {
if ($(this).width() > 865) {
if (x != 'Desktop') {
var x = 'Desktop';
$('head link[rel=stylesheet]').remove();
$('head').append('<link rel="stylesheet" href="/IIS/_Stylesheets/HTMLPageReset.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="/IIS/GRCAWebsite/_Stylesheets/GRCANew2015.css" type="text/css" />');
}
}
if ($(this).width() < 865) {
if (x != 'Mobile') {
var x = 'Mobile';
$('head link[rel=stylesheet]').remove();
$('head').append('<link rel="stylesheet" href="/IIS/_Stylesheets/HTMLPageReset.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="/IIS/GRCAWebsite/_Stylesheets/GRCANew2015_Mobile.css" type="text/css" />');
}
}
});
It works great in the mobile view, but in the desktop view the page constantly reloads the script whenever the window is re-sized. I think it has something to do with my x variable, but
I call JQuery as well.
Well since you are telling the browser to do something at below 865px and something else above 865px, your issue is most likely that you forgot about the lonely 865px itself. Try adjusting one or the other like this
if ($(this).width() > 864) or if ($(this).width() < 866)
That way 865px will now be captured.

how to set different height for different browser?

I have div that has a height: 300px; and overflow: auto;. It looks good in Chrome, but in Firefox it start scroll the page. When I decrease the height to height: 200px;` it looks good.
Can we give different div height when html page open in Chrome and Firefox?
Use the below CSS block for firefox
#-moz-document url-prefix() {
.selector {
width:200px;
}
}
and use the below CSS block for chrome
#media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
width:300px;
}
}
You can write browser specific code by detecting browser.
Here is the link for browser detection Browser detection in JavaScript?
Give the condition according to the browser using javascript
if (!!window.chrome == true) {
//condition for chrome
}
else if (typeof InstallTrigger !== 'undefined') {
//condition for firefox
}
else if (/*#cc_on!#*/false == true) {
//condition for safari
}
else if (!!window.opera || navigator.userAgent.indexOf('Opera') >= 0) {
//condition for opera
}
else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
//condition fo IE
}
This javascript code will detect the browser. Give onload function for body and give the code for that function.
I think better way to change the css files based on the browser. As I think it is better to separate the styles functionality from the JavaScript. It will be good coding practice and maintainability will be easier.
Use different styles sheets (css) based on the browser.
E.g.
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox"
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"Firefox.css\">");
}
else
{
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
or
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->

Supporting Custom Elements in IE Compatibility mode

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?

How to make your Javascript run conditionally, depending on the browser?

I want a piece of Javascript to run if the browser is not IE or it is IE 9+. If the browser is IE8 or a lower version, another piece of Javascript should run.
I tried to use Conditional Comments:
<!--[if (!IE)|(gte IE 9)]>
<script type="text/javascript"> /* code 1 */ </script>
<![endif]-->
<!--[if (lt IE 9)]>
<script type="text/javascript"> /* code 2 */ </script>
<![endif]-->
But IE6 and IE7 still were executing code 1. And Firefox was executing code 2...
No jQuery, please.
Edit: Actually, my conditional expression was wrong. But still went with the feature detection proposed in the chosen answer.
From your comment, it sounds like you're just trying to decide if you can use document.getElementsByClassName(). If that's the case, you can use feature detection like this:
if (document.getElementsByClassName) {
// code here that uses getElementsByClassName
} else {
// code here that doesn't use getElementsByClassName
}
It may be cleaner to just install a polyfill so that you can use it in older versions of IE without having to check first. There are a number of them available you can find with a Google search. Here's one:
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', #class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
You can do this best by a check within javascript instead of one in HTML. In JS you have the property navigator.userAgent which returns a unique string for each browser (and even IE in its different compatibility versions). So I would suggest to execute the whole JS block in all browsers and simply add something like this add the top of it:
if(navigator.userAgent.indexOf('MSIE 9.0') !== -1)
{
// call IE9 specific method
}
else
{
// call method for other browsers
}
For a more sophisticated approach see this post navigator.userAgent
As jfriend00 states feature detection may be a better solution but here is the conditional comments that satisfy your requirements.
<!--[if gte IE 9]> -->
<script type="text/javascript"> alert('ie9+ and not ie') </script>
<!-- <![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript"> alert(' < ie9') </script>
<![endif]-->
http://jsfiddle.net/szF4J/1/

Categories