We Keep Coding

Change the new facebook page plugin width

The new facebook page plugin has the minimum width at 280px (inserted by a data-width:280px).
However when I inspect the element created by the script with firebug i see an element with id="u_0_0" with the width at 280 but i can modify it from console to be as i need (227px).
I've tried to modify it with a little script made with jquery (i can only work with jquery 1.2...an old version of it...) but it doesent seams to work since the element is inserted dinamicaly into the DOM.
I also tried an method finded by google but also it doesn't work:
jQuery(document).ready(function(){
jQuery('#u_0_0').live('DOMNodeInserted', function(){
alert(jQuery('#u_0_0').html());
});
});
The above method doesn't work and if i dont use live it alerts me with undefined...
So, how can i get the element so i can modify it's css ? Maybe jquery 1.2.1 is too old but maybe i can get and modify it with clasic javascript...

The plugin renders in an iframe which is a separate DOM from yours.
Because of that reason, its not possible to run scripts on the plugin from your website
In your script:
jQuery('#u_0_0') is not able to find the div, since that doesn't exist on your DOM.

I think you can't use javascript or css on an object inside a iframe.
If you look upside on code you will see the iframe.
You can do that only if the location of the iframe target is cross-domain but i'm not sure.

tinyMCE head styles

If look the example of tinyMCE on official website with Firefox you can see the blinking of editor. Only in firefox.
I think it is bacause css files of editor are external and I want to put all css rules in the html file of iframe.
Please help me to find place where I can add inline styles!

I think you need to set the content css, see here for details:
http://www.tinymce.com/wiki.php/Configuration:content_css
eg:
content_css : "css/custom_content.css"

How can I programmatically tell, in JavaScript, from which file a particular CSS class is getting applied to an HTML element?

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.

Fancybox won't load inline content

To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.

Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.

I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});

Inserting CSS with a Firefox Extension

I'm building a Firefox extension that adds HTML elements to certain pages of a website. I want to have it insert a custom CSS file to style those elements. It works if I insert tags with the CSS right on the page, but that's a less than ideal solution.
Is there anyway to get it to load and parse a CSS file, as if I used the tag in the header, or am I stuck inlining it somehow?

chrome:// won't work because the page you are inserting into isn't allowed to access files outside of it's domain (including chrome URIs). This is true even you are the one inserting the link, because the link is still executed in the context of the target page. Instead you have two options:
You can define a resource protocol alias in your manifest and then use a resource URI to access the CSS. For example, the following chrome.manifest will allow you to insert the css as resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
See MDN Chrome registration for more info. Also see How can a Firefox extension inject a local css file into a webpage? for a similar question.
Or, you can add the CSS as a USER_SHEET using the following. This will make your CSS available across all pages, so be sure you use very unique selectors. One caveat with this approach is that the page CSS has precedence over user sheets. You can use !important to override that, but the page CSS can still trump you if it uses !important as well.
var sss = Components.classes["#mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var uri = ios.newURI(url, null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);