Solved

Alternative to TabContainer

Posted on 2011-09-21
10
1,082 Views
Last Modified: 2012-05-12

I was using the TabContainer but I can't get it to display.  It's visibility is always set to hidden.
I have no idea why this is happening or what I can do to get it working so I am trying to figure out a light weight alternative to the ajax tabcontainer.
I currently have made an unordered list for the tabs and then thought that instead of using a multi-view or wizard, I would use divs, setting display:none, display:block.
If this is not a good idea PLEASE tell me why.
I wrote the javascript, very new to js, and tried my idea out.  Well the divs don't hide and the tabs don't change color, in other words, nothing works.
What can I do to make this work?
Thanks



<div id="tabpanels">

  <ul id="navbartabs" enableviewstate="true">
      <li id="0" class="vTabOver" onload="javascript:DoTabClick(this)" onclick="javascript:SetBackColor(this)">Schedules</li>
      <li id="1" class="vTab" onclick="javascript:SetBackColor(this)">Services</li>
      <li id="2" class="vTab" onclick="javascript:SetBackColor(this)">Formulas</li>
      <li id="3" class="vTab" onclick="javascript:SetBackColor(this)">Before/After</li>
      <li id="4" class="vTab" onclick="javascript:SetBackColor(this)">Products</li>
      <li id="5" class="vTab" onclick="javascript:SetBackColor(this)">Totals</li>
 </ul>

<div class="formclear"></div>
  <div id="div_0">
div 0
</div>
<div id="div_1">
div 1
</div>
<div id="div_2">
div 3
</div>...
</div>

<script type="text/javascript">
   function DoTabClick(obj) {
     setbackcolor(obj)
   
   }
   function SetBackColor(obj) {

      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].style.color = '#000000';
         items[i].style.backgroundColor = '#b9d0ff';
      }
      items(obj.id).style.color = '#FFFFFF';
      items(obj.id).style.backgroundColor = '#000000';  
            showhidedivs(obj.id)
      }
      function showhidedivs(itemindex) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         hi.value = itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementById("div");
         for (var i = 0; i < div.length; ++i) {
            div[i].style.display = "none"
         }
         var divshow = document.getElementById("div_" + itemindex);
         for (var d = 0; i < divshow.length; ++i) {
            div[i].style.display = "block"
         }
  
      } 
</script>

Open in new window

0
Comment
Question by:Sheritlw
  • 5
  • 5
10 Comments
 
LVL 21

Expert Comment

by:Kim Walker
ID: 36577370
A couple of things that jump out at me without diving deeper:

The id attribute must begin with a letter. See the HTML 4.01 specifications.
Javascript function names are case specific. You have a function defined as "SetBackColor" but you are referring to a function named "setbackcolor" in the function "DoTabClick". Is there also a lower case version of this function?
0
 

Author Comment

by:Sheritlw
ID: 36577509
Thank you for your response.  I corrected my mistakes, but it still doesn't work.
Any ideas?

Thanks
<script type="text/javascript">
   function DoTabClick(obj) {
     SetBackColor(obj)
   }
   function SetBackColor(obj) {

      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].classname = "vTab";

      }
      var id = obj.id;
      obj.classname = "vTabOver";
            showhidedivs(id)
      }
      function showhidedivs(itemindex) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         hi.value = itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementById("div");
         for (var i = 0; i < div.length; ++i) {
            div[i].style.display = "none"
         }
         var divshow = document.getElementById("div_" + itemindex);
         for (var d = 0; i < divshow.length; ++i) {
            div[i].style.display = "block"
         }
  
      } 
</script>

Open in new window

0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 36578024
You didn't say what you changed the ids to on your li elements. Since you can't have a number as the first character in an id, I changed them to "a0" through "a5". Because of the additional character in the name, I changed line 15 to:

showhidedivs(id.charAt(1) );

Open in new window


"classname" should be "className". (lines 10 and 14)

Both of the above changes were academic since most browsers would forgive these errors.

The most important error is on line 21 which should be a getElementsByTagName instead of a getElementById.

var div = divmain.getElementsByTagName("div");

Open in new window


0
 

Author Comment

by:Sheritlw
ID: 36578166

Hi xmediaman,

