/    Sign up×
Community /Pin to ProfileBookmark

Need Help With Two Javascripts Conflicting in Firefox and Safari!

Can someone help me figure out why these two scripts conflict in Firefox and Safari? They work fine in Internet Explorer, and they work fine in ALL browsers when they don’t have to work together on the same page. When they both need to work on the same page, it’s the [b]div/column resize[/b] script that is acting up in Safari and Firefox (again, it works fine in IE). What’s really strange is that when I click on my firebug icon in Firefox (in the lower righthand corner) to check the CSS or look for bugs, the divs/columns resize like they should and everything looks fine. It’s almost as if it’s not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something. Any help given with this matter would be greatly appreciated!

[b]Resize two Divs (columns) to be the same height:[/b]

[code]
// Replace ‘center’ ‘right’ and ‘left’ with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns. Just delete the ones you’re not using.
var divs = new Array(‘col1, ‘col2’);

// Initialize Scripts – is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }

// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; }
else if (elm.attachEvent) { var r = elm.attachEvent(‘on’ + evType, fn); return r; }
else { elm[‘on’ + evType] = fn; }
}

// Start Column Script
function setTall() {
if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
}
for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + ‘px’; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight – (div.offsetHeight – maxHeight)) + ‘px’; } }
}
}
}

// Assign one of the columns to the TextResizeDetector.
function initTall() {
if (document.getElementById) { for (var i = 0; i < divs.length; i++)
{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
setTall(); }
}

// Fire Events
addEvent(window, ‘load’, initTall, false);
addEvent(window, ‘resize’, setTall, false);

/* Detects changes to font sizes when user changes browser settings
Fires a custom event with the following data:
iBase : base font size
iDelta : difference in pixels from previous setting
iSize : size in pixel of text
author Lawrence Carvalho [email protected] */

// @constructor
TextResizeDetector = function() {
var el = null;
var iIntervalDelay = 200;
var iInterval = null;
var iCurrSize = -1;
var iBase = -1;
var aListeners = [];
var createControlElement = function() {
el = document.createElement(‘span’);
el.id=’textResizeControl’;
el.innerHTML=’&nbsp;’;
el.style.position=”absolute”;
el.style.left=”-9999px”;
var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
// insert before firstChild
if (elC)
elC.insertBefore(el,elC.firstChild);
iBase = iCurrSize = TextResizeDetector.getSize();
};

function _stopDetector() {
window.clearInterval(iInterval);
iInterval=null;
};
function _startDetector() {
if (!iInterval) {
iInterval = window.setInterval(‘TextResizeDetector.detect()’,iIntervalDelay);
}
};

function _detect() {
var iNewSize = TextResizeDetector.getSize();

if(iNewSize!== iCurrSize) {
for (var i=0;i <aListeners.length;i++) {
aListnr = aListeners[i];
var oArgs = { iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize – iCurrSize + ‘px’ : “0px”),iSize:iCurrSize = iNewSize};
if (!aListnr.obj) {
aListnr.fn(‘textSizeChanged’,[oArgs]);
}
else {
aListnr.fn.apply(aListnr.obj,[‘textSizeChanged’,[oArgs]]);
}
}

}
return iCurrSize;
};
var onAvailable = function() {
if (!TextResizeDetector.onAvailableCount_i ) {
TextResizeDetector.onAvailableCount_i =0;
}

if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
TextResizeDetector.init();
if (TextResizeDetector.USER_INIT_FUNC){
TextResizeDetector.USER_INIT_FUNC();
}
TextResizeDetector.onAvailableCount_i = null;
}
else {
if (TextResizeDetector.onAvailableCount_i<600) {
TextResizeDetector.onAvailableCount_i++;
setTimeout(onAvailable,200)
}
}
};
setTimeout(onAvailable,500);

