JavaScript - Why It Only Works In Firefox?

Hi,

I've been trying to solve this problem for the past few hours and I'm at my wit's end.

I have a script that runs through all the div elements on the page, and then if the div's background is a certain color, it increments a counter by 0.5 and then outputs the result into a separate div tag.

This works flawlessly in IE, however I cannot get it to work in Firefox.

The strange thing is, if I omit the loop and just use the colorToHex on one specific element in the divs array (ie. divs[2]) it works in Firefox.

Any suggestions are greatly appreciated.

Code:

function hrsavailable() {

	var divs = document.getElementsByTagName("div");
	var srdjanhrs = -0.5;
	
	for (var i=0;i<divs.length;i++){ 
		if (colorToHex(divs[i].style.backgroundColor) == "#ffbb6e") {;
			srdjanhrs = srdjanhrs + 0.5;
		}
	}
	
	document.getElementById("srdjanhrs").firstChild.data = srdjanhrs;
}

function colorToHex(color) {

    if (color.substr(0, 1) === '#') {
        return color;
    }
	
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
	
}

Hello. When a user visits index.html on my site, they input their email address. The form redirects them to "confirmed.html", the form also writes a cookie with their email address.

When the user gets to confirmed.html, I use an "if/else" statement. If there is a cookie (email address), I append ("#"+user_email) to the window location. I do this so that when the user shares with "addthis" tool, I will know who is sharing. Unfortunately addthis only shares the current page, so I want new users to the site to be redirected to index.html

My code works in firefox, but not safari. In safari it just seems to redirect to index nomatter what. The user never even sees confirmed.html.

Code:

var user_email = unescape(document.cookie);

if (document.cookie)
  {
 window.location.replace("#"+user_email);
  }

else {
window.location.replace("index.html");
}

})();
</script>

The website is www.saverally.com

This works fine in IE only. Any thoughts.

function DisplaySelectedColor(cColor) {
var elToFill = document.getElementById(cFieldOnFocus)
elToFill.value = cColor;

switch(cFieldOnFocus){
case"Page-Background":document.getElementById("Page").style.backgroundColor =cColor;
break;

case"Page-Background":
document.getElementById("Page").style.backgroundColor =cColor;
break;

case"Outside-Border":
document.getElementById("main_container").style.borderColor =cColor;
break;

case"Logo-Background":
document.getElementById("logo_area").style.backgroundColor =cColor;
break;

case"Logo-Font":
document.getElementById("logo_area").style.color =cColor;
break;
case"Outside-Area-Background":
document.getElementById("main_container").style.backgroundColor =cColor;
document.getElementById("linktestdiv").style.backgroundColor =cColor;
break;

case"Outside-Area-Font":
document.getElementById("main_container").style.color =cColor;
document.getElementById("main_nav").style.color =cColor;
document.getElementById("right_column_content").style.color =cColor;
document.getElementById("linktestdiv").style.color =cColor;
document.getElementById("footer").style.color =cColor;
break;

case"Content-Background":
document.getElementById("main_content").style.backgroundColor =cColor;
break;

case"Content-Font":
document.getElementById("main_content").style.color =cColor;
break;

case"Footer-Background":
document.getElementById("footer").style.backgroundColor =cColor;
break;

case"Hyper-Link":
document.getElementById("activelink").style.color = cColor;
break;

case"Hyper-Link-Hover":
document.getElementById("hoverlink").style.color = cColor;
break;

case"Hyper-Link-Visited": document.getElementById("visitedlink").style.color = cColor;
break;
}
}

Thanks for any help. Can't figure it out.

Hi,

I am using googles O3D software and it uses a javascript base, one of there plugins works in Firefox only and not Internet Explorer I was wondering if anyone here could help me find out why it isnt working in IE and even how to fix it, here is the page that works in firefox but not IE

http://o3d.googlecode.com/svn/trunk/...edesigner.html

Many Thanks,
Simon

