Develop Reference

Add sidebar to the right of webpage that resizes and shifts everything accordingly

I'm creating an Chrome Extension, which should add sidebar to all webpages.
This sidebar shouldn't overlap webpage content, it should be placed next to the existing content, essentially shrinking width of body of webpage to initial width - sidebar width.
This is the code I came up with, but I have a problem with some pages like stackoverflow for instance, see how top bar doesn't shrink like the rest of the page does (screenshots attached below the code)
// create sidebar
const sidebar = document.createElement("iframe");
sidebar.src = chrome.extension.getURL("iframe/iframe.html");
sidebar.id = "extensionSidebar";
sidebar.frameBorder = "0";
sidebar.style.height = "100%";
sidebar.style.width = "100px";
sidebar.style.position = "fixed";
sidebar.style.top = "0";
sidebar.style.right = "0";
sidebar.style.zIndex = "2147483646";
// append sidebar to body
document.documentElement.appendChild(sidebar);
// shrink body
document.body.style.width = window.innerWidth - 100 + "px";
Screenshots:
https://prnt.sc/o215x5
https://prnt.sc/o21637

The top bar doesn't shrink as you would like it to do because it is fixed, it will always take 100% of the viewport width. Its CSS properties on your example with stackoverflow are :
...
position: fixed;
top: 0;
left: 0;
width: 100%; /*though it's not "really" 100vw*/
...
Even by changing the html element in CSS, in order to change its maximum size to 80% of the viewport width for instance, the navbar would still take all the viewport's width.
To understand it you can try the following fiddle, it might speak for istelf : https://jsfiddle.net/bcg2vkjm/4/
On it you can "un-comment" the body element inside the CSS and see the result, it might give you some help ! Though it only applies a scale of 1 (so it should not change...), for some reason it makes the fixed element adapt to the body size, which is what you want, you just might have to play along with the translateX and/or scale in the CSS, but it might be a risky solution because it changes quite a lot the way everything is displayed, not only the fixed element, as you can see.
In your javascript you can try the following :
document.querySelector('body').style.transform = "scaleX(something)";
for instance !

Squarespace Lightbox Image Centering

How Squarespace centered every image even though they have different dimensions varying between landscape and portrait images?
I've been trying different solutions all day and I can't seem to figure it out.
http://bryant-demo.squarespace.com
Take a look at their lightbox and the code for it. I tried emulating it, but I can't seem to replicate their results.

Don't know what they do, as i can see they get image dimensions and many other things as attributes... but here is simple method for centering, related to screen size, that's basic calculation which is applied in their case, too, i guess. Also, there are different css methods for centering...
screen_width=$(window).width();
screen_height=$(window).height();
img_width= $('#images img').eq(i).width();
img_height= $('#images img').eq(i).height();
//set to center
$('#images img').eq(i).css('margin-top',(screen_height-img_height)/2+'px');
$('#images img').eq(i).css('margin-left',(screen_width-img_width)/2+'px');
Demo: http://jsfiddle.net/dfwosy4m/
P.S. If you set images in some other container, not body, you just have to apply same calculation, for different element.
EDIT:
Actually, same method works, of course, no matter if container is bigger, or smaller than image... So, simple:image center = container center, and overflow:hidden for the rest.
function centralize() {
screen_width = $('.box').width();
screen_height = $('.box').height();
$('#images img').each(function(i) {
img_width = $(this).width();
img_height = $(this).height();
//set to center
$(this).css('margin-top', (screen_height - img_height) / 2 + 'px');
$(this).css('margin-left', (screen_width - img_width) / 2 + 'px');
});
}
centralize();
NEW DEMO:
http://jsfiddle.net/dfwosy4m/3/
P.S. Inspect elements on their page, and in my demo: you will see that same technique is used (hidden image parts will be shown by inspector)... Key is overflow:hidden for the fixed boxes, so... you should apply similar css to get desired effect.

How to center image with full height and variable width

I'm trying to show an image (of arbitrary width/height) in full screen when the screen (also of arbitrary width/height). I'm using HTML/CSS/JS. I want the image to always take up the full screen. If the image is a lower aspect ratio than the screen then I should clip the top and bottom. If the image is a higher aspect ratio than the screen then I should clip the left and right. I never want to see black around the edges.
I can do it using background-image (and background-position, etc.) but I'm having an issue with that (the image flashes as I update it). So I'd like to use an tag. Does anyone know how I'd do that?