return {
/*
* Initializes the detector
*
* @param {String} sId The id of the element in which to create the control element
*/
init: function() {

createControlElement();
_startDetector();
},
/**
* Adds listeners to the ontextsizechange event.
* Returns the base font size
*
*/
addEventListener:function(fn,obj,bScope) {
aListeners[aListeners.length] = {
fn: fn,
obj: obj
}
return iBase;
},
/**
* performs the detection and fires textSizeChanged event
* @return the current font size
* @type {integer}
*/
detect:function() {
return _detect();
},
/**
* Returns the height of the control element
*
* @return the current height of control element
* @type {integer}
*/
getSize:function() {
var iSize;
return el.offsetHeight;

},
/**
* Stops the detector
*/
stopDetector:function() {
return _stopDetector();
},
/*
* Starts the detector
*/
startDetector:function() {
return _startDetector();
}
}
}();

/*** end TextResizeDetector */

TextResizeDetector.TARGET_ELEMENT_ID = ‘doc’;
TextResizeDetector.USER_INIT_FUNC = function() {
var iBase = TextResizeDetector.addEventListener(setTall, null);
};

[/code]

[b]Click link to show hidden text:[/b]

[code]function expand(ele) {
if (document.getElementById(‘answer’+ele).style.display == ”)
document.getElementById(‘answer’+ele).style.display=’none’;
else
document.getElementById(‘answer’+ele).style.display=”;

for (i=0;i <= 75;i++) {
if (document.getElementById(‘answer’+i) != null && i != ele) document.getElementById(‘answer’+i).style.display=’none’;
}
}
function collapse(ele) {
document.getElementById(‘answer’+ele).style.display=’none’;
}
[/code]

to post a comment
JavaScript

10 Comments(s)

Copy linkTweet thisAlerts:
@designer76authorAug 16.2009 — Can anyone help me with this? I am getting thread views but no replies. I'd really appreciate any help someone can give me.
Copy linkTweet thisAlerts:
@designer76authorAug 17.2009 — Please is there anyone willing to help me?
Copy linkTweet thisAlerts:
@natepizzleAug 17.2009 — Can you provide the html so I can duplicate your error?
Copy linkTweet thisAlerts:
@designer76authorAug 17.2009 — Can you provide the html so I can duplicate your error?[/QUOTE]

Sure, here it is. If you click on the first text link (the others don't have anything in them) you will see what I am talking about. In IE it works fine, but Firefox and Safari are a whole different story. Again if you have firebug installed and click on the firebug icon to open or close the firebug window, then it makes the column resize like it is supposed to...it's really weird.

[B]HTML:[/B]
[CODE]<!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>title</title>
<meta name="keywords" content="" />
<meta name="description" content="content" />
<meta name="classification" content="" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<style type="text/css">

#content_container {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C30;
width: 800px;
padding: 0 0 15px 19px;
margin: 0 auto;
}

#right_container {
width: 245px;
background: #000;
padding: 20px 0 30px 0;
border: 1px solid #666;
float: right;
clear: both;
}

#left_info {
width: 524px;
}

.question {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 26px;
}

.answer {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #F2F2F2;
padding: 5px 5px 9px 8px;
margin: 0 0 7px 0;
border: 1px solid #5B5B5B;
}

#questions_info {
width: 180px;
height: 389px;
margin: 0 auto;
}

#header {
width: 865px;
height: 106px;
border-bottom: 2px solid #666;
background: #036;
}

#site_container {
width: 865px;
margin: 0 auto;
border-top: 2px solid #666;
border-right: 2px solid #666;
border-left: 2px solid #666;
background: #CCC;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #FFF;
height: 26px;
width: 800px;
margin: 21px auto 23px auto;
padding: 6px 0 0 19px;
background: #03C;
}

#footer {
height: 43px;
width: 869px;
margin: 0 auto 0 auto;
padding: 18px 0 0 0;
background: #03C;
}

.clear {
clear: both;
}

</style>

