JavaScript - Script Fails On Firefox With This !doctype Declaration

Hi there Im having an issue with some javascript that works fine in IE, but in FF is not working properly.

The script is used to display a list of check boxes, the user can expand, which can checked to enabke a users selection of products. This is the script:
Code:

<script type="text/javascript">

    var xcNode = [];

    // m = Parent UL ID

    // c = 
    function xcSet(m, c, q, isCompletedLength) 
	{
        if (document.getElementById && document.createElement) 
		{
            var xs = m;
            m = document.getElementById(m).getElementsByTagName('ul');
            var d, p, x, h, i, j;
          
            for (i = 0; i < q; i++) 
			{
                
                var xp = document.getElementById("_" + xs + i);
                if (d = xp.getAttribute('id')) 
				{
                    if (navigator.userAgent.indexOf("Firefox") != -1) 
					{
                        var lstr = TrimTags((document.getElementById(xs).innerHTML));
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength);
                    }
                    else 
					{
                        xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength);
                        x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength);
                    }

                    p = xp.parentNode;
                    if (h = !p.className) 
					{
                        j = 2;
                        while ((h = !(d == arguments[j])) && (j++ < arguments.length));
                        if (h) 
						{

                            if (xp.name == parseURL()) 
							{
                                xp.style.display = 'block';
                                x = xcNode[d + 'c'];
                            }
                            else 
							{
                                xp.style.display = 'none';
                                x = xcNode[d + 'x'];
                            }
                        }
                    }

                    p.className = c;
                    

                    var expand = document.getElementById("expandBtn_" + xs + "0");
                    expand.insertBefore(x, expand.firstChild);
                }
            }
        }
    }

works fine in IE, but not in Firefox where the expanded list is not showing the current number of items (checkboxes), it shows 34 check boxes in IE but only 17 in firefox.

Thanks in advance

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);
	
}

Helo, I'm really hoping one of you JavaScript gurus can help me. I find this a bit difficult, but I'm sure you will find it easy. I wrote a script to detect the version of Windows that a visitor is using. It then loads a remote script based on the OS. You can see it in action by visiting my website http://www.xp-smoker.com and clicking on any link that takes you to another page.

This script shows you an offer based on whether you are using XP, Vista or Windows 7. It works great in IE 8. No errors. It does not work at all in Firefox. But once again absolutely no errors.

I'm using "onload" in the body tag of my pages like this:

Code:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="loadjs();">

The function is contained in a file that is called locally.

Here is the function:

Code:

function loadjs()
{
//Create a 'script' element	
  var scrptE = document.createElement("script");

  //Set 'type' and 'language' attribs 
  scrptE.setAttribute("type", "text/javascript");
  scrptE.setAttribute("language", "JavaScript");

if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=62020ec");
}else if (navigator.appVersion.indexOf("Windows NT 6.0")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=7ace1f3");
}else if (navigator.appVersion.indexOf("Windows NT 6.1")!=-1){
scrptE.setAttribute("src", "http://www.trialpay.com/js/pop_under/?c=85cfeba");
}


// create an object of the head element of current page
  var hdEl = document.getElementsByTagName("head")[0];

  //check for previously appended child 
  //(it ensures that each time the button is pressed it
  // removes the previously loaded script element)
  if (hdEl.childNodes.length > 1) {
   hdEl.removeChild(hdEl.lastChild);
  }

  // Now add this new element to the head tag
  hdEl.appendChild(scrptE);
}

I don't know if it is the function causing it or if the onload event in the body tag is the problem. I tried removing the onload event from the body tag and using this after the body tag:

Code:

<script>if(document.all)window.attachEvent("onload",loadjs());else window.addEventListener("load",loadjs(),false);</script>

But that didn't work in Firefox either. That gave me an error.

Your help would be greatly appreciated. I hope I provided you with enough info.

confused:hope its the right place to post a newbie here .
but i have a problem with a firefox accepting a script that i wrote it works on exploer but not on firefox
onclick="javascript:if (this.parentNode.parentNode.nextSibling.style.display !='block') this.parentNode.parentNode.nextSibling.style.display ='block'; else this.parentNode.parentNode.nextSibling.style.display ='none';"
hope u can help me
thx

