I'm making an HTML page that plays <audio> with a OnClick on an <img> tags as a trigger..
Javascript:
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("play"))
{
element.src="stop.png";
document.getElementById('audiotag1').src="music.mp3";
document.getElementById('audiotag1').play();
}
else
{
element.src="play.png";
document.getElementById('audiotag1').src="";
}
}
IMG tag:
<img id="myimage" onclick="changeImage()" src="play.png" width="20" height="20" style="position:absolute;top:5px;left:5px;">
AUDIO tag:
<audio loop id="audiotag1" src="music.mp3" preload="auto"></audio>
So, here's the problem, since IE8 not support <audio> tags, i want to make the image disappear only on IE8 or those who not support <audio> tag. Is it possible? What should I do?
I was once use disabled='disabled' but it wont work.
Try using conditional comments - namely the condition <!--[if lte IE 8]>.
This would hide your image for less than and including IE8 (so IE7, IE6 etc):
<!--[if lte IE 8]>
#myimage {
display: none;
}
-->
So your whole code for it would look something like this:
<!--[if IE 8]>
<style>
#myimage {
display: none;
}
</style>
<![end if]-->
What you need is Modernizr. You can check the support for like anything.
Also Modernizr includes the html5shiv that is a must if you are planning to support oldie with html5.
You can check for
if (Modernizr.audio) {}
This is much better then checking for specific browsers as it checks the actual support for the html5 audio tag and does not make assumptions based on the browser (IE is not the only outdated browser out there :D)
You can also check for actual file format support. The example from the Modernizr documentation:
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
(Although this is a confusing way of using nested ? : operators IMHO)
You can try through javascript
check if you detect IE then return false
if(navigator.appName.indexOf("Internet Explorer") == -1) {
document.getElementById('myimage').onclick = function () {
return false;
}
} else {
document.getElementById('myimage').onclick = function () {
alert("cliiing");
return true;
}
}
Related
I have this radio stream player code. It words perfectly on Chrome and iOS Safari, but it won't work on Firefox and Internet Explorer 11.
It's a bit of my index.php file:
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("pause")) {
image.src = "play.png";
document.getElementById('sound1').pause();
} else {
image.src = "pause.png";
document.getElementById('sound1').play();
}
}
</script>
When you enter the page, the image is "play.png" by default. When you press on it it changes to "pause.png" and the music starts playing.
And here's this script in html:
<audio id="sound1" src="http://radiostation.com:8000/stream" type="audio/mpeg"></audio>
<img id="myImage" onclick="changeImage();" src="play.png" style="position: absolute; top: 130px; left: 23px;">
The problem is only on playing the stream, the image changes on all browsers. Would be grateful for any any help. Thanks :)
Firefox and Internet explorer do not support audio/aacp content, which is the format of that stream
For this stream you could use /stream2 which is audio/mpeg which is more widely supported amongst browsers
NOTE - developer version of firefox DOES support audio/aacp - so things may change in about 6 to 12 weeks
I would like to set a height for a div only for one browser, so it doesn't look weird in Firefox or whatever.
Here is an example:
#example {
height: 200px; <!--How can I target Safari for example?-->
height: 250px; <!--How can I target Firefox for example?-->
height: 300px; <!--How can I target IE for example?-->
width: 250px;
background-color: #FFF;
}
<div id="example">
<img src="example.png">
<p>Just some text.</p>
<p>Click here to visit www.example.com</p>
</div>
I've already tried -moz-height: 250px; but it didn't work.
navigator.appName
it will return always the same value for all browsers. I've tested on Firefox, Chrome, and Safari all browsers show Netscape. But if you want to target specific browsers you can use this code
Firefox navigator.userAgent.includes("Firefox");
Safari navigator.userAgent.includes("Safari");
Chrome navigator.userAgent.includes("Chrome");
You can use conditional comments. So you tell the code to use a certain stylesheet for a particular browser. Here's an article about it.
Here's an example:
<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->
Note: this only works with Internet Explorer. If you want to do it for some other browser you need to use JavaScript. Here's an example of JS:
<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
document.getElementById("stylesheet").setAttribute("href", "special_style.css");
}
You can access the navigator object and get the browser.
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
Then
document.getElementById("example").style.height= y;
"y" it is a variable whose value changes depending on the browser.
For this, you can use JavaScript. There is a string that you can access called navigator.appName. You can just put this:
if(navigator.appName === "Google Chrome")
// Do whatever here
replacing Microsoft Internet Explorer with your target browser.
I really hope this helps!
This code works great in Firefox, but not in IE. I've read the documentation of SVGWeb (http://svgweb.googlecode.com/svn/trunk/docs/UserManual.html), but I don't find/understand the solution, any idea?
window.onsvgload = function() {
carga();
var mySVG = document.getElementById("mySVGObject").contentDocument;
mySVG.addEventListener('click', function(evt) {
alert(evt.target.id);
}, false);
}
I'm using things like this in IE without problems:
mySVG.getElementById('Color2').style.fill='#00cc00'
with that code I can change colors and texts in the shape, but I cannot make the listener work in IE.
Edit: this works in Chrome, Firefox and IE9, I need it to work on IE7.
This is how I load the SVG object:
<div style="text-align:center" id="mapaSvg" >
<!--[if !IE]>-->
<object data="ca.svg" type="image/svg+xml"
width="700" height="800" id="mySVGObject" > <!--<![endif]-->
<!--[if lt IE 9]>
<object src="ca.svg" classid="image/svg+xml"
width="700" height="800" id="mySVGObject" > <![endif]-->
<!--[if gte IE 9]>
<object data="ca.svg" type="image/svg+xml"
width="700" height="800" id="mySVGObject" > <![endif]-->
</object>
</div>
<div style="text-align:center">
The IE development tools show the error:
"Error while firing onload: Not supported"
On the line:
mySVG.addEventListener('click', function(evt) {
alert(evt.target.id);
}, false);
Here you can see an example of SVGWEB working in IE, Firefox, Chrome on mouse over of dynamic lines:
https://www.destatis.de/bevoelkerungspyramide/
Try to call addEventListener inside this block instead onsvgload:
window.addEventListener('SVGLoad', function() {
// all SVG loaded and rendered
}, false)
These constructions are equal but I make this assumption because of an error: "Error while firing onload: Not supported"
Don't know if it helps but I had much the same problem with it working in every browser except IE8 and IE7. The problem was caused by using a self closing image element <image/> instead of <image></image> in the svg.
I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.
say that I have an id defined like this
<span id ="radiobuttonContainer"> Check to enable checkboxes:
<input type="radio" name="cov-failed" value="cover" onclick="javascript:printoutCheckboxes('cover')">
Coverage
<input type="radio" name="cov-failed" value="failed" onclick="javascript:printoutCheckboxes('failed')">
Failed</span>
I dont want to show this "spanId" in browsers below I.E 9 Because this enables alot more vizualizing of data which IE < 8 don't can manage. I know that you can have diffrent javascripts and css:es depending on browsers like this
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="root/include/excanvas.min.js"></script><![endif]-->
And then chose display: 'none';
But I wonder if it really is nessecary to have 2 equal .css files containing exactly the same information besides this single row?
Can't I just do something like this?
<!--[if lte IE 8]>document.getElementById('radiobuttonContainer').style.display = 'none';<![endif]-->
you should just be able to wrap the tag in a conditional comment. alternately, since CSS included inline in the page takes precedence over included CSS, you wouldn't have to include a second style sheet, just a new definition specific for that case. i.e.
<!--[if lte IE 8]>
<style type="text/css">
#radiobuttonContainer{
display = 'none';
};
<![endif]-->
and have that come after your included CSS file.
if you use a tool like Modernizr, you can use it to determine the capabilities of the browser.
If there's a particular feature which isn't available in IE8, you can reference it in your stylesheet, and hide this element if the browser doesn't have that feature.
Lets say the feature is HTML5 canvas, all you'd need to do is the one line script to include the Modernizr Javascript in your page, and then you'd do something like this in your CSS:
.nocanvas .radiobuttonContainer {
display:none;
}
I think you can surely do something like this:
<!--[if lte IE 8]><script type="text/javascript">
document.getElementById('radiobuttonContainer').style.display = 'none';
</script><![endif]-->
which is a merge of your examples by the way.