<script type="text/javascript">function expand(ele) {
if (document.getElementById('answer'+ele).style.display == '')
document.getElementById('answer'+ele).style.display='none';
else
document.getElementById('answer'+ele).style.display='';

for (i=0;i <= 75;i++) {
if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
}
}
function collapse(ele) {
document.getElementById('answer'+ele).style.display='none';
}
</script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/column.js"></script>
</head>
<body>
<div id="site_container">
<div id="header"></div>
<h3>Header</h3>
<div id="content_container">
<div id="right_container"></div>
<div id="left_info">
<div class="question"><a onclick="expand('0');" href="javascript:void(0);">1. TEXT</a></div>
<div id="answer0" class="answer" style="display: none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis dui sit amet risus sagittis porta non a risus. Sed consequat pretium lectus, dictum vehicula enim dignissim in. Donec rutrum fringilla est at pretium. Phasellus condimentum malesuada tortor eget hendrerit. Sed congue faucibus libero mollis porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus quis velit laoreet vestibulum. Vestibulum venenatis tincidunt purus a semper. Vivamus et leo mi. Nullam ac nisl erat, nec tempus enim. Aliquam tortor velit, pharetra eu suscipit a, euismod nec leo. Donec a ipsum vel felis venenatis mattis. Integer justo mi, rhoncus non gravida at, faucibus sit amet ante. Praesent eros ligula, blandit ac scelerisque pharetra, varius ac mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed orci ipsum, aliquet sit amet convallis vitae, tempor eu magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper eros est. Aenean id urna est, vitae ultricies lectus. </div>
<div class="question"><a onclick="expand('1');" href="javascript:void(0);">2. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer1" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('2');" href="javascript:void(0);">3. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer2" class="answer" style="display: none"></div>
<div class="question" ><a onclick="expand('3');" href="javascript:void(0);">4. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer3" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('4');" href="javascript:void(0);">5. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer4" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('5');" href="javascript:void(0);">6. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer5" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('6');" href="javascript:void(0);">7. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer6" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('7');" href="javascript:void(0);">8. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer7" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('8');" href="javascript:void(0);">9. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer8" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('9');" href="javascript:void(0);">10. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer9" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('10');" href="javascript:void(0);">11. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer10" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('11');" href="javascript:void(0);">12. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer11" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('12');" href="javascript:void(0);">13. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer12" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('13');" href="javascript:void(0);">14. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer13" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('14');" href="javascript:void(0);">15. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer14" class="answer" style="display: none"></div>
<div class="question"><a onclick="expand('15');" href="javascript:void(0);">16. </a><a onclick="expand('0');" href="javascript:void(0);">TEXT</a></div>
<div id="answer15" class="answer" style="display: none"></div>
</div>
<p class="clear"></p>
</div>
</div>
<div id="footer"></div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@designer76authorAug 17.2009 — Here is all of the javascript:

[B]Column Expand Code:[/B]
[CODE]
// Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns. Just delete the ones you're not using.
var divs = new Array('right_container', 'left_info');

// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }

// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; }
else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
else { elm['on' + evType] = fn; }
}

// Start Column Script
function setTall() {
if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
}
for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
}
}
}

