Display a block of text in Firefox & Safari

[drew197]

I am a newbie. I am editing someone elses code to make it compatible
with Firefox and Safari.
In IE, when you click on the proper link, a block of text is shown in a
nice paragraph form. But, in FireFox and Safari it appears as a narrow
column of text with only 2-3 words per line.


Here is the code:

function showAll()
{
var questionNum;
var layerObj;

if(document.all)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{

layerObj = eval("document.all.QAAnswerRow" + questionNum);
layerObj.style.display = "block";
}
}
else if (document.getElementById)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{
layerObj = eval("document.getElementById('QAAnswerRow" + questionNum
+ "')");
layerObj.style.display = "block";
}
}
}

I have used alerts to verify that it is getting thru the code. Please
help.
Andrew

 

[Tony]

I am a newbie. I am editing someone elses code to make it compatible
with Firefox and Safari.
In IE, when you click on the proper link, a block of text is shown in a
nice paragraph form. But, in FireFox and Safari it appears as a narrow
column of text with only 2-3 words per line.

It sounds to me like your problem isn't in the javascript, but in the
CSS. The style for that particular block of text is set too small. BTW,
in this case, IE displays it incorrectly - Firefox and safari display
it according to the CSS rules. The result would be EXACTLY what you
describe.

Look at your CSS, and if you still can't figure it out, you might want
to try asking in a css group - more likely to get the help you need
there...

 

[drew197]

Thanks for the info, I'll check it out

 

[RobG]

I am a newbie. I am editing someone elses code to make it compatible
with Firefox and Safari.
In IE, when you click on the proper link, a block of text is shown in a
nice paragraph form. But, in FireFox and Safari it appears as a narrow
column of text with only 2-3 words per line.

Tony has probably pointed you in the right direction. The use of 'eval'
in your posted code is unnecessary, also the order of tests for feature
detection should be reversed.

I'll presume that somewhere you also test for support for the style
object before trying to use it here. There seems to be a needless
reliance on the global variable 'NumberOfQuestionsShown', I've suggested
a different strategy below that should be easier to maintain - it uses a
single class to hide/show questions so the script doesn't need to know
how many questions there are nor do they need to be consecutively numbered.


function showAll()
{
var questionNum;
var layerObj;

if (document.getElementById){
for (questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum++)
{
layerObj = document.getElementById('QAAnswerRow' + questionNum);
layerObj.style.display = "block";
}
} else if(document.all) {
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum++)
{
layerObj = document.all['QAAnswerRow' + questionNum];
layerObj.style.display = "block";
}
}
}

As an alternative, have you considered changing the style rule instead?
I'll guess that you are revealing questions to a quiz. Instead of
going through all questions, how about giving them all the same style,
then just modify the style to change display from 'none' to ''.

The same technique can be used to change a property of any style rule,
you could also change the visibility property (which might be better if
you don't want stuff to jump around on the page when the questions are
shown/hidden).

In the example below, script is used to change the 'question' class's
display value to 'none' before anything is shown. It is then changed to
'' when the button is clicked. Users without JavaScript will see the
questions straight away.

If you hide the questions using CSS then reveal them using script, users
without script support can't see the questions.

The example looks long, but stripped of comments it's only marginally
longer than the stuff you originally posted.


