Re: Display a block of text in Firefox & Safari

drew197@xxxxxxxxx wrote:
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[i][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>



[...]


--
Rob
.