I'm new to JS and I need to detect whenever someone enters to my site with the Interent Explorer Browser. So, I made the following code and the div that I created is being scripted on other web browsers I assume the problem is with the .getElementById or such.
So after the talking, here's the code:
<html>
<head>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById("example");
}
</script>
</head>
<body>
<div id ="example">You're Using Interent Explorer. </div>
</body>
</html>
Thanks alot for helpers.
These HTML comments are only rendered by internet explorer
<body>
<!--[if IE]>
<div id ="example">You're Using Interent Explorer. </div>
<![endif]-->
</body>
most of the time it's for CSS, because you can target IE 6,7,8,etc or greater than IE 7:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Example
1 To begin with, you should hide the div (display:none).
2 You need to actually do something with the div in your script (fiddle).
<html>
<head>
<script type="text/javascript">
window.onload = function(){
if (navigator.appName === "Microsoft Internet Explorer")
{
document.getElementById("example").style.display = "block";
}
}
</script>
</head>
<body>
<div id ="example" style="display:none;">You're Using Interent Explorer. </div>
</body>
</html>
Otherwise, you could just add the div contextually (fiddle)
window.onload = function(){
if (navigator.appName === "Microsoft Internet Explorer")
{
document.body.appendChild(
document.createElement("div")
).appendChild(
document.createTextNode("You're Using Interent Explorer"));
}
}
First of all, JavaScript should not be used to detect browsers. Like, for Chrome, it gives the result "Netscape". Anyways to answer your question, what about an alternative:
<html>
<head>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById("example").innerHTML="You're using Internet Explorer!";
}
</script>
</head>
<body>
<div id ="example"></div>
</body>
</html>
What it does is it will have no content in the specific div element, that is, example. Only if JavaScript detects that one is using Internet Explorer, it writes "You're using IE" in the div element. For example, you can check out http://www.ducksearch.in/ using Internet Explorer. It shows an alert box that some features may be missing if you use IE. Very basic JavaScript, indeed :)
Good luck on your way ahead, and all the best coding in JavaScript.
Related
I have a simple html code that sets the value of input of type time in document ready function. it works in computer browser correctly. but it does not work in mobile devices.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<input type="time" id="time" style="height:25px">
<script>
$(document).ready(function (){
$("#time").attr("value","23:30");
});
</script>
</body>
</html>
while raw javascript works perfectly (below code):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<input type="time" id="time" style="height:25px">
<script>
$(document).ready(function (){
document.getElementById("time").value = "23:30";
});
</script>
</body>
</html>
any idea?
I did some search on Google and Mozilla has a great explanation about <input type="time">. some mobile browsers like Safari does not support this input yet.
As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively
Source
this code behaves like time input on my mobile phone. use val method instead att.
$(document).ready(function (){
$("#time").val("23:30");
});
let me know if this helps you.
I am making a website with HTML, PHP Javscript and CSS. I have HTML, PHP and Javascript in the same document and a link to the CSS file. Am now checking for compatibility with different browsers and noticed that Safari in iOS 10.2.1 doesn't seem to find the CSS. Why is this?
First I tried having all the HTML code printed from inside the <?php ?> (and the Javascript before the PHP code). This worked in most browsers, but at least one version of Firefox had some trouble finding the link to my CSS file (the CSS link was printed from the PHP, but I didn't have the <html>, <head> or <body> tags in this version).
After adding the above mentioned HTML tags outside of the PHP code (and including the CSS link in the head), the HTML now surrounds the PHP and Javascript code (see code below). This solved the Firefox issue. But the CSS now doesn't work in Safari in iOS 10.2.1 (maybe didn't earlier either, never tested).
Basic structure of code:
<!DOCTYPE html>
<html>
<head>
<title>Title<title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
×<br>
Subtest 7<br>
Subtest 8
</div>
</body>
<script>
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
?>
</html>
You're missing the end tag for your title element. Adding </title> should fix the problem.
Try it like this. The php code can be in wherever you want!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
×<br>
Subtest 7<br>
Subtest 8
</div>
</body>
<script type="text/javascript">
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
echo "Test for see where will appear this text";
?>
</html>
I realised that the Javascript should be inside the body or head of the HTML! Apparently worked for most browsers even with the Javascript outside of head and body, but changing it solved the issue for Safari mobile iOS 10.2.1.
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
My programmer is on vacation so I need your help! I discovered a page that has a bug for IE users. I want to redirect all IE users to a different page.
How can I do this? I searched all through Google and Stackoverflow and cannot find an answer. (I found some scripts, and tried them, but none worked).
Try:
<!--[if IE]>
<script type="text/javascript">
window.location = "http://www.google.com/";
</script>
<![endif]-->
Or, a non-JS solution, put the following in your head section:
<!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.google.com">
<![endif]-->
A reminder that the [if IE] solution does not apply to IE 10 or greater. This can be very annoying for "features" that have not been fixed by IE 10. I am going to try the php and java solutions and re-comment.
I put this in header and it works for all IE versions:
<!-- For IE <= 9 -->
<!--[if IE]>
<script type="text/javascript">
window.location = "https://google.com";
</script>
<![endif]-->
<!-- For IE > 9 -->
<script type="text/javascript">
if (window.navigator.msPointerEnabled) {
window.location = "https://google.com";
}
</script>
For Internet Explorer 10 this one works well
<script type="text/javascript">
if (navigator.appName == 'Microsoft Internet Explorer')
{
self.location = "http://www.itmaestro.in"
}
</script>
Server-side solution using PHP that's guaranteed to work on all browsers:
<?
if ( preg_match("/MSIE/",$_SERVER['HTTP_USER_AGENT']) )
header("Location: indexIE.html");
else
header("Location: indexNonIE.html");
exit;
?>
Support for conditional comments has been removed in Internet Explorer 10 standards
I'm use this dirty hack for redirecting IE10+ users
<script type="text/javascript">
var check = true;
</script>
<!--[if lte IE 9]>
<script type="text/javascript">
var check = false;
</script>
<![endif]-->
<script type="text/javascript">
if (check) {
window.location = "page_for_ie10+.html";
}
</script>
js code:
<script>if (/*#cc_on!#*/false || (!!window.MSInputMethodContext && !!document.documentMode)){window.location.href="https://....html";}</script>
You can also use this Boycott-IE:upgrade-your-browser
I've written some very simple code on Internet Explorer 8 and I don't understand why nothing happens when I open the page with IE (why the text 'test' doesn't appear on the page).
I've tried on Firefox and Chrome and it works perfectly.
my code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
<script type="text/javascript">
function display() {
output.innerHTML+='test';
}
</script>
</head>
<body onload="display()">
<div id="output">
</div>
</body>
</html>
Edit : let IE change your setting, don't do it by hand or it gets weird :-))
document.getElementById('output').innerHTML += 'test';
Try:
function display() {
document.getElementById('output').innerHTML+='test';
}