How do I identify source of element.style injected by js? - javascript

I am updating a wordpress website for a client so am unfamiliar with the structure of the whole site.
On the blog page (http://shoreditchradio.co.uk/blog/) , posts are displayed in a wrapper #blogleft, which is defined in the css file as follows:
#blogleft {
float: left;
width: 580px;
}
however via the inspector I can see that the width is being over-ridden to be 100%
element.style {
width: 100%;
}
My question is - what is the easiest way to determine where this is being injected from? As far as I know it can only be from a javascript file somewhere in the site.
I have been poking around in the inspector for some time now. Is there a simple way to identify the source of an injected inline style like this? Any help much appreciated!

That width:100%; is hard coded on the HTML, you can see this by checking the style attribute on the div tag in the HTML.
The easiest way for CSS and HTML debugging is by using the developer tools/web inspector tools (integrated in firefox and chrome or by plugin such as Firebug). The element.style CSS selector means it is hard coded on the selected element.
"hard coded", in this case, means it is directly injected through the HTML. Through the developer tools/web inspector tools you should be able to determine the origin of the CSS in question.

If you want to troubleshoot "injected stylesheet" in Chrome
Open develop console -> Network
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page

Related

Website not displaying correctly in Safari and Chrome

I'm a complete newbie here. I have been trying to learn to code a site with HTML/CSS/JAVASCRIPT.
I am using brackets to code the site. The site I am practicing with renders properly with all css and javascript.
However when I open the .html file into safari or firefox it does not display correctly. I think it is probably a css issue as the html elements are all there.
I have other sites that I have made before that don't have this issue and I can not see where I have gone wrong.
jsfiddle.net/fs4g55m2/1 I'm using fullpage.js as well. If you notice the navbar works perfectly well. It seems to be the css after it that is corrupted (once you get to the body tag).
If you think it is CSS (and you are linking to external CSS file) try look into the network tabs in your browser's developer console to see if it is properly linked. Check to see if requested css file throw back 404 status (not found) - usually highlighted in red.
In chrome or Firefox (not sure in safari) right click on your web page and click inspect element - then choose network tab.
Hope that helps

can i load local CSS file when loading a specific webpage from the internet?

my question is pretty much direct.
i just want to customize the css of a site that im accessing from my local PC(currently using firebug to change it temporarily).
i want to load an extra css file for that website(only on my PC).
i been wondering about this for long, do you have any idea how can this be achieved?
for example if the site has a code:
body{
background:blue;
}
i want it to use:
body{
background:red !important;
}
every-time i load that website.
If you have Google Chrome or Mozilla Firefox, then you can use Stylish. It's an extension for both. It may be under the name 'UserStyles' as well. It's relatively simple to use; you just need to install it and add in your personal styles.
Chrome Version
Firefox Version
Use an extensions like stylish or userscript/greasemonkey
You should be able to accomplish something like this with a browser extension. Search for 'browser extension' along with the browser you want to implement it for.

Printing pages on different Browsers

I'm encountering a lot of problems with printing on a rather huge website we are working on.
The problem is there are issues in FF, IE etc... that appear only when printing.
The workflow is like this: I click a print button on the page, a popup opens with different template and styles and the window.print command is triggered.
MY POSSIBLE SOLUTION:
When the popup opens, I will render the entire DOM in a canvas element and then put it back in page as a png file, and then trigger the print action.
Is this a feasible solution?
You can approach this in two ways:
Browser extension
Writing an extension for the browser(s) (at least Chrome and FireFox) will allow you to grab the current content as a bitmap you can use with canvas.
This is probably the fastest option as the screen snapshot is created internally. Though, I am not sure if the browser snapshots client window or the full document so this need to be determined.
Simulate the DOM tree
There are libraries such as html2canvas and canvas2image that simulates the DOM tree and tries to render an approximate representation of the web page.
There a couple of things to notice with this:
It's relatively slow
You may run into cross-origin restrictions in relation to images (work around is to use an image proxy)
You cannot get content of "foreign objects" (Flash, Java etc.)
It is not 100% accurate (if this matters)
When you have a snapshot one way or the other the other things should be straight forward. Just remember that users have different printers, drivers and resolutions and you may not be able to produce identical results cross-over as you are also dependent on the browser's own print implementation.
provide special css for print view:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
in which for everything you dont want to print use something like:
#qqq, .#aaa, #header, ...., ...., .banner{
display: none;
height: 0;
width: 0;
}
so you leave only content you want to see printed. In this case visitor or you dont need to use special print popup version. Just click print.
example: http://viliusle.github.io/miniPaint/ - only canvas will be printed.

IE8 not recalculating size of div on insertion of content

So, now in this page (it's a dev page), http://www.antarctic-design.co.uk/oboe when the content is loaded (dynamically from JSON source), IE doesn't recalculate the size. Do you know how to force it to do so?
with
.information_block { height: auto; }
you should solve (or at least it works injecting that style using development tools [F12])

Trouble between an injected iframe and other web page (Google, Gmail, Pdf)

Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;

Categories