<style type="text/css">
.question { color: red; background-color: #dde;}
</style>

<script type="text/javascript">

// Change the display property of class 'question'
changeStyle('question', 'display', 'none');


// Pass a class name, style property name and value to set
function changeStyle(cName, spName, newValue)
{
// Get the style sheets collection
var sSheets = document.styleSheets;

// Exit if no style sheets collection
if (!sSheets || !sSheets.length) return;

// Work out which rule accessor name is needed
var raName = (sSheets[0].cssRules)? 'cssRules' :
(sSheets[0].rules)? 'rules' : null;

// Exit if haven't found a model we like
if (!raName || 'object' != typeof sSheets[0][raName]) return;

// Setup some variables
var sRule, sRules;

// Setup a RegExp to test class names with
// selectorText allowed to have '.' or '*' as leading character
// browser dependent (old IE uses '*')
var re = new RegExp('^[.*]' + cName + '$');

// Go thru style sheets & get rules
for(var i=0, m=sSheets.length; i<m; ++i){
sRules = sSheets[raName];

// Look for rule & modify it
for (var j=0, n=sRules.length; j<n; ++j){
sRule = sRules[j];
if (re.test(sRule.selectorText)){
sRule.style[spName] = newValue;
}
}
}
}
</script>

<input type="button" value="Show questions"
onclick="changeStyle('question', 'display', '');">

<input type="button" value="Hide questions"
onclick="changeStyle('question', 'display', 'none');">

<div class="question">I'm a question</div>
<div class="question">I'm a question too</div>



[...]

 

[drew197]

This shows more of the javascript and also the css and mark up. I have
already copy and pasted some js functions from another file that was
updated to work across browsers. You will see this added code
inbetween comments stating that it is from "header.txt". I just was
not sure how to properly incorporate this new code into the preexisting
code, or if I even should. This has been a bit frustrating. I don't
know if you can help me any farther, but any help would be appreciated.
I also have another posting in a CSS forum seeking help for that part
of the code. Thanks again.

<script language="JavaScript">
//Start of info taken from Header.txt
var doCheck = (document.all!=null);
if (doCheck == false) {
versionNN = navigator.userAgent.toLowerCase();
if (versionNN.search(/safari/i) != -1)
browser = "safari"
else if (versionNN.search(/mozilla\/4/i) != -1)
browser = "NN4";
else
browser = "NN6";
} else {
var agt = navigator.userAgent.toLowerCase();
if ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1))
browser = "IE";
else
browser = "OP";
}

if (document.layers)
{
layerVisible = 'show';
layerInvisible = 'hide';
}


if(document.all)
{
IE4 = true;
}
else
{
if((browser == "NN4") || (browser == "NN6") || (browser == "safari"))
{
NS4 = true;
}
}

var IE4 = false;
var NS4 = false;
var layerVisible = 'visible';
var layerInvisible = 'hidden'

function getLayerObj(layerID)
{
var layerObj;

if (document.all)
{
layerObj = document.all(layerID);
}
else if (document.layers)
{
layerObj = document.layers[layerID];
}
else if (document.getElementById)
{
layerObj = document.getElementById(layerID).style;
}

return layerObj;
}

function getLayerStyleObj(layerID)
{
var layerObj;
var layerStyleObj;

layerObj = getLayerObj(layerID);

if(IE4)
{
layerStyleObj = layerObj.style;
}
else
{
if(NS4)
{

layerStyleObj = layerObj;
}
}

return layerStyleObj;
}
//End of info taken from Header.txt

var NumberOfQuestionsShown = 0;

function hideAll()
{
var questionNum;
var layerObj;


if(document.all)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{
layerObj = eval("document.all.QAAnswerRow" + questionNum);
layerObj.style.display = "none";
}
}
else
{
if (document.getElementById)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{
layerObj = eval("document.getElementById('QAAnswerRow" +
questionNum + "')");
layerObj.style.display = "none";
}
}
}
}

function showAll()
{
var questionNum;
var layerObj;

if(document.getElementById)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{

layerObj = document.getElementById('QAAnswerRow' + questionNum);
layerObj.style.display = "block";
}
}
else if (document.all)
{
for(questionNum = 1; questionNum <= NumberOfQuestionsShown;
questionNum ++)
{
layerObj = document.all['QAAnswerRow' + questionNum];
layerObj.style.display = "block";
}
}
}

function toggleAnswer(questionNum)
{

if(document.all)
{
var layerObj = eval("document.all.QAAnswerRow" + questionNum);
if(layerObj.style.display == "block")
{
layerObj.style.display = "none";
}
else
{
layerObj.style.display = "block";
}
}
else if (document.getElementById)
{
layerObj = eval("document.getElementById('QAAnswerRow" +
questionNum + "')");
if(layerObj.style.display == "block")
{
layerObj.style.display = "none";
}
else
{
layerObj.style.display = "block";
}
}
}




</script>

<%
If trim(mvKeyWords) = "" Then
CategoriesArray = GetCategories()
CurrentCategory = ""

If IsArray(CategoriesArray) Then
NumCategories = UBound(CategoriesArray, 2) + 1
Else
NumCategories = 0
End If

