I just started to work in an existent WordPress project in order to fix some issues, so I am firstly learning about this project. Now, I want to know exactly which javascript code is unexpectedly changing an element's style at the HTML code. Maybe some plugin... I need to find it out!
In a similar question someone has answeared that you can do that in Firefox by right clicking on the element in "HTML panel", than selecting the option "Break on Attribute Change". But I can't see this option, maybe it's an outdated feature...
So, how can I know which javascript is changing the element's style??
In Chrome, right-click on the element in the inspector document and select Break on > attribute modifications.
Related
I have an element that's getting styles applied via JavaScript. I'm not sure exactly where; is there a way to check Firebug to show where the "element.style" is actually coming from?
If you're sure it's being set on the inline style and not as a consequence of a stylesheet rule, you can detect changes using the non-standard Mozilla watch() method:
document.body.style.watch('color', function(name, v0, v1) {
alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';
You can put debugger; in the watcher function and look up the call stack in Firebug to see where the change was triggered.
On request from this question:
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
You can also right click on the element in the HTML panel before the style is set and select break on Attribute Change. Script panel must be enabled.
I think this is what is default tool for the job, although it has limited debugging capabilities: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, make sure Ad Blocker is not responsible.
You can open the script view and search for ".style" in the searchbox.
I recently ran into a bug where I was not able to control the style of an HTML element (without using !important) due to the fact that something in my codebase was directly adding inline styles to my DOM element.
After quite a bit of digging, I discovered it was due to a third party module I was using that had: document.body.style.overflow = 'visible';
It was frustrating that it took me as long as it did to find the source of this issue and it got me wondering. Is there any efficient way to determine the source of direct DOM manipulation like this? There wasn't something obvious in the Chrome Dev Tools.
With Chrome you can add a DOM Breakpoint to that element, just right click the element from the inspector and the last option will let you add a breakpoint whenever an attribute is changed. That way you can easily see when an element is being changed.
I'm just now getting my feet wet with jQuery (and CSS to an extent) and stumble a lot at simply targeting the right selector. Even if I directly copy and paste the CSS path from Firebug, half the time it won't work.
At the moment, I'm trying to alter the Wibiya toolbar to use my own Wordpress built-in URL shortener instead of theirs, and I figured the easiest way would be to just target it's selector and change it via jQuery.
Here's the code I'm using right now (doesn't work):
$("input#linkUrl").text("testing");
I've tried some other selectors including the full, huge copied Firebug path with no luck as well.
The URL I'm using this on (for anyone wanting to inspect it themselves) is Meanwhile In America, the toolbar is at the very bottom, the item in question is the URL shown where there is the "Copy" button.
UPDATE 10/4/2013 4:22 PM: anyone else have any suggestions? Still not working.
You probably want $("input#linkUrl").val("testing"); since your target element is an input.
You can also shorten your selector to #linkUrl if you want to.
As a side node, please don't link to 'live' sites anymore. Instead, provide a simple script or a (not) working jsFiddle.
From jQuery documentation:
The .text() method cannot be used on form inputs or scripts.
To set or get the text value of input or textarea elements, use the .val() method.
$("input#linkUrl").val("testing");
Is there a way to get information which scripts modified selected DOM element, and in which order?
On my website, I modify width of div A. It appears however, that some other script modifies that width after that, but I do not know which script it is. How can I find it?
Edit:
After searching a bit more, I fount that in firebug you can right click attribute in HTML view, and select "stop javascript on change" (or sth similar, my firefox is not in english), the problem being it resets after reloading the page, what makes it useles for me.
I am using chrome developer tools to debug my page. It supports add breakpoints to dom elements, when attributes of dom is modified by javascript, it breaks the rendering process immediately. I think you can try it.
I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.