Help needed for non-IE browser compatibility in JavaScript

My code works in IE but not in Firefox. I am trying to get the onmousedown and onmouseup events to work as well as the functions swapFE, swapEF and setUpTranslation in a browser other than IE. I basically have French phrases that appear upon the browser loading and when I click down on a phrase with my mouse they should translate to English and when I let up on the mouse they should turn back to French. That's the basic idea. Any other questions feel free to ask.

Could you look at the code below and make suggestions on what I'm doing wrong for non-IE browsers. I can get this to work for IE if I uncomment out the correct lines but it doesn't seem to work for Firefox.

Any suggestions?

/* Function List: eventSource(e) Returns the source of an event in either event model swapFE(phrase, pnum) Changes a French phrase to the English version of that phrase. swapEF(phrase, pnum) Changes an English phrase ot the Frech version of that phrase. setUpTranslation() Insert the current week's french phrases into document and set up event handlers for the phrases. */ //Returns the source of an event in either event model function eventSource(e) { var IE = document.attachEvent ? true:false; var DOM = document.addEventListener ? true: false; if (IE) return event.srcElement; else if (DOM) return e.currentTarget; } //I added the function below to try and make it cross-browser compatible but it did not work....help! //function applysetUpTranslation(phrases[i],"click",swapFE(e),false) { //if (IE) phrases[i].attachEvent("on"+onmousedown, swapFE(e)); //else if (DOM) phrases[i].addEventListener(click,swapFE(e),true); //} function setUpTranslation() { var IE = document.attachEvent ? true:false; var DOM = document.addEventListener ? true: false; var phrasesContainer = document.getElementById("phrases"); var phrases= phrasesContainer.getElementsByTagName("p"); for (i = 0; i<phrases.length; i++) { phrases[i].number = i; phrases[i].childNodes[1].innerHTML = french[i]; phrases[i].childNodes[1].id = i; //childNodes[1] is the second span in the <p> array //I noticed that the function is referenced here as swapFE(event) and the function is written as swapFE(e)...does that make a difference in what shows up?? //phrases[i].childNodes[1].onmousedown = function() { swapFE(event); }; phrases[i].childNodes[1].onmousedown = swapFE; //phrases[i].childNodes[1].onmouseup = function() { swapEF(event); }; phrases[i].childNodes[1].onmouseup = swapEF; } } //this function changes the French phrase to an English phrase. function swapFE(e) { var phrase = eventSource(e); //phrase.innerText = english[phrase.id]; var parent = phrase.parentNode; //childNodes[0] is the number of the phrase +1 var idnum = parent.childNodes[0]; //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. var phrasenum = parseInt(idnum.innerHTML)-1; phrase.innerText = english[phrasenum]; parent.childNodes[1].style.fontStyle= "normal"; parent.childNodes[1].style.color = "rgb(155, 102, 102)"; } function swapEF(e) { var phrase = e.srcElement; //phrase.innerText = english[phrase.id]; var parent = phrase.parentNode; var idnum = parent.childNodes[0]; var phrasenum = parseInt(idnum.innerHTML)-1; phrase.innerText = french[phrasenum]; parent.childNodes[1].style.fontStyle= "italic"; parent.childNodes[1].style.color= "black"; }

-------------Problems Reply------------

As a suggestion, you may want to take some time and look into jQuery as it's ability to deal with events across browsers is very good. The code to do what you wanted to do could be a bit simpler.

I also notice that you are setting the english phrase based on dom node number. I'm fairly sure this isn't going to be a reliable from a cross browser perspective. Here is how I would approach that problem using jQuery.

First the HTML

<div class="text">
<span class="french">French Phrase</span>
<span class="english" style="display:none;">English Phrase</span>
</div>

Repeat that as many times as needed.

Now some jQuery

$('.text').bind("mousedown",function() {
$(this).find(".french").hide();
$(this).find(".english").show();
});
$('.text').bind("mouseup",function() {
$(this).find(".english").hide();
$(this).find(".french").show();
});

These two jQuery statements will bind the mousedown and mouseup events to all of the elements within the page that have the "text" class. Then when mousedown happens, it looks for the elements nested within that element with classes "french" and "english" and shows/hides them (sets the css "display" property) to display the language you want.

So if you are willing to consider jQuery as an option you might try this.

I now understand what the problem is. When raising an event Firefox will pass the event object to the function, while IE will set a global event object.

Take a look at this line:

e = e || event;

If the current browser is IE the argument e will be undefined and we should assign the global object event to the argument e.

function swapFE(e) {
if (!e) {
alert("This is IE!");
}
else {
alert("This is not IE!");
}
e = e || event;
var phrase = eventSource(e);
//phrase.innerText = english[phrase.id];
var parent = phrase.parentNode;
//childNodes[0] is the number of the phrase +1
var idnum = parent.childNodes[0];
//parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number.
var phrasenum = parseInt(idnum.innerHTML)-1;
phrase.innerText = english[phrasenum];
parent.childNodes[1].style.fontStyle= "normal";
parent.childNodes[1].style.color = "rgb(155, 102, 102)";
}

I was able to get my website to work in Firefox. I figured out that my main problem was that I had been using innerText rather than innerHTML in some of the declarations. Changing that made my website work in IE, Firefox and Chrome. Thanks for all suggestions and help though. I appreciate it.

