PDA

View Full Version : problem with script in firefox



emanuelle
05-07-2006, 10:50 AM
I have a very simple display none/block script
Somehow in Firefox it doesnt work well.
Any idea what's wrong and how to fix it?

See attachment for script

TXS

mwinter
05-07-2006, 11:28 AM
Somehow in Firefox it doesnt work well.
Any idea what's wrong and how to fix it?Rewrite it entirely. First of all, content should not be hidden by CSS directly if it is up to a script to reveal it again. Script code should control the visibility entirely. Secondly, elements should not be assumed to be available automatically via global variables. That is a dubious feature that the Web would do well without.

There's a more pressing concern, however. From the code you posted, you seem to want to include the content of three documents in one. Don't. Write them separately.

Mike

emanuelle
05-07-2006, 11:36 AM
I dont know how to rewrite it. Could u tell me where I could find scripts like that on the net?(Display none/block) It should be simple no?

jscheuer1
05-07-2006, 10:24 PM
The red parts are only required for compatibility with older IE browsers. From about IE5.5 up they aren't needed:


<script type="text/javascript">
function disp1(idNum){
for (var i=1;i<4;i++)
document.getElementById? document.getElementById('tr'+i).style.display='none' : document.all['tr'+i].style.display='none';
document.getElementById? document.getElementById('tr'+idNum).style.display='' : document.all['tr'+idNum].style.display='';
}
</script>

otaku
05-07-2006, 10:33 PM
I have a very simple display none/block script
Somehow in Firefox it doesnt work well.
Any idea what's wrong and how to fix it?

See attachment for script

TXS

Hello emanuelle, you can also try something like below:



<html>
<head>
<script type="text/javascript">
function setAct(num){
if(document.getElementById){
divs=document.getElementById("cont").getElementsByTagName("DIV");
for(i=0;i<divs.length;i++){
if(i==num){
divs[i].style.display = "block";
}else{
divs[i].style.display = "none";
}
}
}
}
</script>
</head>
<body onload="setAct(0);">
<div id="main">
<a href="javascript://" onClick="setAct(0);">General ideas</a>
|
<a href="javascript://" onClick="setAct(1);">About Us</a>
|
<a href="javascript://" onClick="setAct(2);">Contact</a>
<div id="cont">
<div id="c0" style="display:none;">
text1 text1 text1 text1 text1 text1 text1 text1 text1
</div>
<div id="c1" style="display:none;">
text2 text2 text2 text2 text2 text2 text2 text2 text2
</div>
<div id="c2" style="display:none;">
text3 text3 text3 text3 text3 text3 text3 text3 text3
</div>
</div>
</div>
</body>
</html>

emanuelle
05-08-2006, 10:24 AM
Thank you, you solved one of my problems!
Now here's another script that also doesn't work well in FF.
Attached the code,

waiting to hear from you....

mwinter
05-08-2006, 12:08 PM
If the OP really intends to go through with this idea, it would be beneficial to suggest a decent solution.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" dir="ltr">
<head>
<title>Site name Title</title>

<script type="text/javascript">
var Sections = function() {
var initialized = false,
operational = false,
activeSection;

function setStyle(element, property, value) {
var style;

if (element && (style = element.style))
style[property] = value;
}
function stripFragment(uri) {
var i = uri.indexOf('#');

return (i != -1) ? uri.substring(i + 1) : null;
}

return {
initialize : function(uri) {
var content, sectionName, sections;

if (document.getElementById
&& (content = document.getElementById('content'))
&& content.getElementsByTagName
&& (sections = content.getElementsByTagName('div'))
&& (sectionName = stripFragment(uri))
&& (activeSection = document.getElementById(sectionName))) {
for (var i = 0, n = sections.length; i < n; ++i) {
var current = sections[i];

if (/(^|\s+)section(\s+|$)/.test(current.className)
&& (current != activeSection))
setStyle(current, 'display', 'none');
}
operational = true;
}
initialized = true;
},
finalize : function() {
activeSection = null;
},
goTo : function(uri) {
if (!initialized) this.initialize(uri);
if (operational) {
var sectionName = stripFragment(uri),
element;

if (sectionName
&& (element = document.getElementById(sectionName))) {
if (element != activeSection) {
setStyle(activeSection, 'display', 'none');
setStyle(element, 'display', '');
activeSection = element;
}
return false;
}
}
return true;
}
};
}();
</script>
</head>

<body onload="Sections.initialize('#general-ideas');"
onunload="Sections.finalize();">
<h1>Title</h1>

<div id="site-navigation">
<ul>
<li><a href="#general-ideas"
onclick="return Sections.goTo(this.href);">General Ideas</a></li>
<li><a href="#about-us"
onclick="return Sections.goTo(this.href);">About Us</a></li>
<li><a href="#contact"
onclick="return Sections.goTo(this.href);">Contact</a></li>
</ul>
</div>

