Solved

Show/Hide DOM Elements and Compatibility View

Posted on 2011-09-19
5
398 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
  • 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

Industry Leaders: 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!

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

685 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