JavaScript

[clemos]

I need some help with putting JavaScript in two browsers. I know different browsers have differences when executing JavaScript, and I've been looking at pages that list differences (like this one http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/), but I don't know how to make some examples. Any simple difference like this would be fine:
The IE Syntax:



document.getElementById("header").style.styleFloat = "left";


The Firefox Syntax:



document.getElementById("header").style.cssFloat = "left";

[Peter]

Use a library like jQuery, or are you actually looking for lists of differences?

[Dukey]

I agree with Peter, JQuery should remove these issues and make things more simple :)

[clemos]

I've read jQuery can solve these problems, but I need to make examples showing how to get the same output in two browsers.

[clemos]

How would I show an example using the .innerText property in IE 8 and .textContent property in Firefox?

[clemos]

Anyone have any ideas? I'm pretty pants at JavaScript and can't find anything useful from searching Google. :lol:

[LiegeLord]

The 'navigator' object contains browser information and works on pretty much every modern browser. It doesn't work on some really old browsers, but, people shouldn't be using those anymore.

Information on Navigator Object (http://www.w3schools.com/js/js_browser.asp)

You could use this (Or many other Browser Detection Methods (http://www.google.co.uk/search?q=Javascript+detect+browser&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a)) to detect if the user is using Mozilla or MSIE and use your innerText accordingly.

As everyone above has suggested, jQuery is a good library to use to eliminate these sorts of issues, however, if your new to Javascript, it might be a good idea not to use jQuery in order to learn some standard Javascript first.

[andyn]

Anyone have any ideas? I'm pretty pants at JavaScript and can't find anything useful from searching Google. :lol:

That's because everyone uses jQuery nowadays, tbh :P.

Using raw javascript for this kind of thing is an exercise in frustration.

One possibility is to download the human-readable version of the jquery API and see if you can work out how they do these things. Not a simple option, but it will certainly have the answers you are looking for.

[clemos]

Thanks for your replies. I'm not looking to use JavaScript (for now anyway), it's for my coursework where I have to show two ways of getting the same output in two different browsers.

[Smifis]

document.write() would result in the same output on two browsers :D

[clemos]

document.write() would result in the same output on two browsers :D
Has to be two ways of using JavaScript for the same output e.g. ".innerText" for IE 8 and ".textContent" for Firefox. I just don't know how to code this in order to show evidence. :p

[Smifis]

I think If you have 2 examples on a single web page, let say, one button will be for ie, one for firefox, you clikc the button for ie and it will execute code that will work in ie but not firefox, you click the firefox button and the code for firefox runs,

Does that help?

[clemos]

I tried doing something similar, where I used the "gte" thing for IE to determine what browser was being used, and only execute some code if the browser matched the criteria. I think I need to use an else statement, something along the lines of this:

var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
var elem = document.getElementById('id');
var elem2 = document.getElementById ('id2');
if(!hasInnerText){
elem.textContent = value;
elem2.textContent = value; }

else{
elem.innerText = value;
elem2.innerText = value; }
But obviously I need to understand it in order to annotate it/say how it works.

[heavywater]

If it's just IE you're using, try conditional comments? They're horrible but they'll work.


<!--[if IE]> <script type="text/javascript">document.getElementById("header").style.styleFloat = "left";</scirpt> <![endif]-->
<!--[if !IE]><!--> <firefox script> <!--<![endif]-->

or <!--[if IE8]> if you just wanted it in IE8.

[clemos]

I think If you have 2 examples on a single web page, let say, one button will be for ie, one for firefox, you clikc the button for ie and it will execute code that will work in ie but not firefox, you click the firefox button and the code for firefox runs,

Does that help?
This would be perfect (I think :lol:), but only using one button. Can't use conditional comments, tried that and it was wrong apparently.

[Smifis]

You could use

try {

}
catch {

}

[Martin]

Thanks for your replies. I'm not looking to use JavaScript (for now anyway), it's for my coursework where I have to show two ways of getting the same output in two different browsers.
I have similar to do, it's a right pain...
We had to develop a website using tables... So I opted to say "No" and use DIV tags.

[clemos]

You could use

try {

}
catch {

}
Ermm how do I code that? :lol: I'll quick Google it...


I have similar to do, it's a right pain...
We had to develop a website using tables... So I opted to say "No" and use DIV tags.
Yep it is a right pain, because this task is the last one I need to do in order to get a merit grade for the unit. Why would you be told to develop using tables? They are horrible and the old school way of coding a site. I used a few tables within my site, but it is my first site and if I was given more time I would use CSS. Good on you for using a div layout. :thumb:

[Smifis]

http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch2

You could try and execute the code for internet explorer in the try, and if theres an error, it'll go to the catch part and execute that code, which could be for firefox.

[Peter]

What's wrong with something like this:

<html>
<head>
<script type="text/javascript">
function innerTextStuff() {
if (document.getElementsByTagName("body")[0].innerText != undefined) {
// Internet Explorer
alert("Internet Explorer, using innerText:\n\n" + document.getElementById('innerTextExample').innerT ext);
}
else {
// Other
alert("Other Browser, using textContent:\n\n" + document.getElementById('innerTextExample').textCo ntent);
}
}
</script>
</head>
<body>
<div style="display: none;" id="innerTextExample">Contents of the innerText test DIV.</div>
<input onclick="javascript:innerTextStuff();" type="button" value="innerText vs. textContent" />
</body>
</html>

[clemos]

What's wrong with something like this:

<html>
<head>
<script type="text/javascript">
function innerTextStuff() {
if (document.getElementsByTagName("body")[0].innerText != undefined) {
// Internet Explorer
alert("Internet Explorer, using innerText:\n\n" + document.getElementById('innerTextExample').innerT ext);
}
else {
// Other
alert("Other Browser, using textContent:\n\n" + document.getElementById('innerTextExample').textCo ntent);
}
}
</script>
</head>
<body>
<div style="display: none;" id="innerTextExample">Contents of the innerText test DIV.</div>
<input onclick="javascript:innerTextStuff();" type="button" value="innerText vs. textContent" />
</body>
</html>
This is basically what I wanted to do. :thumb: Thanks for this, as well as everyone else for your inputs.

[heavywater]

To be honest, from what you've said it sounds like they want you to use navigator.


if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat = "left"; }
else {document.getElementById("header").style.cssFloat = "left"; };

EDIT- Lol, never mind, teach me not to refresh the page. :D

[clemos]

To be honest, from what you've said it sounds like they want you to use navigator.


if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat = "left"; }
else {document.getElementById("header").style.cssFloat = "left"; };EDIT- Lol, never mind, teach me not to refresh the page. :D
This will also be perfect for the task. Basically I just have to show that different browsers (IE:rolleyes:) use different ways to get the same output. ".style.styleFloat" and ".style.cssFloat" were among the examples I remember seeing.

Edit:
What am I missing from this?

<html>
<head>
<script type="text/javascript">

if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat = "right"; }

