My HTML content is divided up into two sections: one that displays on IE8 and older, and one that shows up on ie9+ or "not IE". This seems to work fine on desktop, but when viewing via chrome mobile, I am seeing the IE8 stuff as well.
Any thoughts?
Never mind, I fixed it. Here is the solution:
Original code (outline):
<!--[if lte IE 8]>
<div id="section-1">
CONTENT HERE
</div><!-- Comment after -->
<div id="section-2">
CONTENT HERE
</div><!-- Comment after -->
<![endif]-->
As the conditional comments create one long comment starting from the "if" and ending with the "endif", by adding comments at the end of "section-1" and "section-2", I was effectively ending the comment at that point rather than at the "endif". Everything after the accidental comment end was being displayed by the browser.
Related
I am trying to use ng-mousedown and ng-mouseup in concert, however ng-mousedown is firing twice and ng-mouseup is not firing at all. For example, the following code causes count to increment by two instead of going up on press and down on release:
<!DOCTYPE html>
<html>
<body ng-app>
<div>
<div style="background-color: blue; width: 80px;" ng-mousedown="count = count + 1" ng-mouseup="count = count - 1" ng-init="count=0">Click Me</div>
<div>{{count}}</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
If I change the Angular version to 1.1.1 it works as expected. Am I doing something wrong or is this a bug in Angular? I've tested in Chrome and Firefox. It works in Firefox, but not Chrome.
Update: After further testing it appears that this may only fail to work in Chrome on Linux 64. So it might be a bug in Chrome.
I loaded the test file into Chrome directly and found it worked as expect. When I compared it to the one loaded via my local webserver, I found the following line injected into my HTML:
<div id="__ngBatarangElement" style="display: none;">{"id":1,"time":18.12599998083897,"event":"scope:apply"}</div>
That made me suspect the AngularJS tab in dev tools. Sure enough, disabling it "fixed" the page:
What is more disconcerting is the fact that I distinctly remember choosing not to install Batarang due to the nearly universal negative reviews. I guess I will have to add mine to the pile.
Update: Found that the issue has been reported https://github.com/angular/angularjs-batarang/issues/205
I have to use two iframes, one for IE8 and other for the rest of the browsers. I see that the angularjs scope variable (myUrl) is getting evaluated for the later iframe but not the first.
<div id="frameContainer" class="modal-body ios-scroll">
<!--[if IE 8]><iframe ng-src="{{myUrl}}?domain=http://localhost:9001/" class="signInIframe" frameborder="0" marginheight="0" marginwidth="0" height="620" width="600"></iframe> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> <iframe ng-src="{{myUrl}}?domain=http://localhost:9001/" class="signInIframe" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe><!--<![endif]-->
</div>
Your problem may lie with Internet Explorer 8 and lower having problems with custom attributes. (e.g. ng-src)
Check out this guide for more information.
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML attributes and tags. Read this document if you are planning on deploying your Angular application on IE v8.0 or earlier. (emphasis mine)
To see if this is indeed the case, try doing what kmdsax suggested by changing ng-src to simply src. If that works, then your issue is most likely the custom attribute.
NOTE: According to the docs, if you don't use ng-src then your iframe won't resolve to the correct address. So make sure you read that IE compatibility guide to make IE8 and lower behave.
I tested your code in IE8 and it seems to be working fine.
You dont really need to use ng-src here, you can also use src, and the {{myUrl}} variable will be evaluated the same. Try that, see if it makes a difference for you.
When using...
<!--[if lte IE 8]> <html class="ie8-7-6"> <![endif]-->
.ie8-7-6 .loginForm {display:none;} /* The login form is hidden. */
and
.ie8-7-6 .yourbrowserisold {display:block;} /* and some nice graphics
appear to indicate it doesn't support IE6, 7, or 8. */
So that works very nicely and I'm providing a link to download Chrome Frame.
But now, if Chrome Frame is installed, I would like it to do the oposite.
<!--[if CF]><html class="chrome-frame><![endif]-->
.chrome-frame .yourbrowserisold {display:none;}
.chrome-frame .loginForm {display:block;}
But
<!--[if CF]><html class="chrome-frame><![endif]-->
does not work and I need the login form to appear.
I've googled a few dozen websites and I can't find an answer if...
a. it is even possible with conditionals?
b. or is it only possible with javascript?
Any help?
-----Update----------
Here is a script to detect if Google Frame is installed or not.
$(document).ready(function() {
if( $.browser.chromeframe != window.externalHost) {alert("You are using chrome frame. You rock!"); }
else { alert("You are not using chrome frame."); }
});
FYI: You can add your own jQuery to the above script to target Chrome Frame users.
----- Demo: https://dev.clientwhys.com/index-dummy-ie.iml
The best way to detect that you're in Chrome Frame inside IE is checking for
var isChromeFrame = !!window.externalHost;
This is only available inside Chrome Frame. Currently there are no conditional comments-like construct for Chrome Frame.
More at http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/understanding-chrome-frame-user-agent.
But to your situation, if the user has Chrome Frame installed already and you're triggering it via a chrome=1 flag, then they'll never see any content inside of IE conditional comments.
hope sombody can enlighten me here,
i am writing a joomla template.
ie7 has a seperate css using:
<!--[if IE 7]>
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_ie7.css" type="text/css" />
<![endif]-->
but is also loads the non ie7 css and accepts its styles, so nothing get fixed....
does anybody know what to do?
thanks,
Jonatahn
Using conditional css loading this way is not (at least for me) the best way to handle this situation.
As you are writing a template you can acces to the $_SERVER['HTTP_USER_AGENT'] variable in order to determine if the iExplorer (or any other) css is needed and then use php to filter it's load
<?php
if(stripos ( $_SERVER['HTTP_USER_AGENT'], "MSIE 7.0") > 0 ){
/* LOAD IE7 CSS here */
}else{
/* LOAD normal CSS here */
}
?>
This way you can load the IE7 css ONLY.
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.