473,218 Members | 1,312 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,218 software developers and data experts.

Display a block of text in Firefox & Safari

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

Feb 23 '06 #1
4 5586
dr*****@yahoo.com 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.


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

Feb 23 '06 #2
Thanks for the info, I'll check it out

Feb 23 '06 #3
dr*****@yahoo.com 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
Feb 24 '06 #4
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)%>"><%=mvResultCategor y(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>

Feb 24 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: rbinington | last post by:
Hi, I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I...
14
by: maidane | last post by:
Hi, I got the following situation using the AC_Quicktime library. Apple recommend to use a Javascript call to generate the OBJECT tag (http://developer.apple.com/internet/ieembedprep.html). I...
7
by: Janis | last post by:
I try to understand what could be the source of a problem with displaying and hiding rows of tables using display:block/none. I've read selfhtml but could not find any hint about that. Any...
1
by: sneeka2 | last post by:
Hi, I'm developing a portfolio site, which contains a bunch of thumbnails wrapped in links: <a href="..."><img ... /></a>. A window.onload script inserts an onclick property into the links which...
2
by: xhe | last post by:
I met a very headache problem in javascript, I think this might be difference between IE and NS / Safari. I have a text area <form> <textarea name='tex1' onkeyup='displayit();'></textarea>...
7
by: khinester | last post by:
Hello, I have the following template that basically does the following: User select Country, then a sub-list is generated with Regions and then this returns the Counties ############### ...
2
by: wreed06 | last post by:
Hello, I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully...
7
by: GTalbot | last post by:
Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....
3
by: imoddedu | last post by:
In this code, is it do-able to make a form that is a select and if one option is selected, then 2 more forms are displayed? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.