So I've got a an HTML5 website setup and I've been programming a for of language toggle
The site always starts like this...
<!DOCTYPE html>
<!--[if IE 7]><html lang="fr" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="fr" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr" class="no-js">
I'm building a language detection script and I'm trying to cache
<html lang="fr" class="no-js">
Or more specifically the "fr" and "en" into a variable upon the activation of my script...
How would I go about fetching the language declaration into a variable?
var lang = document.documentElement.getAttribute("lang");
or just
var lang = document.documentElement.lang;
Related
I have a standard PHP/Smarty Website. There is a home base with index.php, a templates folder with the .tpl Files. I have a header.tpl, footer.tpl, index.tpl and subpage.tpl.
The index.tpl and subpage.tpl both include the header.tpl. I know they are both have the header.tpl included correctly because css is the same on both pages. In the head tag on the header.tpl I have a jQuery autocomplete script. If I have the text box on the index.tpl the autocomplete works.
If I place the same input text box code on the subpage The Autocomplete does not work. I force compile smarty, removed all cache and can't seem to figure out why? Any Ideas?
My Header .tpl
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
... my css
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="scripts/jquery.autocomplete.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.autocomplete.js"></script>
<script type="text/javascript" src="scripts/onchange.min.js"></script>
<script>
$(document).ready(function(){
$("#Part_Number").autocomplete("autocomplete/parts.php", {
selectFirst: true
});
});
</script>
my index.tpl and subpage.tpl
{include file="header.tpl" page="Home"}
<input type="text" id="Part_Number" name="Part_Number"></input>
The only thing that can be different in your 2 pages are the URI you are calling:
$("#Part_Number").autocomplete("autocomplete/parts.php", {
try to put an absolute path like this:
$("#Part_Number").autocomplete("http://www.example.com/autocomplete/parts.php", {
I'm creating a website with Zepto, so it doesn't support any Internet Explorer version.
How can I detect if a user is using Internet Explorer and redirect them to a page informing that the website doesn't support IE?
I've read about conditional comments, but them aren't supported in Internet Explorer 10.
Thanks.
You can never know for sure, but an easy option is to look at the user-agent (in e.g. PHP).
Also take a look here: How to display browser specific HTML?
Setup the document like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
For IE10 use this:
if (Function('/*#cc_on return document.documentMode===10#*/')()
){
document.documentElement.className+=' ie10';
}
Then, what you do with these classes depends on whether you want to just show/hide a div with css, or use javascript to redirect the page.
Javascript:
(function ($) {
"use strict";
// Detecting IE
var IE;
if ($('html').is('.ie6, .ie7, .ie8, .ie9, .ie10')) {
IE = true;
}
if (IE) {
// redirect
window.location.replace('http://www.myotherpage.com');
}
}(jQuery));
OR CSS:
.ie6 .myDivClassName,
.ie7 .myDivClassName,
.ie8 .myDivClassName,
.ie9 .myDivClassName,
.ie10 .myDivClassName {
display: block;
}
Depends on what you are trying to do.
Is there a way to use HTML conditional tags like <!--[if (IE 6)|(IE 7)]> inside a .js file as I need to execute certain javascript if visitor is using IE6 or IE7?
Thanks
I'd do something like this with the markup...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
Then in your JS, you can check for the appropriate body styles:
if (html tag has class lt-ie8) {
// we're in ie7 and below land
}
You can use conditional comments in your markup, and use the result to create conditional variables in your js. Start your doc with this:
<!DOCTYPE HTML>
<!--[if lte IE 7]><html lang="en" class="ieDetect ie7Detect"><![endif]-->
<!--[if IE 8]><html lang="en" class="ieDetect ie8Detect"><![endif]-->
<!--[if IE 9]><html lang="en" class="ieDetect ie9Detect"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
I usually prefer to use jQuery for this and check for classes:
var ieDetect = $('.ieDetect').length
, ie7Detect = $('.ie7Detect').length
, ie8Detect = $('.ie8Detect').length
, ie9Detect = $('.ie9Detect').length
;
if (ieDetect){
// do stuff with IE
}
If you want to only use JS, you can either use a class fetching function and retain the markup above, or you could forgo the generic ieDetect class and just use ie7Detect (and 8,9) as IDs on the html tag.
var ie7Detect = document.getElementById("ie7Detect").length
, etc...
Separate JS files are the best option.
However you can use navigator.userAgent:
var userAgent = navigator.userAgent;
From this you can determine the browser the user is using to view your page and use the if statement built into JS.
User navigator.userAgent to check the browser the user has.
Recommended reading: http://api.jquery.com/jQuery.support/
hi first (Jezen Thomas ty your code help me, but i cant use it), i have to make this code work with out calling jquery (since we dont know if it will be supported), so basically i have to get this code to show the ie version, only using html and javascript
<html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<title>A HTML document needs a title to be valid.</title>
</head>
<body>
<script type="text/javascript">
window.onload = function mytest(){
"use strict";
// Detecting IE
var oldIE
if ($('html').is('.ie6, .ie7, .ie8')) {
oldIE = 1;
}
if (oldIE == 1) {
document.write("version<ie9")
} else {
document.write(" version => ie9")
}
}
</script>
</body>
</html>
i have to remove the ($) but i dont know for what to replace it (i just recently started with javascript)
alert(navigator.userAgent);
I hope that give you the start you need.
I build a website only with CSS3 & HTML5.
So IE can't display it correct.
I want to show every Internet Explorer-User a other site with a simple content: Please use a modern browser like Google Chrome, Fire Fox ...
How can i detect the browser and show a other site?
Or can i build a text for the Internet Explorer users like
<div style="display:none;">Please use a modern Browser!</div>
and let show it only for Internet Explorer-Users?
You can utilize IE detects that IE itself puts out. So place the div with the display none, and then make an ie stylesheet and target all the different versions you would like.
More information on specifics here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
there is better option instead of adding a new style sheet
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-US">
<!--<![endif]-->
and in style sheet just add a class for selector
.page {
//some style for morden browsers
}
.ie .page {
//some style for all ie versions
}
.ie6 .page {
//some style for ie 6 only
}
.ie7 .page {
//some style for ie 7 only
}
.ie8 .page {
//some style for ie 8 only
}
.ie9 .page {
//some style for ie 9 only
}
it would be done using a single style sheet
navigator.userAgent
there is a very cool script here: http://www.quirksmode.org/js/detect.html
You can use the following :
<?php
$u_agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/MSIE/i', $u_agent))
{
// Change http://www.othersite.com, by your other site URL
header('Location: http://www.othersite.com');
}
?>
You can also use conditional comments for IE.