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.
Related
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.
I just want to use different interpolator for rendering bound values in HTML page..
But in IE9 browser, my interpolators <% %> are not working at all ...
I have created a fiddler enter link description here
Please help me resolving this issue..
regards
Ram
IE9 will interpret any symbol starting with < as a tag, which means that you will have to use other symbols if you want this to work on IE9.
You could try soomething like (( )) instead.
Example
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
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.
I have a <div> in my HTML page. What I need to do is, add <ul> element inside it from my Entry point class. I have tried from onModuleLoad function using below code,
UListElement ul=Document.get().createULElement();
ImageElement img=Document.get().createImageElement();
img.setSrc("\\images\\personas");
LIElement li=Document.get().createLIElement();
li.appendChild(img);
ul.appendChild(li);
Document.get().getElementById("divPhotos").appendChild(ul);
but my <div> is empty/has no childs when i run it. what am I missing here?
Your code is okay assuming you have correctly assigned the "divPhotos" id to a div in your HTML DOM. I suspect that you are viewing the page source and expecting to see the newly appended DOM elements. What you want to view is the pages live DOM. How you inspect the DOM in depends on the web browser you are using. if your using Google Chrome, press F12 to access the debugging tools which will allow you to transverse the live DOM. For Firefox, you need to install Firebug. Other browsers provide their own debugging mechanisms.
I have forgot to add nocache.js in html page.
<script type="text/javascript" language="javascript" src="test/test.nocache.js"></script>
Its working now...