Reputation: 2043
I'm not sure how or if this is something that can be done. I have a page that is being created via a CMS. There are alot of files i.e.: includes
, .LESS
and .js
files. Depending on the template chosen, the css rule sets the aside#socialicons
element to "display:none". However, this rule is being overwritten by an inline css style of "display:block"
set on the same element on the fly.
I have looked through several files (.css, .less
and .js
) to try and find how this property is being added on the fly so that I could change it.
In the global.js, a variable is declared and defined as follows:
g = g || {};
g = {
selectors: {
socialbox: "aside#socialicons",
....
}
Line by line, I went manually looking through all the .js
files to find the g.selector.socialbox
variable. I was hoping to find the function that is manipulating it. I have not found it yet. I also looked through all the css/less files for the selector aside#socialicons
and could only find the css rule setting it to display:none;visibility:hidden;
.
Tell me folks, if a function is indeed modifying this element, is there a way in the Developer Tools Console of Chrome or Firebug where I can find what function is being called to add the display:block
to the aside#socialicons/g.selector.socialbox
element? Can assertions work? If any of these methods can work, would you please let me know how it is done?
Thanks very much.
UPDATE:
All js files have been compressed and compiled into one .js file for better performance. The page is using about 10 javascripts and 10 javascript library files. I can view source to see the files being loaded, but because the element has been defined in different files using different names, for example g.selectors.socialbox
, or g.socialbox
, it's getting confusing trying to follow what variable is the aside#socialicons
element. In firebug, I can search for the element and/or the variable in all files, but if the variable has been renamed, I'm getting very lost. All help is welcome. I did not write this code.
Thanks very much.
Upvotes: 4
Views: 3522
Reputation: 782508
In the Elements
tab of Developer Tools, right-click on the element and select Break on Attribute Modification
. Then wait for the breakpoint to hit, and you can check the stack trace to see where it's being modified from.
Upvotes: 7
Reputation: 3643
Probably the easiest way is to open up Chrome, and from the debug console type: getEventListeners(object)
. It will show you all of the event listeners attached to that object and what the functions are.
Reference: https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject
Good Luck
Upvotes: 3
Reputation: 91
If you can't find g.selector.socialbox
, try looking for instances of g.selector. It may be because they are looping over every attribute of g.selector
, rather than calling g.selector.socialbox
directly.
Try setting some breakpoints at various points in global.js. As you step through them it will give you a better idea of where the function call is happening. They can be set via the Script tab in Firefox, or the Sources tab in Chrome.
Upvotes: 2
Reputation: 5226
Chris, likely not the best answer, but it hard to answer not knowing the CMS in question.
You could overide in JS, but CSS would be simpler
#divwithinlinestyle { display:block !important; }
Upvotes: 1