?
Solved

Show/Hide DOM Elements and Compatibility View

Posted on 2011-09-19
5
Medium Priority
?
424 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Custom Android App Development is the need of an hour for several businesses. If you go through the right firm for Android Application Development, it can make a huge difference to the ways in which customers interact with your business.
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month5 days, 9 hours left to enroll

588 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