Nice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck.

Code:

<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters" 
          border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;" 
          onclick="document.location='/pages/loodgieters.php';" 
          onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'" 
          onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" />

Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE.
Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1).

Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is:

Code:

<td height="189" id="foto1" bgcolor="#008ac9" valign="top" 
	onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';" 
	onmouseout="style.backgroundColor='#008ac9';  loodgieters.src='/core/loodgieters_uit.png';" 
	style="cursor:pointer;" 
	onclick="document.location='/pages/loodgieters.php';">
	<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png" 
	style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td>

Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox.

The whole page validates as XHTML 1.0 Transitional
What am I overlooking here? I'm stuck. Any help is welcome

Hey,

I'm trying to write a script that makes it so that when using a screen width of 1280 or lower, Google shows one ad at the top of the page. With screen widths over 1280, it shows 2 ads along the side of the screen.

I've checked it several times and I don't know what I've done wrong (but I'm also a beginner). The script works flawlessly in all versions of Firefox for both high and low res (I checked with FF 2.0, 3.0, 3.5, and 3.6) but in IE6 and IE8 while displaying almost correctly at the high resolution, it gets completely screwed up at the low resolution.

Basically I'm just using Javascript to insert HTML comment tags around the ads that I don't want to appear for that resolution.

Apparently it doesn't work in Opera, Chrome, or Safari either and the code doesn't validate as XHTML so there is definitely something wrong.






Code:

<!-- Test run of Google AdSense -->
<!-- One ad floats left, one floats right, the rest of the body is center aligned in between (high res only) -->
<!-- There are 3 ads, scripting makes it so that 2 appear on the sides with a screen width above 1280 pixels, and below 1280 pixels just one appears across the top -->


<script type="text/javascript">
<!--
var skip1 = "<!--";
if ( screen.width <= 1280 )
{
document.write (skip1);
}
//-->
</script>

<div style=" float:left; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, left side homepage */
google_ad_slot = "6021069285";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div style=" float:right; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, homepage */
google_ad_slot = "3502793671";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<script type="text/javascript">
<!--
var skip2 = "-->";
if ( screen.width <= 1280 )
{
document.write (skip2);
}
//-->
</script>


<script type="text/javascript">
<!--
var skip3 = "<!--";
if ( screen.width > 1280 )
{
document.write (skip3);
}
//-->
</script>

<div style="font-size:7pt; color:#777;">
<center>
Advertisement<br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* low res top ad */
google_ad_slot = "4610054252";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>

<script type="text/javascript">
<!--
var skip4 = "-->";
if ( screen.width > 1280 )
{
document.write (skip4);
}
//-->
</script>


<!-- End of Adsense side banners -->

Please help. This works fine in IE but will not work in FireFox:

<iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe>

<script language="JavaScript" type="text/javascript"><!--
// Pages to rotate
var pages=new Array('http://www.newquaynet.com/rotating_pages/page1.htm', 'http://www.newquaynet.com/rotating_pages/page2.htm', 'http://www.newquaynet.com/rotating_pages/page3.htm');

// Rotation interval, in miliseconds (1000 = 1 second)
var rint=15000;

var currentpage=-1;
function rotator(){
currentpage++;
if(currentpage >= pages.length){
currentpage=0;
}
document.all.rotate.src=pages[currentpage];
setTimeout('rotator()', rint);
}
rotator();
//--></script>

I'm a real novice and out of my depth with this, i hope someone can help.

I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox.

Below is the code thats checks which browser is running and the action to take.

Code:
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

Can anyone help me out with this problem.

Many thanks
Jasper

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.

Right now, it only works with IE. This goes in the header...

Quote:
<script language="JavaScript1.2">

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}

</script>
and this goes in the image:

Quote:
<img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE">
It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE.

Thanks for the help!

Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right?

The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout.

I have this in the heading:

Code:

<script LANGUAGE="JavaScript">

function ColorBlock(oRegion,sLinkID) 
{	
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	oRegion.className = "MenuSelected";	
	oRegion.style.cursor="hand";
	sLinkID.style.color = "black";
}

