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?
This is easy to figure out in Chrome.
Find the parent element that' holds the list.
Inspect said parent element.
Right click on the element and check "Break on subtree modifications"
Find out who added the element by inspecting the stack trace.
Profit!
Hope that helps you find the culprit.
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"><span>Forms stuff</span><strong>4</strong>
<ul class="sub" style="display: none; ">
<li>Form elements</li>
<li>Validation</li>
<li>WYSIWYG and file uploader</li>
<li class="last">Wizards</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"><span>Forms stuff</span><strong>4</strong>
<ul class="sub" style="display: block; ">
<li>Form elements</li>
<li>Validation</li>
<li>WYSIWYG and file uploader</li>
<li class="last">Wizards</li>
</ul>
</li>
The CSS then handles the rest.
Related
I'm currently working on an issue for my company's webpage, in which one of the customer wanted a certain page, to be text highlight-able. The current setting for that certain page is that, the element block which displays the data cannot be highlighted and copied.
The code for the block looks something like below
<div id="mainpanel">
<div id="datapanel">
<!-- All the data are displayed in here -->
</div>
</div>
Upon my investigation, i found out that datapanel block has disabled highlighting. But the question that i still couldn't find out was, how did they do it.
To my understanding, there are several ways of disabling highlighting text on webpage, and i tried to do opposite of it, in hope of reenabling the text highlighting.
Thru CSS, with this as reference. I tried to do the reverse, by doing -webkit-user-select:text !important, but somehow it doesn't appear on the style attribute of that element which i put this on. I tested this again on Chrome's inspector, adding the css line manually to the said element (in this case the datapanel block), but somehow it got rejected out (it didn't appear inside the inspector's Styles. Usually if the css line is not working or being overridden, Chrome inspector will just slash the css line out). I tried add the css line above to the parent block (the mainpanel) and it appears on the style attribute, but it was slashed.
Using z-index, in case if the datapanel block was under a transparent layer with higher z-index (which i couldn't find any inside the Inspector). I tried to set datapanel block to z-index:10000000 but still didn't work.
Thru javascript, using this as reference, but didn't work too.
Checking all over the html, javascript and css for that page, but nothing suggested that the page is highlight-disabled thru html, css or js.
Somehow i feel lost in here. Anyone here has any idea on why the solutions above wouldn't work.
I'm brushing up my html basics and I'm using a template to practice, here's my question with regards to reveal (uses jquery) menu:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
When the page is loaded and I click on the links nothing happens, the only one that works is home. In the example they use these type of links instead and they all work properly:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
They seem to be pointing to a folder instead? I've tried everything, relative, absolute, but nothing. Did they change the htaccess file? When I make a link outside of the menu div they work absolutely fine.
Any pointers, tips, hints? Thanks.
Edit: I applied the style to the other links as suggested but it didn't work. What's weird is that if I right-click and open the links they work.
Guessing it's to do with styling as I see you have a class on Home and home seems to be the only one that is working.
Try adding that same class on the other links and see if it works.
Also, if you're using position: absolute on one of the links and it remains unclickable, try adding a higher z-index to it [Not recommended as a permanent fix but rather to find the root of the problem].
CSS-Tricks has an excellent guide to understanding position properties.
Edit:
To clarify, add class="home-link" to the other li tags
I'm developing a very large page with lots of content and some overlays and all kinds of complicated things. I'll spare you all the code and only include the relevant pieces.
Essentially, I have some sidebar buttons that open an overlay depending on the button clicked. The HTML is below:
<div class="sideBtn sidebarOverlay" data-linkto="overlayMyInvoices">
<img src="icons/icon_invoice.svg" alt=""><h2>Invoices</h2>
</div>
<div id="overlayMyInvoices" class="overlay">
</div>
And here is some of the Javascript:
$(sideBtns).click(function(index){
var newId = "#" + (($(this).data("linkto")).toString());
var newOverlay = $(newId);
});
(I've left out a LOT of the Javascript, as I said I'm only including the relevant bits. That 'toString' might not be necessary, I'm not entirely sure I had it in there looking back, but I very much doubt that's the problem.)
BEFORE adding the jQuery tab plugin, this code works fine.
Now, INSIDE one of these overlays, I need some 'tabbed' content - so I downloaded three separate jQuery tab plugins, and ALL THREE of them produced the same error. In this particular case, the one I'm using is Tabslet. First, here's the HTML of the tab area:
<div id="overlayMyInvoices" class="overlay">
<div class='tabs'>
<ul class='horizontal'>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id='tab-1'></div>
<div id='tab-2'></div>
<div id='tab-3'></div>
</div><!-- tabs -->
</div>
And here's the Javascript:
$('.tabs').tabslet();
For some reason, every single jQuery tab plugin I use produces the same identical error (I've also used jQuery's UI core plugin, and EasyTabs). When I try to open ANY overlay using the sidebar buttons, the overlay doesn't appear, and I get THIS console error:
Uncaught TypeError: Cannot read property 'toString' of undefined
Perhaps the oddest element of this error is that it only appears ONCE. Any subsequent clicks after that first error function properly.
I just don't see how these plugins could be causing this error to appear. jQuery was able to read the custom data field before, how come it can't all of a sudden? If I don't call the plugin, it works again.
I realize this is a very long and complicated problem, but if anyone has ideas as to what this problem is and how to fix it, I'd be extremely grateful!
I discovered the problem, for anyone who still cares. I wrote some incredibly stupid Javascript that was looking for the class 'active'. Just any element with the non-specific class 'active'. The thing about 'active'? It's a great word that a lot of developers use. My code and the plugins were both using 'active', and my Javascript, since it was just looking for 'active' anywhere on the page, was effing up. So my own fault! Good.
I'm trying to debug some styling issues on a site that has tons of .js files included. One of those scripts adds some css properties to an input element on click.
Is there an easy way to find which script and which part of it alters those css properties using Chrome Developer Tools?
Chrome Version 34.0.1847.116
In the Elements panel, right-click the element in question, and in the context menu choose Break on... > Attributes Modifications. Next time its style attribute is changed, the debugger will break on the corresponding JS line.
Use the developer tools to delete the element that changes on click. Then click the element that triggers the change. Since it can't be changed it will issue an error. The error will have a link on the right to show you exactly where it broke.
This should produce the exact file and function/script.
So say this is your element <div class="bob">Apple</div> and on click, Js adds style="color:red;" by deleting .bob you will break the script.
Note: Use developer tools to delete it. That way it doesn't permanently mess with your project.
Note2: Before deleting it, try just editing it and changing its id and/or class, like "xxbob", so it will no longer be recognized by the code.
We have a complex RIA. A particular element has a rougue "display:none" attached to it, there is no matching CSS file when viewed in the browser inspector - so assuming a JS file somewhere is applying it dynamically. Is it possible to find out which script added it?
Thanks.
Use Firefox and Firebug.
Find the element in the Firebug DOM inspector.
Right click on it
Pick "Break on attribute change"
or
Use Chrome
Find the element in the Chrome Developer tools DOM inspector
Right click on it
Pick Break On… ➡ Attributes Modifications
That will act as if you have a break point at any point in your JS that you have code that changes the attribute. Since element.style.display = "none" gets mapped onto the style attribute, it will trigger for this.