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

Originally Posted by emanuelle

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:

Code:

<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

Originally Posted by emanuelle

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:

Code:

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

HTML Code:

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

Originally Posted by otaku

<html>

Missing document type declaration.

Missing title element.

Code:

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.

Creates an inaccessible document (as I alluded to in my previous post).

Originally Posted by emanuelle

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

Originally Posted by emanuelle

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:

Code:

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

Thread: problem with script in firefox

Thread Tools

Search Thread

problem with script in firefox

Bookmarks

Bookmarks

Posting Permissions