Solved

my three tabbed javascript nightmare

Posted on 2004-11-02
185 Views
Last Modified: 2012-05-05
alright. what im trying to do is best describe by showing what im trying to do. so take a gander at
your looking to look at there product highlights, product views, product details.

http://www.alienware.com/GearShop_Pages/Gear_Shop_Detail.aspx?ItemId=12796

notice how its like a tabbed screen. click on one it shows that info, click on another it shows that layer.

so what Ive got so far is this

my javascript

function handleClick(id) {
      var obj = "";      

            // Check browser compatibility
            if(document.getElementById)
                  obj = document.getElementById(id);
            else if(document.all)
                  obj = document.all[id];
            else if(document.layers)
                  obj = document.layers[id];
            else
                  return 1;

            if (!obj) {
                  return 1;
            }
            else if (obj.style)
            {                  
                  obj.style.display = ( obj.style.display != "none" ) ? "none" : "";
            }
            else
            {
                  obj.visibility = "show";
            }
}


and on my front end i have this


<script language="javascript" src="/ig/includes/IGDtabber.js"></script>
   <tr>
    <td colspan="2" class="main"><a href="javascript:handleClick('one');">my first<a>
      <a href="javascript:handleClick('two');"> my second</a>
      <a href="javascript:handleClick('three');">my third</a></td>
  </tr>
  <tr>
    <td id="one" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabOne); ?></td>
    <td id="two" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabTwo); ?></td>
    <td id="three" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabThree); ?></td>
  </tr>

now that works, but as you can see it doesnt work the way I want it two, but the test was complete. then I thought to myself and said "self, how can i get this to display in one datacell, and just have them overlay themselves on top of each other.

any suggestions?
0
Question by:redcable
    6 Comments
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    What do you mean it doesn't work the way you want it to?
      If you want it to quickly display a different section of content without reloading the page (?) then I suggest placing the three different sections into <div>s and setting the display style of each one programatically.
    0
     

    Author Comment

    by:redcable
    it works without reloading the page, i mean to say it doesnt display the way i want it too. even with divs, if i click my first link it displays my div, if i click my second link it displays my second info below the first div. i want it to replace the first div, as in I want each one to display on top of the other. just like in the example i gave at

     http://www.alienware.com/GearShop_Pages/Gear_Shop_Detail.aspx?ItemId=12796

    notice how its like a tabbed screen. click on one it shows that info, click on another it shows that layer.
    0
     
    LVL 13

    Accepted Solution

    by:
    Ahh, I see what you're saying.  Try this simplified function, let me know if it works for you.


    function handleClick(id) {
        var o = new Array('one', 'two', 'three');
        for (var i = 0; i < o.length; i++) {
            obj = document.getElementById(o[i]);
            if (id == o[i]) { obj.style.display = ''; }
            else { obj.style.display = 'none'; }
        }
    }
    0
     

    Author Comment

    by:redcable
    works like a dream, if you have time can you walk me through whats going in in this script.

    this is what i understand so far.

    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    ok, no prob.

    The script acts as follows:

    // pass this function the id of the cell that you'd like to display
    function handleClick(id) {

        // fill an array with the three possible id's.
        var o = new Array('one', 'two', 'three');

        // loop through the three strings inside the array
        for (var i = 0; i < o.length; i++) {

            // get the object with the appropriate id
            obj = document.getElementById(o[i]);

            // if this array position's id is the one that was passed in, display it
            if (id == o[i]) { obj.style.display = ''; }

            // otherwise, hide it
            else { obj.style.display = 'none'; }
        }
    }

    The function you had wasn't hiding any objects, just displaying them...
    0
     

    Author Comment

    by:redcable
    sweet man thanks much
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Learn The Basics of Ethical Hacking & Pen Testing

    Computer and network security is one of the fastest growing and most essential industries in technology, meaning companies will pay big bucks for ethical hackers. This is the perfect course to leap into this lucrative career, learning how to use ethical hacking to reveal ...

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now