JavaScript Forum

**basu** · 09-02-2006, 04:03 PM

Hey all, first of all, thanks in advance for any help or advice anybody gives. I really appreciate it.

I did look around and tried searching but I couldn't find any topics which were directly related to my problem.

Anyway, I wrote a javascript function to make content on my page collapsible instead of making multiple pages. So when the page first loads the home page content is visible and 3 other sections are invisible. Then you can click through the different sections on a navigation bar and each section will then become visible while the others are then made invisible. This works flawlessly in FF. However, in IE the script doesn't work in any fashion. All the content is always visible and the links don't do anything. I checked to see if my IE was blocking scripts but it is isn't blocking anything. And then I checked my friend's computers and it seems that it just doesn't work in IE. Is there anything I'm doing wrong or must I do a special code for IE? Or does IE just not support a code like this?

Thanks again for any insight, I really appreciate it.

**chrishirst** · 09-02-2006, 04:14 PM

absolutely no idea !!

wait! ......

I'm getting something appearing in my crystal ball ....

Nope.

gone again.

**CouponGuy** · 09-02-2006, 04:47 PM

I've run into the same type of problem before, and i remember trying several ways before getting it to work on all browsers. Some of the things I had to look for were:

"visibility" vs "display"
"none"
"inline"
"hidden"
"block"
""

I don't have the code in front of me now, but I finally got it to work. If I run across the code, I'll post it.

**basu** · 04:59 PM

hey thanks for the reply. I'll look into using different words and such to try and get the same effect. any idea if the different word that works in IE will also work in FF, or will I need to do a hack type thing and have 2 different cases in my code?

Also, hopefully you'll find your source!

Thanks again, I really appreciate it.

**funkdaddu** · 09-05-2006, 06:23 PM

Basu, we need to see your source code in order to help. Your post is like going to a mechanic and saying "my car doesn't work, can you fix it?" and not give him the car to look at.... hence chrishirst's failed attempt to use his crystal ball to figure out the problem

**basu** · 09-06-2006, 10:09 PM

My bad. I was thinking more conceptually when I posted. but here is my specific problem with code:

My JS function:

function MakeVisible(tab, element){
var tabs = document.getElementsByTagName("left")

// Hide all links.
var links = document.getElementsByTagName("content")
for (var j = 0; j < tabs.length; j++) {
if (links[j].className == 'Links') links[j].style.display = "none"
}

// Find the element and unhide it.
var element = document.getElementById(element)
element.style.display = "block"
}

My html source calling up the function:

 -<a href="#"><left onclick="MakeVisible(this, 'Rules')">Forums Rules</left></a><br>
 -<a href="#"><left onclick="MakeVisible(this, 'Terms')">Terms
of Service</left></a><br>
 -<a href="#"><left onclick="MakeVisible(this, 'Privacy')">Privacy Policy</left></a><br>
 -<a href="#"><left onclick="MakeVisible(this, 'Home')">Home</a></left><br><br>

and finally the containers holding the content:

<content id="Home" class="Links" style="display: block"> (This one is initially visible as what shows up when you log)

bunch of stuff
</content>

<content id="Rules" class="Links">
</content>

and that repeats a for the other two links.

So in FF it works, IE no luck!

If there's anything else you need please let me know!

Thanks for the help and sorry again about the lack of code. Didn't want to unnecessarily overwhelm people with code.

**funkdaddu** · 09-07-2006, 09:56 AM

Well first off, <content> and <left> aren't valid HTML tags so the browser probably can't pass on the reference of the onclick. Try making the <content>s <div>s and merge the <left>s into <a>

**mastercomputers** · 09-07-2006, 10:26 AM

Well considering I don't understand your HTML, is this XML?

I've decided to write an example, which can be improved dramatically, but may help you along.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Single Page, Multiple Hidden Content, Show Parts</title>
    <style type="text/css">
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      padding: 0 3px;
      display: inline;
    }
    </style>
    <script type="text/javascript">
    function displayContent(el)
    {
      var el = document.getElementById(el);
      var divs = document.getElementById('content').getElementsByTagName('div');
      for(i = 0, n = divs.length; i < n; i++)
      {
         divs[i].style.display = 'none';
      }
      el.style.display = 'block';
    }
    </script>
  </head>
  <body>
    <ul>
      <li><a href="#content" onclick="displayContent('page1')">Page 1</a></li>
      <li><a href="#content" onclick="displayContent('page2')">Page 2</a></li>
      <li><a href="#content" onclick="displayContent('page3')">Page 3</a></li>
      <li><a href="#content" onclick="displayContent('page4')">Page 4</a></li>
    </ul>
    <div id="content">
      <div id="page1">You are at page 1 right now</div>
      <div id="page2" style="display: none">You are at page 2 right now</div>
      <div id="page3" style="display: none">You are at page 3 right now</div>
      <div id="page4" style="display: none">You are at page 4 right now</div>
    </div>
  </body>
</html>

Cheers,

MC

**basu** · 03:05 AM

Hi all.

Funkdaddu:
yeah, i was afraid of that, it slowly was beginning to dawn on me that might be the problem. I guess FF takes too many liberties with it's forgiveness so it let me go off in a wrong direction. thanks for pointing it out my conceptual error. It'll be a big help for this project and anything else I work on in the future!

(I hope this makes sense

The reason I was using unique names was because if I used <div>s in my function any and all <div>s would be put into the object and it would get too complicated, plus I wanted to have the versatility of using other <div>s to format my page. same with using <a>. Just to check, if I were to use <div> and <a>, every instance of those two on the page would be put into the "links" and "tabs" objects that I create in the function right?

mastercomputers:

I think you've saved me! At least you've given me the one bit of conceptual information I didn't know. (document.getElementById().getElementsByTagNames() ... I would never have thought of that!) First of all, thank you for the effort in writing a similar, and fully functioning, code, I really appreciate it. It helped me to understand what I was doing wrong, which is great.

I'm not too knowledgeable about using the proper standards, but since I haven't specified anything otherwise I'm guessing everything is in html 4.0 or whatnot. Was your confusion as to if I was using html because of the <left> and <content> tags?

As funkdaddu pointed out I was incorrectly trying to create html tags, so now I've changed <left> to <span> and then I changed all the <content>s into <div>s and added the extra <div> surrounding all the <div>s I want to change. And now it works beautifully!

Since you mentioned that my code was confusing, is it poorly written or was it just confusing because of the crazy tag thing I was trying to do? I barely know how to identify correctly what i'm using, or if I'm using proper form or html habits, so I was wondering if it's essential that I be 100% true to standards and form? Might I be setting myself up for some more confusion later on? Any tips, suggestions, or a finger in the right direction would be awesome. If there's anything else you need me to do, don't hesitate to ask.

So in conclusion.... sorry for the extremely long post. Thanks to everyone who read and contributed to my problem. I've fixed the problem for now all thanks to your advice. You guys are all livesavers. hopefully I'll be able to beef up my own skills and help others out as well.

thanks again.

**danjam** · 09-19-2006, 01:10 PM

This should save you some trouble:

Here is a dynamic HTML approach to Tabbed content, with examples and other scripts.

http://www.webonweboff.com/widgets/j...d_content.aspx

It uses object-oriented JavaScript, neat and easy to plug-and-play, and supported across browsers.

Enjoy!