Surround a responsive image with divs - javascript

I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.

I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}

Related

Push an element outside the screen when changing window width

I have square div absolutely positioned on the left side of the screen. How can I constantly push it to the left after reaching some viewport width? The only idea I have is to add resize event listener through javascript and calculate left property of the element to be negative.
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.element {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
background-color: lightblue;
}
<div class="container">
<div class="element"></div>
</div>
I'm not sure I understood your question. If you just want an element to stick to the left then your code is perfectly fine.
If your goal is to make is to make it stick only with a certain screen width, then I'd suggest you to look at css media
As last, if you want this element to eventually "sink" in the left border, hence outside of the window, I'd suggest you to use a combination of css media and the css calc function.
Hope this is of any help!

Allow float element to overflow horizontally

I have the following structure:
<div id="hold">
<div id="hold-left">content</div>
<div id="hold-right">content</div>
</div>
hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.
This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.
How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?
Have you considered using a left margin on .hold-right?
.hold-left{
float:left;
width:40%;
}
.hold-right{
margin-left:45%;
}
Also, generally you should use classes, not IDs.
You can try with display: table, and table-cell.
The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.
Otherwise, you will need to use javascript to update both cells.
Use position property in css. Checkout this
position: relative; in the parent.
position: absolute; in the each child.
#hold {
position: relative;
}
#hold-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#hold-right {
position: absolute;
right: 0;
width: 100px;
height: 200px;
background: yellow;
}
#zoomLevelSelector {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

re-center div when content change

I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Display image at 100% width or as big as fits in browser

How would I display an image so that its width is the original image width or 100% of the browser width, whichever is smaller (I want to show as much of the image as possible without horizontal scrolling).
Is this possible with CSS, or do I need to play around with javascript?
Try this: jsFiddle.net Demo
html:
<img src="http://gypsypixiepirate.com/wp-content/uploads/2013/03/Rumpus-party.jpg" class="className" />
css:
.className {
max-width: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
overflow: auto;
position: fixed;
}

Centered div with a transparent background with jQuery

How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.

Categories