Solved

Show/Hide DOM Elements and Compatibility View

Posted on 2011-09-19
5
412 Views
Last Modified: 2012-05-12
Hi experts,

I'm having an issue trying to alternately hide or display a DOM elements when IE8/9 is in "Compatibility View" mode.
The code below fails on first iteration through the loop on the document.getElementById(LinkName).style.display = 'none'; line.
If I take away compatibility view, it works just fine!  I don't want to have to explain to users to turn it off and want to know
why it is happening and if there is a workaround that anyone knows of?  The code simply Hides/shows a div element
based on a list  and when a user clicks on one of the list items (looks like a collection of "tabs").  Oh, and the error I keep getting
is "Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined".

function s(tabName) {
           var elem;
           var ShowPanel;
           var LinkName;
           var LastTab = document.getElementById("hidLastTab");

           if (tabName == 'First') {
               if (LastTab.value == '') {
                   LastTab.value = 'Customers';
                   tabName = 'Customers';
               }
               else {
                   tabName = LastTab.value;
               }

           }
           else {
               LastTab.value = tabName;
           }
           
           //gridViewCtlId = '<%=gvCustomers.UniqueID%>';
           //getGridViewControl();
           //getCellValue;
           for (i = 0; i < document.getElementById("toc").getElementsByTagName("li").length; i++) {
               if (document.all) { // IE;
                   LinkName = document.getElementById("toc").getElementsByTagName("li")[i].innerText;
               }
               else {
                   LinkName = document.getElementById("toc").getElementsByTagName("li")[i].textContent;
                                      
               }
               
               if (LinkName == tabName) {
                   document.getElementById("toc").getElementsByTagName("li")[i].className = "current";
                   document.getElementById(LinkName).style.display = '';
               }
               else {
                   document.getElementById("toc").getElementsByTagName("li")[i].className = "";
                   document.getElementById(LinkName).style.display = 'none';
               }
           //           }
            
       }

Open in new window

0
Comment
Question by:sharizod
[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
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36561857
0
 
LVL 1

Author Comment

by:sharizod
ID: 36562425

Hi Gurvinder372m

I'm not quite sure how I would incorporate that.  I am trying to show or hide a div.  I need the classname to be defined as well
(as something else not hidden) as I am using it to show which tab the user clicked on.

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36562439
Yes, but since compatibility view is giving issues, you could be served better to just update the class rather than updating the styles
0
 
LVL 1

Accepted Solution

by:
sharizod earned 0 total points
ID: 36567002
My problem is, the part of the object that I would normally be setting the style on (or class) is null
so it has no effect whether or not I use the examples in the links that you gave above, or the
styles that I have in my code.  I am just wondering what the cause is of it being null in the
first place and if there is a workaround for it when browsers are in compatibility mode.  

OK, I had another look at this and I found the issue!  It seems (although I can't fathom why), that
I had a space after one of the names that I was comparing.   I was trying to compare
"Customers " which is what was exposed in the LinkName object with "Customers" which was
in the result of the value of the ordered list (tab) name.  The new modified code that works is below.  The
's' function is called whenever the onclick event fires for one of the ordered list items (tabs).

Your solution didn't solve my issue, but I wanted to thank you though for forcing me to look
at it again and get me going in another direction!  (Darn those spaces at the end are hard
to see in proportional fonts!!!)
function s(tabName) {
           var elem;
           var ShowPanel;
           var LinkName;
           var LastTab = document.getElementById("hidLastTab");

           if (tabName == 'First') {
               if (LastTab.value == '') {
                   LastTab.value = 'Customers';
                   tabName = 'Customers';
               }
               else {
                   tabName = LastTab.value;
               }

           }
           else {
               LastTab.value = tabName;
           }
           
           for (i = 0; i < document.getElementById("toc").getElementsByTagName("li").length; i++) {
               if (document.all) { // IE;
                   LinkName = document.getElementById("toc").getElementsByTagName("li")[i].innerText;
               }
               else {
                   LinkName = document.getElementById("toc").getElementsByTagName("li")[i].textContent;
                                      
               }
               
               if (LinkName.trim() == tabName.toString()) {
                   document.getElementById("toc").getElementsByTagName("li")[i].className = "current";
                   document.getElementById(LinkName.trim()).style.display = '';
               }
               else {
                   document.getElementById("toc").getElementsByTagName("li")[i].className = "";
                   document.getElementById(LinkName.trim()).style.display = 'none';
               }
           //           }
            
       }

Open in new window

0
 
LVL 1

Author Closing Comment

by:sharizod
ID: 36594667
The solution provided did not solve my issue as the parent object I was trying to change the change a classname or styles on an object that was null.  The reason that it was null was that a comparison was being performed that had a space in it at the end of one of the objects.  Why it worked in non-compatiblilty mode and did NOT work in compatibility mode is a mystery!!
0

Featured Post

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmakerā€¦
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

623 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