Hi,

I'm making a Google Map that reads info from a database and pulls Twitter usernames from it to plot points on a map. In the infowindow of these points I have some code that displays the Twitter users latest tweet. There's alot of code for this map so i'll only show you the part i'm working on:

Code:

function readData() {
      var request = GXmlHttp.create();
      request.open("GET", "phpsqlinfo_result.php", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
		  	  i=[0];
			  markers=[0];
			  map.getInfoWindow().hide();
			  gmarkers = [];
			  map.clearOverlays();
			  side_bar_html = "";
			  
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            
            var label = markers[i].getAttribute("name");
			var address = markers[i].getAttribute("address");
			var type = markers[i].getAttribute("type");
			
			
			var html = '<' + 'script src="http://twitter.com/javascripts/blogger.js"><' + '/script><' + 'script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' + label + '.json?callback=twitterCallback2&count=1"><' + '/script><br /><div id="twitter_update_list" style="list-style:none"></div>';
            
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

var html is where it's all happening. I'm using the Twitter script from http://limetouch.com/article/valid-x...vascript-code/ and I have it laid out with all them ' + ' to break it up so it doesn't end the actual javascript used to create the map.

I'm new to Javascript so I don't know too much. I know that this method is a really backwards way of doing it, but it works for Firefox. I'm able to retrieve the users latest tweet when I click on their map marker.

What I want to know is why it doesn't work in any other browser? I've tried IE7+8, Google Chrome, Opera, and Safari and no tweet displays.

Sub-question: While a tweet does display in Firefox, the infowindow doesn't resize with the dynamic content. Any way to fix that?

function hasTagsInText(text)
{

if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0)
return 'table';


///this line of code doesnt work in firefox

// otherwise search the parent element
tempElem=tempElem.parentElement;

// return when it reaches the top of the code
if(tempElem.tagName=="HTML") {
return el;
}

}


return tempElem;
}

function fixTBpos()
{

var OCode = document.getElementById('OCode');

var ODiv = document.getElementById('ODiv');

st=document.body;
if(isW3Mode)
OCode.style.height=ODiv.style.height=st.clientHeight-119;
else
OCode.style.height=ODiv.style.height=st.clientHeight-113;

typeof(toc) == "undefined" ? '':Resizetoc();
}

function hasTagsInText(text)
{

if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0) return 'table';<<<<<<<<NOT WORKING

if(text.indexOf("<TD") >=0 || text.indexOf("<td") >=0)
return 'column';

if(text.indexOf("<IMG") >=0 || text.indexOf("<img") >=0)
return 'image';

if(text.indexOf("<H2") >=0 || text.indexOf("<h2") >=0)
return 'h2';

if(text.indexOf("<DIV") >=0 || text.indexOf("<div") >=0)
return 'div';

if(text.indexOf("<A") >=0 || text.indexOf("<a") >=0)
return 'link';

if(text.indexOf("<FORM") >=0 || text.indexOf("<form") >=0)
return 'form';

if(text.indexOf("<P>") >=0 || text.indexOf("<p>") >=0)
return 'invisible paragraph-mark';

if(text.indexOf("<BR>") >=0 || text.indexOf("<br>") >=0)
return 'invisible new-line-mark';

return '';
}

