JavaScript - Javascript Works In Ie, Not In Firefox

I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building.

Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2

It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why?

Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow.

I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier:

In the head of my php document:

[CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE]

In the sidebar of my php document:

[CODE] <div class="sidebar">
<div class="tabber">
<div class="tabbertab">
<h2>Welcome</h2>
<img src="images/Welcome.png" alt="" />
<div id="Connect">
<div id="Connect-01">
<img src="images/Connect_01.png" width="315" height="48" alt="" />
</div>
<div id="Connect-02">
<img src="images/Connect_02.png" width="27" height="87" alt="" />
</div>
<div id="Facebook">
<img src="images/Facebook.png" width="76" height="82" alt="" />
</div>
<div id="Connect-04">
<img src="images/Connect_04.png" width="21" height="87" alt="" />
</div>
<div id="Newsletter">
<img src="images/Newsletter.png" width="77" height="82" alt="" />
</div>
<div id="Connect-06">
<img src="images/Connect_06.png" width="21" height="87" alt="" />
</div>
<div id="Twiiter">
<img src="images/Twiiter.png" width="75" height="82" alt="" />
</div>
<div id="Connect-08">
<img src="images/Connect_08.png" width="18" height="87" alt="" />
</div>
<div id="Connect-09">
<img src="images/Connect_09.png" width="76" height="5" alt="" />
</div>
<div id="Connect-10">
<img src="images/Connect_10.png" width="77" height="5" alt="" />
</div>
<div id="Connect-11">
<img src="images/Connect_11.png" width="75" height="5" alt="" />
</div>
</div>

</div>


<div class="tabbertab">
<h2>Features</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Categories</h2>
<p>Tab 3 content.</p>
</div>

<div class="tabbertab">
<h2>Search</h2>
<p>Tab 4 content.</p>
</div>


</div>
</div>[CODE]

From my CSS stylesheet:

[CODE].sidebar{
position: relative;
top:0px;
padding-top:20px;
padding-right:10px;
padding-left:10px;
padding-bottom:0px;
float:right;
width:350px;
}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
background:#ffffff;
}

.sidebar ul li{
padding: 10px 0 10px 0;
background:#ffffff;
}

.sidebar ul li h2{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #2d0a0b;
border-top: 1px solid #2d0a0b;
border-bottom: 1px solid #2d0a0b;
padding: 5px 0px 5px 0px;
background:#ffffff;
}

.sidebar ul ul li{
padding: 0;
background:#ffffff;
}


/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin-top:1em;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 0px solid #778;
font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 0px;
margin-right: 3px;
border: 1px solid white;
background: white;
text-decoration: none;
}

ul.tabbernav li a:link { color: #2d0a0b; }
ul.tabbernav li a:visited { color: #2d0a0b; }

ul.tabbernav li a:hover
{
color: #2d0a0b;
text-decoration:underline;
background: white;
border-color: white;
}

ul.tabbernav li.tabberactive a
{
color: #fbb1c0;
background-color: #2d0a0b;
border: 1px solid #2d0a0b;
}

ul.tabbernav li.tabberactive a:hover
{
color: #fbb1c0;
text-decoration:underline;
background: #2d0a0b;
border-bottom: 1px solid white;
}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:10px solid #2d0a0b;

/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

height:285px;

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

overflow:auto;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

#Connect {
position:absolute;
left:30px;
top:200px;
width:315px;
height:135px;
}

#Connect-01 {
position:absolute;
left:0px;
top:0px;
width:315px;
height:48px;
}

#Connect-02 {
position:absolute;
left:0px;
top:48px;
width:27px;
height:87px;
}

#Facebook {
position:absolute;
left:27px;
top:48px;
width:76px;
height:82px;
}

#Connect-04 {
position:absolute;
left:103px;
top:48px;
width:21px;
height:87px;
}

#Newsletter {
position:absolute;
left:124px;
top:48px;
width:77px;
height:82px;
}

#Connect-06 {
position:absolute;
left:201px;
top:48px;
width:21px;
height:87px;
}

#Twiiter {
position:absolute;
left:222px;
top:48px;
width:75px;
height:82px;
}

#Connect-08 {
position:absolute;
left:297px;
top:48px;
width:18px;
height:87px;
}

#Connect-09 {
position:absolute;
left:27px;
top:130px;
width:76px;
height:5px;
}

#Connect-10 {
position:absolute;
left:124px;
top:130px;
width:77px;
height:5px;
}

#Connect-11 {
position:absolute;
left:222px;
top:130px;
width:75px;
height:5px;
}[CODE]

