Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Show/Hide DOM Elements and Compatibility View

Posted on 2011-09-19
5
Medium Priority
?
417 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: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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

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
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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 learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

664 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