function hasFormatInText(text)
{
var format = ''
if(text.indexOf("id=subtitle") >=0)
format+= 'id=subtitle'

if(text.indexOf("class=greytext") >=0)
format+= 'class=greytext'
if(text.indexOf("class=prices") >=0)
format+= 'class=prices'
if(text.indexOf("class=small") >=0)
format+= 'class=small'
if(text.indexOf("class=bct") >=0)
format+= 'class=bct'

// jae added
if(text.indexOf("class=price") >=0)
format+= 'class=price'

if(text.indexOf("class=error") >=0)
format+= 'class=error'
// to here

if(text.indexOf("<BLOCKQUOTE ") >=0 || text.indexOf("<BLOCKQUOTE>") >=0)
format+= 'header=blockquote'


if(text.indexOf("formatted-text") >=0 || text.indexOf("class=")>=0)
format+= 'id=misctext'

if(text.indexOf("<SPAN ") >=0 || text.indexOf("<SPAN>") >=0)
format+= 'span'

if(text.indexOf("<H1 ") >=0 || text.indexOf("<H1>") >=0)
format+= 'header=h1'

if(text.indexOf("<H2 ") >=0 || text.indexOf("<H2>") >=0)
format+= 'header=h2'

if(text.indexOf("<H3 ") >=0 || text.indexOf("<H3>") >=0)
format+= 'header=h1'

if(text.indexOf("<H4 ") >=0 || text.indexOf("<H4>") >=0)
format+= 'header=h2'

if(text.indexOf("<EM ") >=0 || text.indexOf("<EM>") >=0)
format+= 'style=em'

if(text.indexOf("<B ") >=0 || text.indexOf("<B>") >=0)
format+= 'style=b'
if(text.indexOf("<STRONG ") >=0 || text.indexOf("<STRONG>") >=0)
format+= 'style=strong'
if(text.indexOf("<I ") >=0 || text.indexOf("<I>") >=0)
format+= 'style=i'

if(text.indexOf("<U ") >=0 || text.indexOf("<U>") >=0)
format+= 'style=u'
if(text.indexOf("<FONT ") >=0 || text.indexOf("<FONT>") >=0)
format+= 'style=font'

return format
}

Hi, JS newbie here trying to cobble together enough to get this page done.
Here's the snippet I'm having trouble with (sorry, I know it's sloppy, if you have a better way to do it by all means please post):

Code:

function showAdv() {
if(claroxanadvanced.style.display == "none")
{
claroxanadvanced.style.display = "block";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "none";
}
else
{
}
}

function showOri() {
if(claroxanoriginal.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "block";
smokersformula.style.display = "none";
}
else
{
}
}

function showSmo() {
if(smokersformula.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "block";
}
else
{
}
}

And the page where it is implemented: http://www.claroxan.com/test/
Firefox's debug window says it might be an issue of undeclared variables - 'claroxanadvanced', 'claroxanoriginal' and 'smokersformula' are all div IDs in the html, what line should I put to declare them? Thanks

Can anyone tell me why the following works in IE but not the other browsers?

It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm

Code:

<TD>
	                  <form name="whichCat" style="margin-bottom:0" method="get">
                        <select name="catChoice" onChange="sendValue(this);">
                          <option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option>
                          <option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option>
						  <option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option>
                          <option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option>
                          <option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option>
                          <option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option>
                          <option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option>
                          <option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option>
                          <option class="news4" value="php/Naval.php?q=Naval">Naval</option>
                          <option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option>
                          <option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option>
                          <option class="news4" value="php/Other.php?q=Other">Other</option>
                        </select>
                      </form>
                    </TD>

I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error:

Error: document.getElementById("SB_Frame") is null
Source File: http://savasbeatie.com/jscripts/SB_util.js
Line: 11

I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag.

Thanks for any help. - David

I have a script where the user selects an item on the main nav and it will display the sub-nav below. It works fine in every browser except Firefox. ANy ideas?

http://tinyurl.com/79wlwq3

EDIT: It's just that script that won't work, btw. I tested an alert box for Firefox and it works fine.

Code:

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=200
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-150;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

I have know much about javascript, but the code above works fine in safari and firefox but not IE.

it's for a popup, when you click a link it blankets the page and theres a popup window.

here's other parts of supporting css/php

Code:

<?php

 if(!$_POST['submit'] == 'login'){
      echo "<div id=\"blanket\" style=\"display:none;\"></div>\n";
	  echo "<div id=\"popUpDiv\" style=\"display:none;\">\n";
	  echo "<div id=\"loginform\">\n";
	  echo '<div id="close">';
	  echo "<a href=\"#\" onclick=\"popup('popUpDiv')\">\n";
	  echo '<img src="images/login/close.png" border="0">';
	  echo "</a>\n";
	  echo '</div>';
	  echo '<div class="clear"></div>';
	  echo "<form name=\"login\" method=\"post\" action=\"#\">\n";
	  echo "<div id=\"usernametext\">Username</div>\n";
	  echo "<input name=\"username\" type=\"text\" id=\"usernameinput\">\n";
	  echo '<div class="clear"></div>';
	  echo "<div id=\"passwordtext\">Password</div>\n";
	  echo "<input name=\"password\" type=\"password\" id=\"passwordinput\">\n";
	  echo '<div class="clear"></div>';
	  echo '<div id="loginsubmit"><input type="submit" name="submit" value="Submit"></div>';
	  echo "</form>\n";
	  echo "</div>\n";
	  echo "</div>\n";
	  echo "<span class=\"login_text\"><a href=\"#\" onclick=\"popup('popUpDiv')\">LOG IN</a></span>\n";

?>

Code:

#blanket {
background-color:#000000;
opacity: 0.40;
filter:alpha(opacity=40);
position:absolute;
z-index: 10;
padding:0;
top:0;
right:0;
left:0;
bottom:0;
width:100%;
height:100%;
margin:0 0 0 0;
}


#popUpDiv {
position:absolute;
background-color:#FFFFFF;
width:280px;
height:135px;
z-index: 10;
}

