Menu
I would like my chrome extension to be able to inject a 300px sidebar on the right side of any page when it is activated. I am looking for the best way to constrain the entire page to document.body.clientWidth - 300, thereby leaving the 300px on the right for my sidebar. The sidebar I currently inject is appended to document.body and has a style like so:
width:300px
position: fixed
top: 0px
right: 0px
height:500px
I need a way to prevent the existing page elements from bleeding over into my sidebar. I was hoping that there would be a way to trick the existing elements into thinking that they were rendering into a browser client 300px narrower than their actual window thereby leaving space for my sidebar but I haven't found any easy way to do so...
366
I believe this is easier. First add padding to the body to make space for the sidebar. Then, create a div containing your sidebar. Position the div relative to the right and top of the page using CSS with fixed-positioning. Also set the height and width of the sidebar div.
Code (uses JQuery):
var sidebar;
$('body').css({
'padding-right': '350px'
});
sidebar = $("<div id='sidebar'></div>");
sidebar.css({
'position': 'fixed',
'right': '0px',
'top': '0px',
'z-index': 9999,
'width': '290px',
'height': '100%',
'background-color': 'blue' // Confirm it shows up
});
$('body').append(sidebar);
For anyone googling, overhauled this to reflect what I'm actually using in an app, use jQuery, have more safeguards, and be more respectful of current page css.
//height of top bar, or width in your case
var height = '30px';
//resolve html tag, which is more dominant than <body>
var html;
if (document.documentElement) {
html = $(document.documentElement); //just drop $ wrapper if no jQuery
} else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
html = $(document.getElementsByTagName('html')[0]);
} else if ($('html').length > -1) {//drop this branch if no jQuery
html = $('html');
} else {
alert('no html tag retrieved...!');
throw 'no html tag retrieved son.';
}
//position
if (html.css('position') === 'static') { //or //or getComputedStyle(html).position
html.css('position', 'relative');//or use .style or setAttribute
}
//top (or right, left, or bottom) offset
var currentTop = html.css('top');//or getComputedStyle(html).top
if (currentTop === 'auto') {
currentTop = 0;
} else {
currentTop = parseFloat($('html').css('top')); //parseFloat removes any 'px' and returns a number type
}
html.css(
'top', //make sure we're -adding- to any existing values
currentTop + parseFloat(height) + 'px'
);
You're almost done. You've styled the page html. You might have noticed css from the page affects your stuff to. You can resolve this by containing it within an iframe:
var iframeId = 'someSidebar';
if (document.getElementById(iframeId)) {
alert('id:' + iframeId + 'taken please dont use this id!');
throw 'id:' + iframeId + 'taken please dont use this id!';
}
html.append(
'<iframe id="'+iframeId+'" scrolling="no" frameborder="0" allowtransparency="false" '+
'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;'+
'height: '+height+';right: 0px;left: 0px;">'+
'</iframe>'
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
'<style type="text/css">\
html, body { \
height: '+height+'; \
width: 100%; \
z-index: 2147483647;\
} \
</style> \
<p>UNSTYLED HTML!</p>';
Yes, you have to append the iframe before setting the innerHTML
You should be able to copy/paste and edit this and be one your way!
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