// Assign one of the columns to the TextResizeDetector.
function initTall() {
if (document.getElementById) { for (var i = 0; i < divs.length; i++)
{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
setTall(); }
}

// Fire Events
addEvent(window, 'load', initTall, false);
addEvent(window, 'resize', setTall, false);

/* Detects changes to font sizes when user changes browser settings
Fires a custom event with the following data:
iBase : base font size
iDelta : difference in pixels from previous setting
iSize : size in pixel of text
author Lawrence Carvalho [email][email protected][/email] */

// @constructor
TextResizeDetector = function() {
var el = null;
var iIntervalDelay = 200;
var iInterval = null;
var iCurrSize = -1;
var iBase = -1;
var aListeners = [];
var createControlElement = function() {
el = document.createElement('span');
el.id='textResizeControl';
el.innerHTML='&nbsp;';
el.style.position="absolute";
el.style.left="-9999px";
var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
// insert before firstChild
if (elC)
elC.insertBefore(el,elC.firstChild);
iBase = iCurrSize = TextResizeDetector.getSize();
};

function _stopDetector() {
window.clearInterval(iInterval);
iInterval=null;
};
function _startDetector() {
if (!iInterval) {
iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
}
};

function _detect() {
var iNewSize = TextResizeDetector.getSize();

if(iNewSize!== iCurrSize) {
for (var i=0;i <aListeners.length;i++) {
aListnr = aListeners[i];
var oArgs = { iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
if (!aListnr.obj) {
aListnr.fn('textSizeChanged',[oArgs]);
}
else {
aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
}
}

}
return iCurrSize;
};
var onAvailable = function() {
if (!TextResizeDetector.onAvailableCount_i ) {
TextResizeDetector.onAvailableCount_i =0;
}

if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
TextResizeDetector.init();
if (TextResizeDetector.USER_INIT_FUNC){
TextResizeDetector.USER_INIT_FUNC();
}
TextResizeDetector.onAvailableCount_i = null;
}
else {
if (TextResizeDetector.onAvailableCount_i<600) {
TextResizeDetector.onAvailableCount_i++;
setTimeout(onAvailable,200)
}
}
};
setTimeout(onAvailable,500);

return {
/*
* Initializes the detector
*
* @param {String} sId The id of the element in which to create the control element
*/
init: function() {

createControlElement();
_startDetector();
},
/**
* Adds listeners to the ontextsizechange event.
* Returns the base font size
*
*/
addEventListener:function(fn,obj,bScope) {
aListeners[aListeners.length] = {
fn: fn,
obj: obj
}
return iBase;
},
/**
* performs the detection and fires textSizeChanged event
* @return the current font size
* @type {integer}
*/
detect:function() {
return _detect();
},
/**
* Returns the height of the control element
*
* @return the current height of control element
* @type {integer}
*/
getSize:function() {
var iSize;
return el.offsetHeight;


},
/**
* Stops the detector
*/
stopDetector:function() {
return _stopDetector();
},
/*
* Starts the detector
*/
startDetector:function() {
return _startDetector();
}
}
}();

/*** end TextResizeDetector */

TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
TextResizeDetector.USER_INIT_FUNC = function() {
var iBase = TextResizeDetector.addEventListener(setTall, null);
};

[/CODE]


[B]Hide Unhide Text Code: This is already in the HTML file.[/B]
[CODE]function expand(ele) {
if (document.getElementById('answer'+ele).style.display == '')
document.getElementById('answer'+ele).style.display='none';
else
document.getElementById('answer'+ele).style.display='';

for (i=0;i <= 75;i++) {
if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
}
}
function collapse(ele) {
document.getElementById('answer'+ele).style.display='none'; [/CODE]
Copy linkTweet thisAlerts:
@natepizzleAug 17.2009 — Lets see... 1st this needs fixed var divs = new Array('col1, 'col2');

your missing a quote after col1
Copy linkTweet thisAlerts:
@natepizzleAug 17.2009 — It looks like your trying to do an FAQ page. Check out this faq I did recently. The javascript may assist you in tracking down your mishap http://asaferwaytoinvest.com/faq.htm
Copy linkTweet thisAlerts:
@designer76authorAug 17.2009 — Lets see... 1st this needs fixed var divs = new Array('col1, 'col2');

your missing a quote after col1[/QUOTE]

Yeah that was my mistake when I copied and pasted it here. It works fine when these two scripts aren't being used in the same file. Do you have any other ideas on what it may be?
Copy linkTweet thisAlerts:
@natepizzleAug 17.2009 — http://www.asaferwaytoinvest.com/sandbox.htm

Here is your code and it seems to be working fine in FF3. Perhaps I'm not understanding exactly what your doing. What your saying is if someone increases the font size in their browser the code should automatically increase the parent div of the text right?

If you click on the right anchor atleast as the others all have <a onclick="expand('0')
Copy linkTweet thisAlerts:
@designer76authorAug 18.2009 — Thanks for the reply. With the code you posted you forgot to include the CSS style for the div [B]content_container[/B]. What the problem is, is that when the hidden text expands when you click on a link, the [B]right_content_container[/B] div should expand and grow taller to match the height of the [B]left_info[/B] div. It does that fine in IE, but in Firefox and Safari it does not. I believe there is an issue with the two javascripts that I have in this file working together, because they both work fine in other pages where I use one but not the other.

When they both need to work on the same page, it's the div/column resize script that is acting up in Safari and Firefox. What's really strange is that when I click on my firebug icon in Firefox (in the lower righthand corner) to check the CSS or look for bugs, the divs/columns resize like they should and everything looks fine. It's almost as if it's not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something.
×

Success!

Help @designer76 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...