0

I'm working on a chrome extension that needs to insert a position fixed iframe into the top of some webpages. I have no control over the pages that will be modified. At the moment I can insert the iframe but it covers up some of the page, but I want to be able to reserve space for it. Problem is when I add a margin or padding to the body of the page, the other fixed elements on the page don't tally up with where they're meant to be.

How can I inject an element with javascript that I can be 100% sure that it will show at the top of the page and not hide anything under it, or mess up the positions anywhere else?

  • How about replacing the page by a frameset? – user123444555621 Dec 28 '12 at 18:08
  • Thanks for the reply, but some websites don't take too kindly to being in frames. –  Dec 28 '12 at 18:11
  • And as I don't have control over what sites this may appear on, it could be a problem –  Dec 28 '12 at 18:11
  • 1
    How about apply to body -webkit-transform: translateY(*your_block_height*px), then add your iframe to body as first child and apply -webkit-transform: translate(-*your_block_height*px) – anton_byrna Dec 28 '12 at 18:26
  • Thanks anton_byrna, that worked and was the most simple method; I wasn't aware of that css property. Do you want to add an answer and I'll accept it? –  Dec 28 '12 at 19:07

2 Answers2

0

Cycle through the fixed elements and increase the "top" attribute by an amount equal to the height of the inserted element.

var myTop;

$('body div').each(function(){
   if($(this).css('position')=='fixed'){
      myTop = $(this).css('top');
      $(this).css('top',mytop + 100);
   };
});

I'm pretty sure you'll have to do some research and tweaking to get this working 100% though. For instance, the 'body div' selector will only move fixed divs down by 100 pixels. You can look here for more information:

Although just to warn you this could be a slow process on some pages. Someone else may have a better method.

Community
  • 1
  • 1
Ross Brasseaux
  • 3,879
  • 1
  • 28
  • 48
  • Thanks, but I've decided to go with anton_byrna's css approach as it's probably faster in the browser. –  Dec 28 '12 at 19:08
0

How about apply to body -webkit-transform: translateY(*your_block_height*px), then add your iframe to body as first child and apply -webkit-transform: translate(-*your_block_height*px)

anton_byrna
  • 2,477
  • 1
  • 18
  • 31
  • That's what I did, thanks. Future readers please note that there's a bug in chromium where -webkit-transform stops fixed positions being 'fixed', but I'm going to use firefox instead. –  Dec 29 '12 at 13:10