...

View Full Version : How to change Javascript to work with IE



cbanks
11-07-2012, 04:03 PM
<style type="text/css">
.highlight{
background-color: orange;
color: white;
}
</style>

<script type="text/javascript">
function createListener(){
document.addEventListener('click', function(event){
var element=event.target;
if(element!==document.body){
if(element.className===''){
element.className='highlight';
} else {
element.className='';
}
}
}, false);
}
</script>

<body onload="createListener()">

Philip M
11-07-2012, 04:25 PM
The standard way to attach event listeners is to use addEventListener but IE8 and earlier use attachEvent instead.

http://javascript.about.com/library/bldom19.htm

http://www.howtocreate.co.uk/tutorials/javascript/domevents


BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

cbanks
11-07-2012, 04:34 PM
I changed the line below, but it still doesn't work. What am I missing?


document.attachEvent('onclick', function(event){

felgall
11-07-2012, 06:36 PM
You might need to show a bit more of the code. How have you combined addEventListener and attachEvent together?

cbanks
11-07-2012, 07:01 PM
I changed the code to what appears below, but it still doesn't work.


<style type="text/css">
.highlight{
background-color: orange;
color: white;
}
</style>

<script type="text/javascript">
function createListener(){
document.attachEvent('onclick', function(event){
var element=event.target;
if(element!==document.body){
if(element.className===''){
element.className='highlight';
} else {
element.className='';
}
}
}, false);
}
</script>

<body onload="createListener()">

Philip M
11-07-2012, 07:28 PM
Try using the forum search feaure. You will find very extensive information by felgall at

http://www.codingforums.com/showthread.php?t=265184

cbanks
11-07-2012, 08:46 PM
I took a look at that page and I'm still not sure what changes need to be made.

felgall
11-07-2012, 09:10 PM
You need to use whichever of the two types of call that the browser being used supports. The latest example of the code you posted specifically uses attachEvent and so will only work in Internet Explorer.

Substitute a call to a new addEvent function in place of attachEvent and then add code that creates that function to call either addEventListener or attachEvent depending on which the browser supports.

cbanks
11-07-2012, 10:25 PM
I don't need it to work for other browsers, just IE 8 and older, so that's why I changed some of the code to use attachEvent instead. I just don't know what else to add or change to make the code work.

Old Pedant
11-08-2012, 12:04 AM
That code is wrong.

MSIE doesn't pass the event object to the event handlers.

You need to simply get it via window.event within the body of the function.

Also, attachEvent only takes two arguments. Though I can't see how passing the third one would hurt.

Also, the window.event object does *NOT* have any property named target. The correct property is srcElement.

If you are going to do MSIE-only development, maybe you should read the MSIE docs?

Try this:


<html>
<head>
<style type="text/css">
.highlight{ background-color: orange; color: white; }
</style>
</head>
<body>
stuff and more
<input type="button" value="click me" />

<script type="text/javascript">
function createListener()
{
document.attachEvent('onclick',
function()
{
var evt = window.event;
var element = evt.srcElement;
if(element!==document.body)
{
if(element.className=="") { element.className='highlight'; }
else { element.className=''; }
}
}
);
}
createListener();
</script>
</body>
</html>


Or, even simpler:


<html>
<head>
<style type="text/css">
.highlight{ background-color: orange; color: white; }
</style>
</head>
<body>
stuff and more
<input type="button" value="click me" />

<script type="text/javascript">
document.attachEvent('onclick',
function()
{
var elem = window.event.srcElement;
if( elem !== document.body )
{
elem.className = (elem.className=="") ? "highlight" : "";
}
}
);
</script>
</body>
</html>

cbanks
11-08-2012, 03:24 PM
I can't get either one of those code examples to work.

felgall
11-08-2012, 06:52 PM
I can't get either one of those code examples to work.

Which version of IE are you using? That code should work fine in IE6, 7 and 8 (and probably 5 as well).

cbanks
11-08-2012, 07:32 PM
I got it to work. But when I save the page I want it to save the highlighting changes that I've made. How would I do that?

Old Pedant
11-08-2012, 07:45 PM
You can't "save" an HTML page.

What is "save" supposed to mean?

You mean bookmark it?

Regardless of whether it is bookmarked or not, you probably need to learn to use cookies to maintain page state.

Note that cookies are on a PER MACHINE PER USER basis. So highlighting done by Joe won't be seen by Mary.

felgall
11-08-2012, 08:01 PM
The only way to"save" the changes so everyone can see them is to use a call to the server to pass the changes so that a server side script can update the original page source.

Old Pedant
11-08-2012, 08:13 PM
I got it to work. But when I save the page I want it to save the highlighting changes that I've made. How would I do that?
Out of curiosity, what did you change?

The code worked perfectly for me in MSIE. But I only tested with MSIE 8 and 9.

cbanks
11-08-2012, 08:38 PM
IE has a Save As feature on the File menu. After highlighting certain paragraphs, I want to save the page and have those changes saved.

Old Pedant
11-08-2012, 08:53 PM
You can't.

SAVE AS works off of the HTML.

The changes you make in JavaScript do not affect the HTML.

When you do SAVE AS, it saves the HTML *with* the JavaScript *AS TEXT*. It does not save the screen view of the page.

felgall
11-08-2012, 09:47 PM
You can't.

SAVE AS works off of the HTML.

The changes you make in JavaScript do not affect the HTML.

When you do SAVE AS, it saves the HTML *with* the JavaScript *AS TEXT*. It does not save the screen view of the page.

There was one browser that was an exception to this but it wasn't a version of Internet Explorer - Netscape 7.0 saved the current version of the page including any changes made by running the HTML (it reverted back to the standard with 7.1 probably due to too many people who'd paid hundreds of dollars for code to "protect" their page source complaining that with that browser it only required one mouse click to bypass all their efforts while with other browsers it requires two clicks and a couple of lines of JavaScript).

cbanks
11-08-2012, 10:34 PM
The code I posted as my first post in this thread does what I'm saying. If you had some text to the body and then pull it up in Firefox, you can highlight a paragraph and then use the Save As feature and it saves the highlighting. I want to be able to do that with the code that works for IE8.

Old Pedant
11-08-2012, 11:14 PM
WOW! You are right! FireFox *DOES* do this!

Hey, Felgall! Another browser that seems to break the rules!

Anyway, CBanks, sorry, but MSIE does NOT do it.

Neither does CHROME.

So...either use FireFox or you are out of luck.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum