?
Solved

my three tabbed javascript nightmare

Posted on 2004-11-02
6
Medium Priority
?
203 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
Comment
Question by:redcable
  • 3
  • 3
6 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12473086
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
ID: 12473468
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:
cLFlaVA earned 1000 total points
ID: 12473763
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:redcable
ID: 12476456
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
ID: 12476521
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
ID: 12476549
sweet man thanks much
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

601 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