Ashley

Category:javascript Views:0 Time:2010-02-04

Related post

  • How to overcome browser compatibility using javascript? 2011-08-10

    I have the following javascript in one of my .aspx page window.onbeforeunload = function(evt) { if (typeof evt == 'undefined') { evt = window.event; } if (evt) { __doPostBack('', 'MyButtonClick'); } } This is getting fired if i am working with IE but

  • Typical pitfalls of cross-browser compatibility 2008-09-30

    What are the most common browser compatibility issues across the major desktop browsers? No dups please. Up-vote problems you've run into. I'm hoping for the list to self-sort. "IE sux" is not a pitfall, but a call for down-vote. [Edit] Yes, I know i

  • Does W3C validated CSS automatically mean cross-browser compatibility? 2009-01-06

    I've finally completed a working version of my first ever CSS-supported site (thanks to some very helpful suggestions on this forum) and have validated the CSS. Before I go out and find (buy?) another machine (I'm a Mac) to check IE on, is it remotel

  • ASP.net controls: Browser compatibility 2009-02-27

    I'm using some ASP.net controls in my project especially WEbcombo,Grid(for inline editing) and i face t working good in firefox and IE6 but not in Safari(throwing exceptions). so i just wanna know or want a list of ASP.net controls which could not wo

  • Browser Compatibility testing 2009-04-16

    How do i do browser compatibility testing? Is there any particular way or checklist through which i can confirm compatibility testing on browser IE 6/7/8 is done. Let me extend my query in particular to a application : Let us assume a web application

  • How to create and use a XML document object properly considering browser compatibility? 2009-04-26

    Now I'm working on a web project. I need to create a XML document object using a given string buffer in JavaScript. I've successfully made it run smoothly on IE, but apparently I need to do some more work to improve its compatibility. To help you und

  • Browser-Compatibility Testing with Visual Studio and ASP.NET apps 2009-05-07

    I'm currently testing browser compatibility with IE7 for an app that I built initially for use with Firefox. The assumption at the time within our organization was that we could get everyone to use Firefox, but that's been called into question, so he

  • Browser compatibility 2009-08-13

    Just wanted to know if ASP.NET supports other browsers as well as it supports Internet explorer? Also, does Spring/Java framework for a web platform would them in any better way…? Thanks. --------------Solutions------------- With ASP.NET, the code is

  • Does JavaScript code suffer severely from cross-browser compatibility issues? 2009-08-27

    Is it in general very hard to port JavaScript code to another browser platform? --------------Solutions------------- You don't need to "port" javascript, since it runs in every major (graphical) browser. Cross-browser issues are a massive pain for JS

  • Any solution for reducing browser compatibility problem while writing css style as a web designer/web developer 2009-09-13

    Any solution for reducing browser compatibility problem while writing css style. --------------Solutions------------- These three are the main points you need to do yourself: Write correct markup - make sure it validates Make sure your markup is in s

  • Is   allowed to make space in terms of semantic, web standards and accessibility and cross browser compatibility? 2009-11-07

    Is &nbsp; allowed to make space in terms of semantic, web standards and accessibility and cross browser compatibility? --------------Solutions------------- The reason it was invented was to prevent line breaks (in fact it's an acronym "non-breaki

  • ASP.NET Report Viewer control browser compatability issue 2009-11-11

    We render SSRS reports in ASP.NET forms using Report Viewer control (Remote Mode). The report renders fine in IE6 + but it does not render the following elements in Google Chrome. 1. Date Picker does not show up in the Parameter prompt 2. Tool Bar is

  • Focussing on Style Sheets and Cross Browser Compatibility 2009-12-03

    Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it a

  • What steps could be taken to avoid cross-browser compatability issues? 2009-12-04

    Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozi

  • jQuery and mobile browser compatibility? 2010-02-09

    I want to build a relatively simple version of my site for mobile phones, but I will definitely need JavaScript and jQuery for many functions. Googling didn't help to find an answer. How is compatibility of jQuery with popular browsers in mobile phon

  • HTML 5 Browser Compatibility Chart - HTML 5 in Old Browsers? 2010-02-12

    I have just started considering using the HTML 5 api for a Rails/JQuery project, so I can use that great data- attribute to store values. I am worried though about browser compatibility issues. I have two questions (basic questions): In order to use

  • Searching for Browser Compatibility Tool 2010-02-17

    Hay I am using IE Tester for browser compatibility, but its only for Internet explorer. Is there any Browser Compatibility Tool for all most all commonly used browsers. --------------Solutions------------- See http://spoon.net/browsers/ Browsers bund

  • Browser compatibility jQuery UI dialog 2010-02-27

    I have a jQuery Dialog box on one of my pages. One of the buttons in the dialog boxes triggers a JavaScript prompt OnClick. Everything seems OK with the lastest versions of Internet Explorer, Chrome, and Mozilla Firefox, but some users are reporting

  • CSS cross browser compatibility on Ubuntu 2010-05-07

    I'm currently working in web development and my default desktop is Ubuntu and I'm kind of happy with the setup and applications I got going. But I need to test web pages for cross browser compatibility while still being on Ubuntu. I have gone through

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.151 (s). 11 q(s)