I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help.

Hey all,

1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.

2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags?

Code:

$(".image_thumb ul li ul li").click(function(){  			
 
	var imgTitle = $(this).find('a').attr("href");  
	var imgDesc = $(this).find('.block').html();  
	var imgDescHeight = $(".main_image").find('.block').height(); 	

	if ($(this).is(".active")) {   
		return false;  
	} else {
		console.log(imgTitle);
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
			$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
			$(".main_image embed").attr({ src: imgTitle}); 
		});
	}

	$(".image_thumb ul li ul li").removeClass('active');  
	$(this).addClass('active');  
	return false;

}) .hover(function(){
	$(this).addClass('hover');
	}, function() {
	$(this).removeClass('hover');
});

Thanks for response.

Hi All I have a content slider, but it only seems to work in FF and not any of the other browsers. I am using Wordpress but its not a plugin

This is what I have:
page.php
Code:

<?php if (is_front_page()) { 
	include ("homepage-slider.php");
} ?>

homepage-slider.php
Code:

<!--  Inner content DIVs should always carry "contentdiv" CSS class  -->
<!--  Pagination DIV should always carry "paginate-SLIDERID" CSS class  -->
<div id="slider1" class="sliderwrapper">
 <div class="contentdiv">
  <div class="home-div1">
   <div class="home-div-logo"></div>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div2">
   <span></span>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div3">
   <span></span>
  </div>
 </div>
</div>
<div id="paginate-slider1" class="pagination" style="display:none;">
</div>

<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script>

There are 2 other external files :
contentslider.js
contentslider.css

Click Here to see site.

If someone could help I would really appreciate it, been bugging me big time.
Cheers,
Jay

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 -->

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

been a while since i been to the experts for help figures i was about due for an issue beyond my solving capabilities

ok so the code
The function containing the rogue setTimeout
Code:

function refresh_timer(){
//alert(window.timer);
	var total = getTotal();
	document.getElementById('status').innerHTML = 'Updating in '+ (total-(window.timer+1))+' seconds.';
	if((total-window.timer) == 0){
		refresh_feed();
	}
	else{
		//setTimeout("refresh_timer()",1000);
		setTimeout(function(){ alert("");},1000);
		window.timer++;
//alert("1");
//alert(window.timer);
	}
}

everything in the above function works except the setTimeout itself the script doesn't break and i get no errors in the firebug

initially window.timer is set to 0 and everytime refresh_feed() executes window.timer gets reset to 0
refresh_timer() gets called up by the return from an ajax call(again works in chrome and ie8)

any help is appreciated

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

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?

Works in Firefox, chrome, even my phone, but not IE

Code:

<a onmouseover="document.getElementById('statusbox').innerHTML='<table width=100%><tr><th colspan=3>Carrot statuses</th></tr><tr><th>Status</th><th>Magnitude</th><th>Duration</th></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>Repeatattack</td><td>5</td><td>1</td></tr><tr class=alt><td>Defense</td><td>10</td><td>2</td></tr><tr class=alt><td>Regen</td><td>7</td><td>4</td></tr></table>'; document.getElementById('statusbox').style.opacity = 100; document.getElementById('statusbox').style.display = 'inline'; document.getElementById('statusbox').style.backgroundColor = 'beige'; document.getElementById('statusbox').style.zIndex = 10; document.getElementById('statusbox').style.filter  = 'alpha(opacity=1.0)'" onmousedown="postXMLDoc('/ajaxget?battlerel="nofollow" target=10634','view='+10634)">

Any ideas?

I have a portfolio page on our company site that functions properly on Mac, but not in Windows. The page is here, but I warn you it will possibly freeze IE if you click it. I include it for reference.

http://www.dgindy.com/html/portfolio.html

In IE, the first thumbnail (of 32) will display and then the page generally locks.

I believe the javascript that governs the popups may be the culprit, but I only know enough to be dangerous and need an assist as this site is already live and that was my screwup.

The script link is:
<script type="text/javascript" src="popup.js"></script>

And the script is:
function popup(url)
{
newwindow=window.open(url,'name','height=575,width=620,top=200,left=200');
if (window.focus) {newwindow.focus()}
return false;
}

And finally, here is one of the popup links:
<a href="01.html" class="p01" onclick="return popup('01.html')"><span class="displace">Portfolio 01</a>

Any assistance is greatly appreciated. If you need to see my css, let mw know.

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.

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.

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.

function hasTagsInText(text)
{

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


///this line of code doesnt work in firefox

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