Solved

Show/Hide DOM Elements and Compatibility View

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
This video teaches users how to migrate an existing Wordpress website to a new domain.

758 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

21 Experts available now in Live!

Get 1:1 Help Now