re-center div when content change - javascript

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>

Related

Position absolute turned into position fixed on scroll

In the snippet below, you will see that I have two sections. One green and one blue. Then in the green section, there is a circle icon. Essentially what I am looking for is for the circle icon to be placed where it is currently on page load, but then as the user scrolls, for the icon to change to a fixed position until the blue section is at the top of the screen. Then when the user scrolls back up for the circle icon to do a reverse action and stay fixed until it gets back into its original position.
How can I do this?
#slantWrap {
height: 80vh;
width: 100%;
position: relative;
background: green;
}
#redIcon {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2;
margin: 0;
}
#redIcon img {
height: 90px;
width: auto;
}
#sec {
width: 100%;
height: 400px;
background: blue;
}
<div id="slantWrap">
<div id="redIcon">
<img src="http://www.iconhot.com/icon/png/devine/256/circle.png" alt="icon">
</div>
</div>
<section id="sec"></section>
$(window).scroll(function (e) {
if($(this).scrollTop() >= $('#sec').offset().top - 90){
$('#redIcon').addClass('fixed');
} else {
$('#redIcon').removeClass('fixed');
}
});
So this function fires every time a user scrolls. What the if statement is looking for is, if the second div (Blue background) is 90px from the top of the window, (note that this - 90 is the same height as the image) the add class of fixed if the the #sec div is NOT 90px from the top of the screen then remove the class of fixed. Lastly you will need to add this to your CSS to have a position fixed with the class is added.
#redIcon.fixed{
position:fixed;
top:0px;
}
Working CodePen: https://codepen.io/ben456789/pen/OZPEpG
Hope this helps!

Surround a responsive image with divs

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;
}

Javascript sliding a div left and right - but with a little 'ear'

I would like to be able to slide a div left and right... i have read the other posts and have it working using a button click.
BUT
I would like to have a little floating 'ear' (small rounded icon that acts like a button) that will stick to the upper right corner of the div. This 'ear' would act as the button for sliding left and right in the form.
My question is.... How do I make this little ear stick to the upper right corner of the div, but have it hang over and outside of the div.
Another way of saying it is, i would like to have a floating div that will stick to the upper right corner of a div, regardless of where the other div is located.
I was thinking of having another div that contained the graphic, and force the location of the 'ear' to be the upper right corner of the div that the 'ear' is supposed to attach to.
thank you
Something like this might work:
#container {
position:relative;
overflow:visible;
}
#ear {
position:absolute;
left: 100%; /* hang over right edge */
top: 0;
}
Assuming this HTML:
<div id="container">
<div id="ear">Click me!</div>
Look at me, I'm a moving box!
</div>
I'm using an implementation like this:
<div class="tooltip">
<div class="tooltip-inner">I'm a tooltip</div>
<div class="tooltip-ear"></div>
<!--tooltip-ear last so you can float it over tooltip-inner without z-index-->
</div>
Styling:
.tooltip { position: absolute; left: 0; top: 0; width: 200px; }
.tooltip-inner { padding-right: 10px; } /* make space for the ear */
.tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
You can add a border to .tooltip-inner. and have a graphic that does the border for the ear. You can shift the ear over 1px to the left so it covers the .tooltip-inner border to make the border look fluent.
You can even go one step further and add .tooltip-orientation-top-left or .tooltip-orientation-bottom-right to change the position of the ear by just changing one class.
Your style will look like:
.tooltip.tooltip-orientation-top-left .tooltip-inner { padding-right: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-inner { padding-left: 10px; }
.tooltip.tooltip-orientation-top-left .tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-ear { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; }

How to position a div in the absolute center of a page?

Here's how I'm doing it and it does work:
#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
<div id="myDiv"></div>
But the problem is when I scroll down the page, the div no longer appears in the center because it is positioned 50% off the top relative to the original view port height, not the current one. So I guess I would have to listen for a document scroll event and update the position of the div dynamically. Any idea how to do that?
Basically the effect I'm after is for the div to always be in the center even when the user scrolls.
or maybe there's even a pure css solution?
Use position: fixed; instead of position: absolute;
The positioning (top, left etc) will remain the same, but in relation to the window, and not the document.
http://jsfiddle.net/jasongennaro/25WAg/
You're going to want position: fixed;.
To achieve the div in the center of the screen, you're going to want left: 50%; margin-left: -50px;
Note that the negative margin-left is half of the container's width
#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}
#container {
width: 90%;
height: 90%;
}
Then for your HTML :
<div id="container">
<div id="myDiv">DATA</div>
</div>
Tell me if it works.

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