Question

I wouldn’t ask stackoverflow unless this was a serious problem. I simply cannot figure out how to debug this particular problem. A left navigation unordered list element is being injected with an inline display attribute. I can’t figure out what js code is doing this.

There is a file in js/custom.js that if I remove the file, the effect does not happen. So I assume its in there. I tried grepping for .attr, .hide, .css etc etc but nothing comes up that points to the ul element who’s display effect I am trying to track down. I greped the php files for instances where it echo’s or prints elements and nothing there either. I used firebug and firequery but nothing that is apparent comes up after inspecting the element. I tried breakpoints for attribute changes in chrome tools.

I suspect the answer would be in the DOM inspector but its mystified for me. I’m going to need to read up on the DOM tree views for firefox and chrome tools. But in the meantime can anyone give me a clue as to what is giving the ul elements with the class subs, in this page, their display property?

Answer 1

Have you tried Google Chrome Developer tools, to see if the CSS is what is hiding the element you are looking at?

Simply click on the element in the Chrome Browser, and select Inspect Element, then see what CSS properties are available.

Ultimately, what leaded me to this was, that I clicked on certain text, to open up the li’s below. Then I search for the text, when I inspected the element, and found the anchor tag there with the text in it. I then assumed that the anchor had to be the culprit, and searched for its relate classname “exp”, and found the js file that contained the function.

I looked at custom.js in crown/js folder, and found the following:

$('.exp').collapsible({
        defaultOpen: 'current',
        cookieName: 'navAct',
        cssOpen: 'active',
        cssClose: 'inactive',
        speed: 200
    });

The Li has an anchor element in it, with class of “exp”

<li class="forms"><a href="#" title="" class="exp"><span>Forms stuff</span><strong>4</strong></a>
            <ul class="sub" style="display: none; ">
                <li><a href="forms.html" title="">Form elements</a></li>
                <li><a href="form_validation.html" title="">Validation</a></li>
                <li><a href="form_editor.html" title="">WYSIWYG and file uploader</a></li>
                <li class="last"><a href="form_wizards.html" title="">Wizards</a></li>
            </ul>
        </li>

When clicked on this a tag, it gets another class called “active”, and jQuery then injects the display code:

<li class="forms"><a href="#" title="" class="exp active"><span>Forms stuff</span><strong>4</strong></a>
            <ul class="sub" style="display: block; ">
                <li><a href="forms.html" title="">Form elements</a></li>
                <li><a href="form_validation.html" title="">Validation</a></li>
                <li><a href="form_editor.html" title="">WYSIWYG and file uploader</a></li>
                <li class="last"><a href="form_wizards.html" title="">Wizards</a></li>
            </ul>
        </li>

The CSS then handles the rest.