If CInt(NumCategories) > 1 Then
BuildCategoryTable(CategoriesArray)
End If
Else
NumCategories = 0
End If
%>
<table width="100%" cellpadding="0" cellspacing="0" border="0">

<%
QuestionIndex = 0
for i = 1 to mvNoResultQAndA
if mvKeyWordsFilter(i) then
QuestionIndex = QuestionIndex + 1
pvFound = true

If CInt(NumCategories) > 1 And CurrentCategory <>
mvResultCategory(i) Then
%>
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="bottom" nowrap>
<div class="categoryHeadingStyle"><a
name="<%=mvResultCategory(i)%>"><%=mvResultCategory(i)%></a></div>
</td>
<td valign="bottom" nowrap align="right">
[<a style="text-decoration:none" href="#Top">Back to Top</a>]
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#808080"><img src="/images/pixel.gif"
width="1" height="1" border="0"></td>
</tr>
<tr>
<td colspan="2"><img src="/images/pixel.gif" width="1" height="5"
border="0"></td>
</tr>
<%
CurrentCategory = mvResultCategory(i)
End If
%>
<tr id="QAQuestionRow<%=QuestionIndex%>"
class="QAQuestionRowStyle">
<td valign="top" width="14"><img
src="/corp_hr/images/bluearrows.gif" align="middle" width="14"
height="11" border="0"></td>
<td id="QAQuestionCell<%=QuestionIndex%>" valign="top"
width="100%">
<div id="QAQuestion<%=QuestionIndex%>" class="QAQuestionStyle"><a
name="QAQuestionLink<%=QuestionIndex%>" class="QAQuestionLinkStyle"
href="javascript:toggleAnswer(<%=QuestionIndex%>)"><%=mvResultQuestion(i)%></a></div>
</td>
</tr>
<tr id="QAAnswerRow<%=QuestionIndex%>" class="QAAnswerRowStyle">
<td>&nbsp;</td>

<td valign="top" width="100%">&nbsp;
<div id="QAAnswer<%=QuestionIndex%>"
class="QAAnswerStyle"><%=mvResultAnswer(i)%></div>
</td>
</tr>
<% If Trim(mvKeyWords) <> "" Then %>
<tr>
<td height="5"><img src="images/pixel.gif" width="1"
height="5"></td>
</tr>
<tr>
<td valign="top">

</td>
<td valign="top" width="100%">
<div><b>Sub
Department:</b>&nbsp;<%=mvResultSubDepartment(i)%>&nbsp;&nbsp;&nbsp;&nbsp;<b>Category:</b>&nbsp;<%=mvResultCategory(i)%></div>
</td>
</tr>
<% End If %>
<% If 1 = 2 Then %>
<tr>
<td valign="top"></td>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="5" bgcolor="#EEEEEE"><img
src="/images/table_corners/ul_5x5_EEEEEE.gif" width="5" height="5"
border="0"></td>
<td height="5" align="right" bgcolor="#EEEEEE"><img
src="/images/table_corners/ur_5x5_EEEEEE.gif" width="5" height="5"
border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"></td>
<td bgcolor="#EEEEEE" height="16" align="right">
<img src="/images/icon_edit.gif" width="16" height="16"
border="0">&nbsp;&nbsp;
<img src="/images/icon_delete.gif" width="16" height="16"
border="0">&nbsp;&nbsp;
</td>
</tr>
<tr>
<td valign="top"></td>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="5" bgcolor="#EEEEEE"><img
src="/images/table_corners/ll_5x5_EEEEEE.gif" width="5" height="5"
border="0"></td>
<td height="5" align="right" bgcolor="#EEEEEE"><img
src="/images/table_corners/lr_5x5_EEEEEE.gif" width="5" height="5"
border="0"></td>
</tr>
</table>
</td>
</tr>
<% End If %>
<tr>
<td height="15" colspan=2><img src="images/pixel.gif" width="1"
height="15"></td>
</tr>

<%
end if
next
%>
<script>
NumberOfQuestionsShown = <%=QuestionIndex%>;
</script>
<%
if not pvFound then
%>
<tr>
<td>
There are no results matching the search criteria.
</td>
</tr>
<%
end if
%>
</table>