else {document.getElementById("header").style.cssFloat = "right"; };

</script>
</head>
<body>
<div id="header">This it to test it works.</div>
</body>
</html>

[Peter]

This will also be perfect for the task. Basically I just have to show that different browsers (IE:rolleyes:) use different ways to get the same output. ".style.styleFloat" and ".style.cssFloat" were among the examples I remember seeing.

Edit:
What am I missing from this?

<html>
<head>
<script type="text/javascript">

if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat = "right"; }

else {document.getElementById("header").style.cssFloat = "right"; };

</script>
</head>
<body>
<div id="header">This it to test it works.</div>
</body>
</html>

Nothing missing but incorrect syntax (an extra semi-colon):

<html>
<head>
<script type="text/javascript">

if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat = "right"; }

else {document.getElementById("header").style.cssFloat = "right"; }

</script>
</head>
<body>
<div id="header">This it to test it works.</div>
</body>
</html>

[heavywater]

You'll want to use window.onLoad or something, the script isn't actually being called.


<script type="text/javascript">
function float()
{
if (navigator.appName == "Microsoft Internet Explorer")
{document.getElementById("header").style.styleFloat="right";}
else
{document.getElementById("header").style.cssFloat="right";}
}
window.onload = float;
</script>

I had it in there initially but wasn't sure if you wanted it, I guess that's where the errant semicolon came from. :D

Also, for some reason the sandbox I was using wasn't playing nice with the nesting so watch out for that.

[clemos]

Thanks everyone. I used heavywater's example to finish off the last merit criteria. :D