|
JavaScript - Differences Between Firefox And Ie
Hi all,
This is my first post of many and am new to JS. I'm familiar with Java so I shouldn't be too lost. What I'm about to do is add support for a web app from Firefox to IE that uses OpenLayers. I've searched and found a link to this site from another thread which had a list of supported functions and what not he http://www.quirksmode.org/dom/w3c_core.html From what I've read in the last hour it seems as though I will have to use some browser sniffing (isMozilla, isIE8, etc) and have multiple conditions (if-else's) in my functions to use the proper calls. Does anyone have extra material that contains differences between IE and firefox? Someone mentioned to me that in lists IE doesn't support trailing commas but ff does.. Things like this would be very helpful Thanks, Chris Similar TutorialsWhat are the differences between these? 1. Code: document.domain 2. Code: window.location.hostname 3. Code: self.document.location.hostname #1 and #2 I would think are very cloes, #3 would be if someone framed the site the script was on, it would show the framed site, and not the site that is framing? because of self. Hi, I wrote some javascript for a slideshow. The main webpage contains: Code: <FORM NAME="myform"> <IMG SRC="firstimage.jpg" NAME="mypic"><br> <INPUT TYPE="text" SIZE="180" NAME="mycaption" VALUE="First Caption"> <INPUT TYPE="button" VALUE="Prev" NAME="prevbutton" DISABLED=true ONCLICK="slideshowBack()"> <INPUT TYPE="button" VALUE="Next" NAME="nextbutton" ONCLICK="slideshowUp()"> </FORM> which assigns the image and caption for the first picture, and sets the Prev and Next buttons to disabled and not disabled respectively. So you start with the first image and caption, and an enabled "Next" button. I have global javascript variables: num (init to 1), max (init to 7), img1..7 (new Image ()), img1..7.src (filenames for the images), text1..7 (captions for the images), map1..7 (maps for the images). The function for moving to the next slide is: Code: function slideshowUp()
{
num=num+1
if (num==max+1)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.getElementById("mypic").useMap=eval("map"+num)
document.myform.mycaption.value=eval("text"+num)
document.getElementById("prevbutton").disabled=(num==1)
document.getElementById("nextbutton").disabled=(num==max)
}
I developed this in HMTLPad (10.2) and it works perfectly in that program's preview mode. But it won't work in the main browsers! In IE 9 (9.0.33), when you click the Next button, nothing at all happens. Image and caption stay the same, Next stays enabled, Prev stays disabled. Maps don't work. Chrome (38.0.2125.122 m) and Firefox (27.0) behave like each other. The images change, but not the captions or the Prev/Next buttons. Maps don't work. Is this to be expected? If so, how do I work around it? Can someone explain to me the differences between the following code snippets? Mainly i don't understand the purpose of using prototype and not sure if there is a functional difference between the syntax of declaring functions. Code: var myObj = function () {
this._myInt = 1;
}
myObj.prototype = {
myNewFunction: function() {
this._myInt = 2;
}
}
VERSUS Code: var myObj = function () {
this._myInt = 1;
function myNewFunction(){
this._myInt = 2;
}
}
I'm trying to find the difference between 2 times. Time formats are 00:00:00.0 For example... var t1 = "00:07:51.0"; var t2 = "00:53:21.0"; How do I calculate the difference between those 2 times? TIA. I'm sure this is old news, but I am trying to use the CSS Horizonal List Menu script on JavascriptKit and having some display problems. http://www.javascriptkit.com/script/...stopmenu.shtml It works well except that I can't seem to get the CSS settings to display the same way in FF and IE. I can use pixel settings for the box size to get the menu across the entire screen in FF, but it only goes about 80% of the way in IE. If I maximize for IE, then the FF menu wraps. The % options for box size don't seem to work either. I am using Dreamweaver 4 for css settings. Is this just a limitation in the way the two browsers interpret the code? If there is an easy fix I could try it, otherwise I can live with what I have. I just need to know if there is some way to deal with it or not. If interested, the current version is at: www.chromafrica.com/template/template2.html. Greeting Everyone, Can anyone breakdown the differences between programming languages in VERY VERY BASIC plain English? (i.e. HTML use for website format, CSS used for the graphics on the webpage) Here's what I have questions about: 1. Differences between the most commonly used programming languages for software/web development (Javascript, Ruby on Rails, Phyton, etc.). 2. How do you determine which programming languages to use? 3. What factors are considered? Thank in advance for the people that reply. =) Hello, As a novice, I'm not sure which one to use though. I'm trying to do a calculation with numbers in JavaScript using variables, particularly adding variables. Any guided understanding of this concept is welcome. For example: Code: n = parseint(n) document.write(n += m) The following code results in the exact same output. Is there an advantage to using i++ over ++i (or visa-versa) in the loop? Code: <script type="text/javascript">
var tarr1 = []; for (var i=0; i<10; i++) { tarr1.push(i); }
var tarr2 = []; for (var i=0; i<10; ++i) { tarr2.push(i); }
alert(tarr1.join(',')+'\n'+tarr2.join(','));
</script>
Similar question for the increment method in the following: Code: <script type="text/javascript">
var tarr1 = []; var i=0; do { tarr1.push(i); i++; } while (i<10);
var tarr2 = []; var j=0; do { tarr2.push(j); ++j; } while (j<10);
alert(tarr1.join(',')+'\n'+tarr2.join(','));
</script>
A week or so ago Old Pedant and I discussed methods of converting string inputs to numbers. I speculated that *1 might be quicker. I have now run a test:- Code: <script type = "text/javascript">
var start = new Date().getTime();
for (var i =0; i <100000; i++) {
var a = "2";
a = a *1;
}
var end = new Date().getTime();
var diff1 = end - start;
alert (diff1); // 109
var start = new Date().getTime();
for (var i =0; i <100000; i++) {
var a = "2";
a = parseInt(a);
}
var end = new Date().getTime();
var diff2 = end - start;
alert (diff2); // 140
var start = new Date().getTime();
for (var i =0; i <100000; i++) {
var a = "2";
a =Number(a);
}
var end = new Date().getTime();
var diff3 = end - start;
alert (diff3); // 140
var start = new Date().getTime();
for (var i =0; i <100000; i++) {
var a = "2";
a = +a;
}
var end = new Date().getTime();
var diff4 = end - start;
alert (diff4); // 109
</script>
The results vary slightly with each run, but the conclusion is that there is no real difference between the methods - except for a = a*1 and a = +a which consistently comes in lower than parseInt() or Number(). But the differences are too small to be significant. Hi i have this code that with Firefox work but with IE no; function showPhoto (trElemnt){ if(isKeySent) return; var photoID = ""; var photoIDCell = trElemnt.cells[1]; alert("photoID 1 ->" + photoIDCell.textContent); with IE " photoIDCell.textContent" is udefined. can some help to undertstand ? thanks in advance <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS: childNodes</title> <script type="text/javascript"> window.onload = function(){ var li = document.getElementsByTagName("ul")[0].childNodes; var i; var list; for (i=0; i<li.length; i++) { list = li[i]; if(list.nodeType == 1){ list.style.color = "red"; } } } </script> </head> <body> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> </ul> </body> </html> Is there any way (except giving ID) that we can let firefox read nodeType as element type? Because I want li[2] (List 3) to be exceptionally green with other being red I know in IE it's simpler, just li[2].style.color = "green"; But Firefox treats everything as a node. Many thanks for any help! Hi, I'm new to JS and been thrown in at the deepend as our developer has just left! You are dealing with a total newbie! I have the following script that is not working in FF but is fine in Chrome and IE can anyone tell me what is wrong with it please?! Code:
function showTotalCost(val)
{
if(val=='yes')
{
if(document.getElementById('secondaryeventtype').value == 'adventure')
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 100).toFixed(2) + ' (including insurance)';
}
else
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 27).toFixed(2) + ' (including insurance)';
}
}
else
{
document.getElementById('totalcost').innerText = document.getElementById('cost').value;
}
}
Code: function calculateGroupMembers()
{
var iMultiplier;
if(document.getElementById('txtGroup1Firstname').value != '' || document.getElementById('txtGroup1Surname').value != '' || document.getElementById('txtGroup1Email').value != '')
{
iMultiplier=2;
}
if(document.getElementById('txtGroup2Firstname').value != '' || document.getElementById('txtGroup2Surname').value != '' || document.getElementById('txtGroup2Email').value != '')
{
iMultiplier=3;
}
if(document.getElementById('txtGroup3Firstname').value != '' || document.getElementById('txtGroup3Surname').value != '' || document.getElementById('txtGroup3Email').value != '')
{
iMultiplier=4;
}
if(document.getElementById('txtGroup4Firstname').value != '' || document.getElementById('txtGroup4Surname').value != '' || document.getElementById('txtGroup4Email').value != '')
{
iMultiplier=5;
}
if(document.getElementById('txtGroup5Firstname').value != '' || document.getElementById('txtGroup5Surname').value != '' || document.getElementById('txtGroup5Email').value != '')
{
iMultiplier=6;
}
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) * iMultiplier).toFixed(2) + ' (inc group members)';
}
It is fired from an onblur event in the div below once the chkbox is ticked, the link to the page is https://www.doitforcharity.com/book-...eid=1990&cid=0 but you may need to progress through https://www.doitforcharity.com/book-....aspx?eid=1990 first: Code:
<div id="pnlGroupBooking">
<label class="boldfieldlabel" for="chkGroupBooking">Do you wish to book for others too? </label>
<input id="chkGroupBooking" type="checkbox" language="javascript" onclick="__doPostBack('chkGroupBooking','')" checked="checked" name="chkGroupBooking">
(you may book up to 5 additional people)
<div id="pnlGroupBookingNames" style="border: 1px solid LightGrey; width: 500px;" styles="padding:10px;">
<strong>Group Member Names</strong>
<br>
<p>
</p>
<p>
</p>
<p style="vertical-align: top;">
<strong>1) </strong>
<input id="txtGroup1Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Firstname">
<input id="txtGroup1Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Surname">
<input id="txtGroup1Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup1Email">
<br>
<strong>2) </strong>
<input id="txtGroup2Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Firstname">
<input id="txtGroup2Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Surname">
<input id="txtGroup2Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup2Email">
<br>
<strong>3) </strong>
<input id="txtGroup3Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Firstname">
<input id="txtGroup3Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Surname">
<input id="txtGroup3Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup3Email">
<br>
<strong>4) </strong>
<input id="txtGroup4Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Firstname">
<input id="txtGroup4Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Surname">
<input id="txtGroup4Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup4Email">
<br>
<strong>5) </strong>
<input id="txtGroup5Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Firstname">
<input id="txtGroup5Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Surname">
<input id="txtGroup5Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup5Email">
</p>
</div>
</div>
Thanks! i have the following code being called from onsubmit event of form and it is not working in firefox. when debugging it will return at the line of code "row = parcelTable.rows(4);" Any ideas? Code:
parcelTable = document.getElementById("parcelTable");
if(x=="parcel" && (ptaxd.value == "" || ppid.value == "" || puid.value == "" )){
rowCount = parcelTable.rows.length;
row = parcelTable.rows(4);
if(rowCount ==5){
}else{
row = parcelTable.insertRow(4);
}
cellCount = row.cells.length;
errorCell = row.insertCell(cellCount);
if(cellCount==0) errorCell = row.insertCell(cellCount+1);
errorCell.innerHTML = "Must enter all three fields.";
errorCell.setAttribute("id","error");
errorCell.style.color = "red";
isItGarbage = false;
parcelError = true;
}
<form id="parcelForm" name="by_parcel" action="BasicShell" method="get" onsubmit="return validate('parcel');">
Hi all I use the following to verify that a user has entered a number between 0 and 99 in a form: Code: function validate_number(number) { //Checks uploaded files for invalid characters and extensions
if (/^([0-9]|[0-9][0-9])$/gi.test(number)) { // anything but 0-99 is disallowed
return true;
}
return false;
}
It seems to work fine in all browser / machine combos except Firefox on a Mac, when entering 0 returns false (I don't know if entering other numbers also returns false.) Can anybody suggest why? Hi Im Using YUI 2.4.1 and the dragdrop text box is not edited upon mouse click in FireFox 3.0 where as it works fine in IE. I iwsh i would get some light on this. the file used is dragsrop-min.js Hi all, I'm faced to a problem : I'm programming a styles generator for the Stylish add-on. What i want is the same thing that when i click on the button "Install with Stylish" : A Window appear to ask user if he wants to install the script with Stylish. I saved the website page on my desktop and opened it. Obviously it did not worked, nothing happens when i click. I also changed the path for javascript file in the html and so on.. There is a XMLhttprequest() function wich opens the url of the style ending by ".css". But i replaced the url by my file path ( by a locally file) and i replaced the statut (200 by 0, because i'm working on a local file). But whatever i do, nothing happens when i click. There is also a function called firecustomevent() who creates the event, but my knowledges are limited at this point. I read document on mozilla website on how to call an event but i can't get it to work. So if anybody knows how to display a windows asking the user if he wants to install the style, i will be grateful. Thanks and sorry for my bad english The url containing the javascript is a simple style url like this one : http://userstyles.org/styles/17120 where you can see the "install with stylish" button. I also attached the concerned javascript in a txt file. The following extremely simply JavaScript code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var n=document.getElementsByTagName('div')[0];
alert(n.innerHTML);
}
</script>
</head>
<body>
<div>foo</div>
</body>
</html>
alerts the innerHTML content in all the browsers. Except in Firefox 3.6.8, which alerts a blank value. What the f? I know that innerHTML is not a standard DOM method, but it used to be a crossbrowser one since FF 1.5, right? ------- Edit: It does not work even in case of firstChild.nodeValue or firstChild.data. FF 3.6.8 says that the DIV element has no first child, which is amazing. so im using firfoxes firebug and its giving me this java script error missing ; before statement document.getElementById("aia").innerHTML = "<p onclick="" >Sword</p>"; i tried just puting this ; behind the beginning but i just cant figure it out. Why will scripts run in IE and not in firefox. I cant find any simple Javascript code that will create a username/password login that will work in both browsers.
Ok, so I spent all my time making this website http://portfolio.dreamsofatypewriter.com/index.html work on IE. And now it turns out it is Firefox that is trying to ruin me. I am using a simple JQuery by Sam Dunn to slide boxes on the upper left of the landing page. But in Firefox (may be it is just FFX4) it won't run. I can't fathom what can be the problem. Any thoughts? Thanks Sandeep |
|||||||