function UncolorBlock(oRegion,sLinkID) 
{
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	var oToEl = window.event.toElement;
	if ((oToEl && !oRegion.contains(oToEl))||!oToEl) 
	{
	sLinkID.style.color = "white";
	oRegion.className = "MenuUnSelected";
	}
}
</script>

And this is in the body.

Code:

<table class=MenuTable>
   <tr><td  OnMouseover="ColorBlock(this, Link4);"
            OnMouseout="UncolorBlock(this, Link4);"
            CLASS="MenuUnSelected" nowrap>
      <a STYLE="color:white" ID="Link4"
         OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
      <div style="width:144; cursor=hand; font-weight:bold;">
      Education
      </a></div></td>
    </tr>
</table>

I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas?

I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them.

The page is at www.adam-k-watts.com

Hi all, firstly i'm not a coder but i am capable of doing as instructed. I have some script that when used in conjunction with a button highlights all the text between 2 tags to make it easier for copying, it works great in IE but doesn't work in firefox, could someone help please?
Here's the script and the button is below. Code:

<script type="text/javascript">

function selectCode(a)
{
   // Get ID of code block
   var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

   // Not IE
   if (window.getSelection)
   {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
         s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
         var r = document.createRange();
         r.selectNodeContents(e);
         s.removeAllRanges();
         s.addRange(r);
      }
   }
   // Some older browsers
   else if (document.getSelection)
   {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
   }
   // IE
   else if (document.selection)
   {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
   }
}
</script>

Html button Code:

<input type="button" value="Highlight Code" onclick="selectCode(this); return false;">

Hi Coders,

I have a Javascript on my credit card page which populates the elements of a dropdown field (The Year field).
It just works with Internet Explorer and not Firefox.

Here is the script:

<script type="text/javascript">
<%
Dim orderDateYearx
orderDateYearx = cStr(Year(Date))
%>

yy="<%=orderDateYearx%>";
yyyy=parseInt(yy);
yyyy=yyyy

var listDocUpload = document.getElementById("expDate2");
var optn = document.createElement("OPTION");
optn.value = yyyy;
yyyy=yyyy+""
optn.text = yyyy.replace("20","");
listDocUpload.options.add(optn);

yyyy=parseInt(yyyy)+1
var optn2 = document.createElement("OPTION");
optn2.value = yyyy;
yyyy=yyyy+""
optn2.text = yyyy.replace("20","");
listDocUpload.options.add(optn2);

yyyy=parseInt(yyyy)+1
var optn3 = document.createElement("OPTION");
optn3.value = yyyy;
yyyy=yyyy+""
optn3.text = yyyy.replace("20","");
listDocUpload.options.add(optn3);
</script>

The dropdown field in Firefox is just blank. I mean no elements reside within it. (but its clickable)

Any ideas why this dropdown field in Firefox is not going to be populated?
Thank you for all the comments.

Hopefully this is a noob and simple question to answer, but I used this random ads script and modified it to show random boxarts for PS3 games..
http://javascript.internet.com/misce...andom-ads.html


You can see what I'm trying to do he
http://empireelite.org/index2.htm - (temporary page just for testing the code, refresh and see that the PS3 boxarts become randomized)


Everything looks perfect in Internet Explorer, but in Firefox it looks to have about 15px in spacing on both top and bottom. I know the table itself is fine, because everything fits fine on the real main page http://www.empireelite.org/


The pictures are also not overlapping the cell. It's 9 pics x 22 width, (198px in a 200px wide cell) and it has the same spacing even if I just have 1 pic there using the script.


Is there a code I can add or remove to get rid of the spacing in Firefox?


I already removed , spacing from this line:
function randomorder(targetarray, spacing) {

and removed +spacing from this line:
document.write(targetarray[the_one]+spacing)


Neither did anything and the script works the same way without those small pieces of code (I'm not sure what either of them did to begin with).



Here is the javascript page I'm using:
http://empireelite.org/randomAds.js

And also View Source in this test page:
http://empireelite.org/index2.htm