any help would be VERY much appreciated.

thanks

The following script grabs a string (*.abc.org, e.g. from &sid=xyz.abc.org) from the current URL and changes it (to ABC:abc.org). Everything works perfectly in IE, but Firefox and Chrome appear to get themselves into an endless loop. When I check the URL, xyz.abc.org has successfully been changed to ABC:abc.org, but the page just seems to keep refreshing over and over.

Code:

var tomatch = /abc.org/i;
var usrString = document.referrer;
var is_a_match = tomatch.test(usrString);
var newString = document.URL.replace(/[a-z]*\.abc\.org/, "ABC:abc.org"); if (is_a_match) {
    window.location.replace(newString);
}

Any suggestions much appreciated.

Hi
I am not really sure where to start with this as my function works perfect in IE 6. However when I select one of my categories and hit submit in Firefox or IE7 or 8 nothing happens. No error message. Just nothing. How can I get this working for firefox and IE7/8?

Code:

<script language="JavaScript">
var categories=[];
var categorieslist=[];
var thecategories=[];
var ItemDetails=[];
var selDate=[];
var content=[];
var imagePaths=[];
var art=[];
var aTheDates=[];
var aTheYear=[];
var catDM=" ";
var catUrl="";
var startposition=0;
var theImage="";
var pageDectect=0;
var thepage=0;
var pc=0;
var starty=0;
var pagenumber=0;
var filteredlist="<ul class='press-items'>";
function changeFilter(){
var selCategory=document.getElementById("browsetopic").value;
//alert(selCategory + " aha");
var selYear=document.getElementById("browseyear").value.substring(2,4);
var selMonth=document.getElementById("browsemonth").value;
//var selDate=document.getElementById("browsemonth").value + "/" + document.getElementById("browseyear").value.substring(2,4);


//alert(pagenumber);
for(pagenumber;pagenumber<art.length;pagenumber++){
//alert(selDate + "=" + aTheDates[pagenumber]);
//alert(selYear + "=" + aTheYear[pagenumber]);
//alert(selCategory + "=" + categories[pagenumber]);

	if(((selCategory=="nofilter"||categories[pagenumber]==selCategory))&&(selYear==aTheYear[pagenumber]||selYear=="00")&&(selMonth==aTheDates[pagenumber]||selMonth=="00")){
		filteredlist=filteredlist+art[pagenumber];	
	}
}
filteredlist=filteredlist+"</ul>";
//alert(filteredlist);
document.getElementById("theid").innerHTML=filteredlist; 
filteredlist="<ul class='press-items'>";
pagenumber=0;      
}