I corrected my mistakes and now it will load but all the panels will show and when I click on a tab the css is no longer applied and no panels show.
I renamed the li's to li_0, li_1, li_2 etc.
I really appreciate your help, it is hard when you are first learning something.
Any ideas?

Thanks
<ul id="navbartabs" enableviewstate="true">
      <li id="li_0" class="vTabOver" onload="javascript:DoTabClick(this)" onclick="javascript:SetBackColor(this)">Schedules</li>
      <li id="li_1" class="vTab" onclick="javascript:SetBackColor(this)">Services</li>
      <li id="li_2" class="vTab" onclick="javascript:SetBackColor(this)">Formulas</li>
      <li id="li_3" class="vTab" onclick="javascript:SetBackColor(this)">Before/After</li>
      <li id="li_4" class="vTab" onclick="javascript:SetBackColor(this)">Products</li>
      <li id="li_5" class="vTab" onclick="javascript:SetBackColor(this)">Totals</li>
 </ul>





<script type="text/javascript">
   function DoTabClick(obj) {
     SetBackColor(obj)
   }
   function SetBackColor(obj) {
      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].className += "vTab";
      }
      obj.className += "vTabOver";
            showhidedivs(obj)
      }
      function showhidedivs(obj) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         var itemindex = obj.selectedindex;
         hi.value = itemindex;
         var divmatch = 'div_' + itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementsByTagName("div");
         for (var i = 0; i < div.length; ++i) {
            if (i == itemindex) {
               var divshow = document.getElementById(divmatch);
               for (var d = 0; d < divshow.length; ++d) {
                  divshow[d].style.display = "block";
               }
            }
            else {
               div[i].style.display = "none";
            }
         }
         return false;
      } 
</script>

Open in new window

0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 36579725
There's a lot more at play here than what you're showing me so I have to assume a lot. Since lines 22 and 24 both deal with the class name, I expect they are what's causing your current grief. Both of these lines use the += operator which means the strings are being concatenated to the end of the class name each time. I doubt that is your intention. This would cause your class name to get continuously longer each time you clicked on one of the list items and would require you to have lots of different combinations of class names in your CSS. Try changing those to simple = operators.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 21

Expert Comment

by:Kim Walker
ID: 36579827
Can you provide a link to the page so I can see all the elements involved at work? I especially need to see the CSS and the select object involved in the javascript function.
0
 

Author Comment

by:Sheritlw
ID: 36581855
Hi xmediaman,

I uploaded the project http://service2020.com/Stylist/Client_Services.aspx
The login is test@smsmain.com and the password is YrS2[3|B)t+K*C
I've been using the developer tools with IE trying to debug this and have made some good changes, I think.
The tab part is working now, but I still can't get the divs to show when the tab is clicked on.
The debugger shows it setting the display correctly, but it doesn't show.
The css is at http://service2020.com/CSS/main.css
Thanks again for your help. I do really appreciate it.
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 36584114
It may be a simple case of closing the wrong tag. Your code was difficult for me to follow; I'm sure it is doubly difficult for you if you're new at this. You need to use a system of indents with each new tag and reduce the indent with each closing tag. This will help determine when you have nesting problems.

I believe the problem in this case is that you've closed a td tag instead of closing a div. As it is, divs_1-5 are nested inside div_0 so that when div_0 is hidden, all the divs contained within it (including divs_1-5) are also hidden.

Eight lines above your div_1 is a closing div tag and a closing td tag. I believe the closing td tag was actually supposed to have been another closing div tag because I couldn't find an open td at that point:
	</div></td>

Open in new window


That may fix your current problems. The individual div_1-5 tags are getting the correct class names when the tabs are clicked, but because they're contained within the hidden div_0, they, too, are hidden.

Good luck.
0
 

Author Comment

by:Sheritlw
ID: 36584451
You are GREAT!

Usually the code is formatted, but when using the Ajax TabContainer it would scrunch my code and add in multiple spaces, &nbsp; and numerous empty lines.
After a several times of fixing the layout and then realizing that the control didn't show I switched to the list with divs.
I thank you so much for your help...

Sheri
0
 

Author Closing Comment

by:Sheritlw
ID: 36584454
Very helpful!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

747 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

13 Experts available now in Live!

Get 1:1 Help Now