Difference between revisions of "CSS Independent Content"

From GreaseSpot Wiki
Jump to navigationJump to search
(removed unnecessary unsafeWindow)
(I think the more common use case is a panel that doesn't cover center screen.)
Line 1: Line 1:
Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.
Any HTML you inject into a site is subject to the CSS rules of that site. This is often what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same to pages where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites (e.g. @include *), you may find that you want it exempt from the site CSS.


The solution is to add your code inside an iframe. This is a bit tricky. Example code:
The solution is to add your panel inside an iframe. Example code:


  // position:fixed means it scrolls along with the page. The z-index is necessary on sites
  // Position:fixed means stay fixed even the page scrolls. z-index keeps your iframe on top.
  // like Wikipedia and GreaseSpot. The border is just a border. The rest of the CSS centers
  // The remainder of the line smacks the panel into the bottom left corner, out of your way.
  // the iframe horizontally and vertically.
  // Overflow (in combination with the setTimeout) ensures the iframe fits your entire panel.
  var css = 'position:fixed; top:50%; left:50%; width:30em; height:20em; margin-left:-15em;' +  
  var css = 'position:fixed; z-index:9999; bottom:0; left:0; border:0; margin:0; padding:0; ' +
          'margin-top:-10em; border:1px solid #000; z-index:9999';
  'overflow:hidden;'
   
   
  var iframe = document.createElement('iframe');
  var iframe = document.createElement('iframe');
Line 13: Line 13:
   
   
  // The about:blank page becomes a blank(!) canvas to modify
  // The about:blank page becomes a blank(!) canvas to modify
  iframe.setAttribute('src', 'about:blank');
  iframe.src = 'about:blank');
   
   
  document.body.appendChild(iframe);
  document.body.appendChild(iframe);
   
   
  // The timeout ensures this code is not run until Firefox has created the new DOM
  // setTimeout( cb, 0 ) lets Firefox initialize the DOM before we try to use it.
  setTimeout(function() {
  setTimeout( function() {
   
   
     var doc = iframe.contentDocument;
     var doc = iframe.contentDocument;
     doc.body.style.background = 'red';
     doc.body.style.background = 'red';
     doc.body.innerHTML = 'Test.';
     doc.body.innerHTML = 'Test.';
    iframe.style.height = doc.body.offsetHeight + "px";
    iframe.style.width = doc.body.offsetWidth + "px";
   
   
  }, 0);
  }, 0 );
 
A variant on a more intrusive interface (perhaps invoked from a menu item) might be a lightbox style panel, mid-screen. Just drop the last two iframe.style lines and change the CSS to:
 
// Margin, top, left, width and height centers the iframe horizontally and vertically:
var css = 'position:fixed; z-index:9999; border:1px solid black; ' +
  'top:50%; left:50%; width:30em; margin:-15em; 0 0 -10em; height:20em;';

Revision as of 00:23, 5 June 2007

Any HTML you inject into a site is subject to the CSS rules of that site. This is often what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same to pages where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites (e.g. @include *), you may find that you want it exempt from the site CSS.

The solution is to add your panel inside an iframe. Example code:

// Position:fixed means stay fixed even the page scrolls. z-index keeps your iframe on top.
// The remainder of the line smacks the panel into the bottom left corner, out of your way.
// Overflow (in combination with the setTimeout) ensures the iframe fits your entire panel.
var css = 'position:fixed; z-index:9999; bottom:0; left:0; border:0; margin:0; padding:0; ' +
  'overflow:hidden;'

var iframe = document.createElement('iframe');
iframe.setAttribute('style', css);

// The about:blank page becomes a blank(!) canvas to modify
iframe.src = 'about:blank');

document.body.appendChild(iframe);

// setTimeout( cb, 0 ) lets Firefox initialize the DOM before we try to use it.
setTimeout( function() {

    var doc = iframe.contentDocument;
    doc.body.style.background = 'red';
    doc.body.innerHTML = 'Test.';
    iframe.style.height = doc.body.offsetHeight + "px";
    iframe.style.width = doc.body.offsetWidth + "px";

}, 0 );

A variant on a more intrusive interface (perhaps invoked from a menu item) might be a lightbox style panel, mid-screen. Just drop the last two iframe.style lines and change the CSS to:

// Margin, top, left, width and height centers the iframe horizontally and vertically:
var css = 'position:fixed; z-index:9999; border:1px solid black; ' +
  'top:50%; left:50%; width:30em; margin:-15em; 0 0 -10em; height:20em;';