Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

my three tabbed javascript nightmare

Posted on 2004-11-02
6
Medium Priority
?
197 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

636 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