</script>

And the button

Code:

<a href="javascript:changeFilter();"><img style=" float: left;  margin-top: 0px;" class="submit" src="/images/submit.gif" /></a>

I can't seem to capture keystrokes (via onkeydown) in Firefox.

Now before you judge too quickly, here is a snippet that DOES work in Firefox -- but only by itself; not when pasted into my program:

------------------------------------------------------------------------
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<script language=javascript>
<!--
function vProcessKeyboard(e)
      {
      e = e || window.event;
      var code = e.keyCode || e.which;

	document.getElementById("chardisplay").innerHTML = code;
}
//-->
</script>

<body>

<script language=javascript>
<!--
document.onkeydown = vProcessKeyboard
//-->
</script>

<div id="chardisplay"></div>

</body>
</html>

------------------------------------------------------------------------

Here's my question: What would cause the above code to fail, when used in a larger, more complicated webpage?
If I debug my webpage (using FireBug 1.4.5), I note that "onkeydown" indeed points to my keyboard handler. But when I put a simple debug message in that handler, I get absolutely nothing -- no matter what code I paste in the keyboard handler, it doesn't run. No matter how many keys I press!

I run the same program in Internet Explorer and it runs fine. I run the keyboard code by itself in Firefox and it runs fine.

I've spent about 10 hours Googling this, and all I can find is discussions of how to capture keystrokes in Firefox vs. IE. I found about 20 different variations on the code I pasted above.

The "program" I'm trying to use with this keyboard capture code with is a large browser game -- a glorified webpage, even if it behaves like a Windows game -- with hundreds of objects (divs). There are several layers of graphics to make the game happen.

I'm just trying to figure out what is FUNDAMENTALLY different between my large program and a simple webpage, when it comes to something simple like keyboard capture.

Is it the size, in bytes, of my webpage? Is it the large number of DIVs? The large number of functions? Incidentally, I'm not using Frames.

Any help would be much appreciated.

Thanks,

Matthew

When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. Any help would be much appreciated!! This is the code below:

<script language="Javascript">
<![CDATA[
function openConsole(docId, attachmentFileName, name) {
if (window.customOpenConsole) {
customOpenConsole(encodeURIComponent(attachmentFileName), name);
} else {
headerFrame = window.parent.parent.frames["Header"];
if (headerFrame != null && headerFrame.openDocLink != null){
headerFrame.openDocAttachment(docId, attachmentFileName, name);
}
}
}
function STGhide()
{
var x=document.getElementsByName("ImageControlZone");
for(j=0;j<x.length;j++)
{
var imgs = x[j].getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
imgs[i].style.display="none";
}
}
var link = document.getElementById("ShowHideButton");
//alert(link.innerHTML)
link.innerHTML ="<img alt='' src='img/hideshow/showimage.gif' border='0' onclick='javascript:STGshow();' />";
}
function STGshow()
{
var x=document.getElementsByName("ImageControlZone");
for(j=0;j<x.length;j++)
{
var imgs = x[j].getElementsByTagName('img');
for(i=0;i<imgs.length;i++)
{
imgs[i].style.display="";
}
}
var link = document.getElementById("ShowHideButton");
link.innerHTML ="<img alt='' src='img/hideshow/hideimage.gif' border='0' onclick='javascript:STGhide();' />";
}

function openDocumentLink(externalId, languageId) {

if (window.parent.openDocLink != null) {
window.parent.openDocLink(externalId, languageId);
} else {
headerFrame = window.parent.parent.frames["Header"];
if (headerFrame != null && headerFrame.openDocLink != null)
{
headerFrame.openDocLink(externalId, languageId);
}
else {
setTimeout("openDocumentLink('"+externalId+"','"+languageId+"')",500);
}
}
}
]]>
</script>