I am using a JS library that creates dialogs, but it's core code is very big and complex. The dialogs created have a CSS attribute z-index: 2, whereas I want them to use a larger number. The issue is that this CSS is set directly on the dialog's DIV wrapper during the JS library's runtime (so I can't overwrite them with an external CSS file due to rule preceedence).
I was wondering if there is a way in Chrome Developer Tools or in Firebug to setup a breakpoint for whenever a given, dynamically created element's z-index property is changed, given that I know what id="" and class="" it will be assigned? Basically, the breakpoint should be right before that z-index is set, so I can know where the number 2 comes from in the above example.
In the Firebug HTML tab, right-click on an element and select "Break on attribute change"
Related
I have a JavaScript dashboard framework that loads HTML widgets as objects (document.createElement) which once loaded execute startup JavaScript logic in the HTML widget. Previous version of this dashboard was only used in IE 10/11 and I could hide the object using the CSS display: hidden property until the object was fully loaded and completed its startup code which typically adjusted the way the widget looked on the screen (eg. change background color based on the setting saved for the widget). Once complete I could change the CSS display setting to inline to show the widget.
Now I'm trying to get this to work in Chrome and the new MS Edge browser, and it seems I was previously relying on an IE quirk as both Edge and Chrome won't allow manipulation of the object if its CSS display properties is 'none' when it is first loaded. If the object is visible when loaded this means the end user sees each widget load in a transitory state and 'morph' to its final state while it's startup JavaScript is run, which isn't pretty.
What I'd like to do is have the object hidden until it's startup is complete. I have tried a combination of relevant CSS properties like setting height to 0, display: none and visibility: hidden, as well as adjusting z-index so the object sits behind a splash screen (appendChild seems to override z-index settings).
I could have the object manage its display by itself but I'd much rather the dashboard framework handle it instead.
Any ideas how I can hide a dynamically loaded HTML object until I'm ready to show it (once all objects are loaded)? I can use jQuery in the dashboard but not in the object itself (too heavy), although if there is a jQuery answer it can be done in native JavaScript also (my preference). And note the solution only supports modern HTML5 browsers.
(If the above isn't clear I'll setup a fiddle). Thanks!
This can be very well managed using absolute positioning.
CSS:
.hiddenWidget {
position: absolute;
top: -10000px;
left: -10000px;
}
You'd assign this class to the new widget and remove it once it's updated via JS.
for some reason when using mediaelement.js, it creates a div for the progress bar called "mejs-time-rail", but then proceeds to set the html width value to "0" through an inline style.
Since this div is created when the script runs, I cannot edit this property in the source code, but if I edit it (the inline style) in Firefox's inspector, I get the desired result. Also, it seems that this html property created by mediaelement.js overrides any css rules I set.
Any ideas how to circumvent this issue? Maybe editing the actual js script?
Thanks
I can't post a picture because I don't have enough reputation, but I can update this post with a screenshot when I do have enough and/or if it helps
First, it seems the issue is that as the DOM loads, the external script is setting that desired value to 0 like you said. Try adding a custom JavaScript/jQuery file that simply runs after the DOM is completed and
.find the element you want to edit. Then try
.attr('desiredAttr', 'new val');
this should find, and then reset the attribute to whatever you like. Even if the external script changed it on load.
I'm wondering of there is any way to find out where an inline CSS style came from. As you can see in the picture below, I have an element with an inline style that was generated using JavaScript. Sometimes my code seems to break and put the width to 0px, rendering the div invisible.
I've looked through all the JS files, but can't seem to find the error.
Is there a way to find the right file and line, just like dev tools does for css files?
Since you are using Chrome:
Right click on the element in the page and Inspect Element
Right click on the DOM inspector view of the element and Break on… → Attributes Modifications
When the inline style of the element is modified with JS, the debugger will trigger as if it had hit a breakpoint.
This will show you the relevant line of JS and give you a stack so you can figure out where that line was called from.
You can use chrome debugger/ firefox to inspect the element's style and its hierarchy.
Also if you don't want a style assigned by you to be overridden, you can use !important:
#element{
css-property:value !important;
}
I have a simple <a> tag that is getting hidden from some JS. (display:none)
I have looked into the page source and I can see it is not hidden, however the inspector shows it as display:none ( inline style )
No result finding out the class/id in JS code in order to isolate the part of the code that is hiding the <a>.
Is there a tool or fixed procedure that can help me to debug this?
Chrome lets you break code when an attribute on an element is changed.
Open the developer tools using F12, and select the "Elements" tab. Find the element that gets hidden. Right click on it, "Break on", "Attributes Modification".
Refresh the page, keeping Developer Tools open.
If the element is being hidden using JavaScript, you'll break at that point.
Otherwise, it's done via CSS. If this is the case, using the "Elements" tab again, select the element you're interested in and look at the "Styles" applied to it in the right hand column. Chrome will show which styles are applied by which definition in which stylesheet. It should then be trivial to find the one hiding the element.
First of all, look if it is hidden from inline style or by a css class.
Then, if is by a css class, search in all your project for that class (you should find a javascript function that adds this class to the element).
If is hidden by inline style property, look inside your project for any .style.display = property.
If you are using jquery try like this:
// Search by class
.addClass(".hiddenClass
// Search by css
.hide(), or $(".elementSelector").hide()
Firstly make sure that it is indeed javascript that hides your element, as it could easily be css. The easiest first step is to check the element and see if by any chance its default css is hiding it.
Second. Is your js code in one file or do you import multiple js files in your page?
If you have multiple js files you could try.
Import 1 file
then use javascript to Show your element
then import the rest of the files.
If the code that hides your element is located in the first file then your element will be visible (because you made it visible after hiding it first)
if the element is not visible it means that the hiding takes place in a subsequent file.
Move your javascript code showing the element after the second import and so on...
Last but not least make sure your code does not import external css files as well.
I recommend using Chrome Dev Tools for any javascript debugging you do.
I need to know how to use JavaScript to find out from which file a particular CSS class is getting applied to a HTML element.
I am developing a web application where user can change the CSS property of particular element, just like we can change it in Firebug.
Edit: I need the JavaScript code of Firebug which shows CSS in right pane in HTML tab with link to files which has that class.
The window.getComputedStyle method returns a CSSStyleDeclaration. Look at the parentRule property of that to get to the cssRule, that has a parentStyleSheet property which should give you the information you need.
The Firebug Lite code might be a less confusing place to look than the full extension to get an idea of how it's all supposed to fit together.