<div id="content">
<div id="general-ideas" class="section">
<h2>General Ideas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

<div id="about-us" class="section">
<h2>About Us</h2>
<p>Nulla vel tortor sit amet pede imperdiet varius. Nullam fringilla
consectetuer lorem. Curabitur iaculis lectus non diam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Proin libero lacus, vestibulum tincidunt, tincidunt non,
condimentum sed, libero. Ut tempor, lacus sit amet elementum aliquet,
quam risus euismod wisi, ac varius purus lacus vitae nibh. Nulla
fermentum velit et nulla. Cras non wisi ac libero posuere mattis. Nam
condimentum consequat augue. Quisque faucibus pede vitae lectus. Duis
blandit ipsum vitae nibh cursus lobortis.</p>
</div>

<div id="contact" class="section">
<h2>Contact</h2>
<p>Phasellus in ante. Donec viverra luctus lectus. Integer laoreet
pellentesque massa. Suspendisse vestibulum elementum tortor. Etiam eu
sapien. Phasellus rutrum, tellus nec rhoncus faucibus, lorem augue
tristique wisi, et mattis ipsum neque quis mi. Pellentesque tincidunt
mollis nunc. Donec et elit eget ante pellentesque viverra. Sed libero
erat, dictum at, commodo ac, tristique sed, turpis. Vivamus molestie
tortor. Suspendisse potenti. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Suspendisse
pharetra mattis nibh. Curabitur dolor sem, vestibulum id, varius at,
nonummy ac, nisl. Pellentesque eleifend magna quis ipsum. Nam malesuada,
odio eu congue vehicula, quam dolor tempus wisi, in interdum neque risus
eu augue. Nam eu wisi. Cras dapibus.</p>
</div>
</div>
</body>
</html>
This will degrade properly, allowing the links to actually take the user to the relevant part of the document.



<html>Missing document type declaration.


<head>
<script type="text/javascript">Missing title element.




function setAct(num){
if(document.getElementById){
divs=document.getElementById("cont").getElementsByTagName("DIV");
Insufficient feature detection.


<a href="javascript://" [...]The javascript: pseudo-scheme is almost always wrong and entirely unnecessary here. There is a perfectly good alternative, namely a fragment identifier linking to the appropriate document section.


<div id="c0" style="display:none;">Creates an inaccessible document (as I alluded to in my previous post).



Now here's another script that also doesn't work well in FF."Doesn't work" isn't a helpful description. What do you think that code should do? What does it do?

Mike

emanuelle
05-08-2006, 12:15 PM
Hi mike
I was talking about another script.
I will send it again by attachment. When I say it doesnt work well I mean that when I click on a row for it to open the hidden info, it gives me lots of vertical space (In Firefox)
Emanuelle

otaku
05-08-2006, 03:27 PM
Hi mike
I was talking about another script.
I will send it again by attachment. When I say it doesnt work well I mean that when I click on a row for it to open the hidden info, it gives me lots of vertical space (In Firefox)
Emanuelle

Hello emanuelle,

Here is a script for you, I did not place any <title> tag and others extra stuff because I presume you can add it by yourself:



<html>
<head>
<style type="text/css">
.title {
cursor:pointer;
padding: 5px 5px 0px 5px;
}
.sub {
background-color: #848484;
padding: 0px 5px 5px 5px;
}
</style>
<script type="text/javascript">

function switchContent(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("content").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="sub"){
ar[i].style.display = "none";
}
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function switchColor(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("content").getElementsByTagName("DIV");
if(el.style.backgroundColor = "#FFFFFF"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="title"){
ar[i].style.backgroundColor = "#FFFFFF";
}
}
el.style.backgroundColor = "#848484"
}else{
el.style.backgroundColor = "#FFFFFF"
}
}
}

</script>
</head>
<body>
<div id="content">
<div id="c0" class="title" onclick="switchContent('sub0');switchColor('c0');">Title 1</div>
<div id="sub0" class="sub" style="display:none;">
text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1
</div>


<div id="c1" class="title" onclick="switchContent('sub1');switchColor('c1');">Title 2</div>
<div id="sub1" class="sub" style="display:none;">
text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2
</div>


<div id="c2" class="title" onclick="switchContent('sub2');switchColor('c2');">Title 3</div>
<div id="sub2" class="sub" style="display:none;">
text 3 text 3 text 3 text 3 text 3 text 3 text 3 text 3
</div>
</div>

</body>
</html>


Tips: try to work with div tag instead of tr and td. It's easier to manipulate with javascript. If you have no choice to use table, place div inside your td tag.

emanuelle
05-08-2006, 04:28 PM
Thank you.....
:)

Twey
05-08-2006, 05:02 PM
try to work with div tag instead of tr and td.I disagree entirely. <div> tags have no semantic meaning, so should be used only as a last resort when nothing else suits the purpose.