I think the question is nice and clear and obviously the OP doesn't have any code... that's why he's asking the question.
I've run into that exact issue before. I don't think there's a way to do it using HTML/CSS if you want the image to end up larger than the containing element with the excess clipped unless you can put the image in the background. If you need to use the tag as you state, then a good solution is to do this imperatively. Here's what I did.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Let me explain...
The outerWidth/outerHeight results in the aspect ratio of the window. The img.naturalWidth/img.naturalHeight is the aspect ratio of the image. If the first is greater then we need to set the width of the image to the width of the window and calculate the top value to center the image vertically. If the second is greater then we need to set the height of the image and then use the left to center the image horizontally.
Hope that helps! You can find a bunch of Windows 8 HTML/JS related help in my codeSHOW project at codeshow.codeplex.com and in the Windows Store at aka.ms/codeshowapp.

If you are using jQuery, have a look at these:
http://vegas.jaysalvat.com/
or more lightweight:
http://srobbin.com/jquery-plugins/backstretch/

if you want it to stretch use background-size, or if it has to be a tag, use max-width:100%; in order to center use display:block; and margin:0 auto;
Im not quite sure what youre after though...
How do you update the image so it flashes? When does it occure? It sounds like a job for background-position:center.

Sticky Footer + 100% Height + Margin Between Them

My overall goal is make a margin between content with 100% height and a sticky footer; one that shows the body background through it.
As of now, I'm using jQuery to figure out the height of the document and subtract the height of the footer plus a margin, then apply that new size to a DIV with the ID of "content".
I then use jQuery's resize() function to also size the div if the size of the viewport changes so if a user resizes his or her browser window, or zooms in, the size of the DIV will update automatically.
Unfortunately, when I switch directions in zooming (i.e. zoom out after zooming in, and vice versa), the Javascript doesn't recognize the viewport resizing, leaving me with a too-long or too-short background on the content. In addition, this resizing does not recognize content. I'm considering setting a min-height in the CSS, but if there's a way to do it in Javascript, I'm all ears.
I will accept pure CSS-and-HTML solutions, as it seems like it should be possible, but I have exhausted myself looking for for an answer.
My current Javascript (running jQuery library 1.7.2):
$(document).ready(function(){
var height1 = $(document).height(); // height of full document
var height2 = 100; // height of footer plus margin
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
$(window).resize(function () {
var height1 = $(document).height(); // height of full document
var height2 = $("#footer").height(); // height of footer
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
Any direction is greatly appreciated.
EDIT
Got it, all without Javascript. http://jsfiddle.net/Rpdr9/610/

I made something on fiddle.
Looks to me like that is what you want.
Check it out: http://jsfiddle.net/XbXDn/
Orange color: content
grey color : footer
The important thing is to also give your body and html the height:100%; property.
As you will see, the content div auto grows (even over 100%) as you add more text,
though the 25em margin between content and footer is always kept.
I deliberately took a huge margin between content and footer, just so you can see it works :)

Raphael canvas filling a container div

Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those values. But then the content gets very jumpy and hectic as I resize the window or container because the scrollbars (which I want if it gets too small) flash in and out of existence.
Is this the proper way to bind Raphael's canvas to the full size of a container? I'd also like to provide the option to make the Raphael canvas "full screen" taking up the entire browser window.

If you are using a div then you could use CSS to set that to 100% of the width and height. You then use the Raphael("container", "100%", "100%")
As for making it full screen, most browsers have a command to do this. So if you really are doing 100% then when you press the command button e.g. (F11 in firefox) it will become FULL screen.

Raphael("container", "100%", "100%"); will fill the canvas to width/height of the DIV container. This works fine in Chrome and Safari. To get Firefox on board you'll need to give body and html 100% width/height in the css, otherwise the vector will be clipped.

A little bit late on this one but I'll post here for other people searching.
var h = $('container').height(); //get the container height into variable h
var w = $('container').width(); //get the container width into variable w
//set your Raphael canvas to the variables
var contpaper = Raphael("container", w, h);
var doit;
//function to reload the page and/or do other adjustments
function resizedw(){
document.location.reload()
}
//call function 200 ms after resize is complete.
$(window).resize(function(){clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
}, 200)});
This solution is cross browser and mobile safe so you can use this to incorporate responsive design. By adding caveats for viewport width or height to your javascript in the form of if statements, you can define all of your shapes based on the same variables.