We Keep Coding

Move relative object position when scrollbar appears using CSS

On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?

You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>

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>

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

Make top image stay in position when main image resizes

I have a main image and little callout buttons on top of the main image. I'm trying to get the callout buttons to stay in position when the screen size changes while the main image size resizes with max-width and background-size: contain, but right now, the callout button's position changes.
Here is the CSS:
.main_image
{
background: red;
height: 400px;
background-size: contain;
position: relative;
max-width: 100%;
}
.callouts
{
background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
height: 70px;
width: 40px;
height: 30px;
position: absolute;
top: 70px;
right: 180px;
}
Here is the HTML:
<div>
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>
Here is the link to the fiddle: http://jsfiddle.net/Nem2C/
As you resize the image, the callout button changes position, but I need it to stay where it's at when the image resizes.
is there a jquery solution or a javascript solution to this as well?

I tried to fix this. I didn’t finish, but I got closer to the solution.
See this jsFiddle. I put div.callouts inside the div with the image and positioned it relative to that with percentage values.
<div class="image_wrapper">
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
<div class="callouts"></div>
</div>
.image_wrapper {
position: relative;
}
.callouts{
top: 15.5%;
right: 24.1%;
}
To calculate the correct percentage value from, for example, the top, use the formula (image_height_in_pixels / pixels_from_the_top) * 100.
The problem with what I have now is that the callout x-position doesn’t scale with the width properly for some reason.

keep html contents at same position and size ratio in full screen mode

I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.
So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280x800, center of rectangle be at (640,400)
If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don't end up with extra space at the bottom. Appreciate your help

Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.
If you want to center a div horizontally and vertically, use something like this
HTML
<div id="rectangle"></div>
CSS
#rectangle {
width: 30%; //can set any value here
height: 20%; //can set any value here
position: absolute;
left: 50%;
top: 50%;
margin-left: -15%; //negative half of width
margin-top: -10%; //negative half of height
background-color: red;
}​
See the fiddle here.
OR
HTML
<div id="wrapper">
<div id="container">
<div id="rectangle"></div>
</div>
</div>​
CSS
body, html {
height: 100%;
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
}
#wrapper[id] {
display: table;
position: static;
}
#container[id] {
display: table-cell;
vertical-align: middle;
width: 100%;
}
#rectangle {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
​
See the fiddle here.

Have you tried also using percentages for the margins, for example if you centre square was 60% tall and wide you could add the 20% as a margin so that would also scale up. Without trying I don't know if it would give you the desired effect but it should fix the issue of the square moving up.

oops,
I forget that I am working on an iMac.
the if addition in the script solved my problem.
function vertical_center()
{
var ww = $(window).width();
if (ww < 1600)
{
$("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
}
else
$("#character").css({'width': ww + 'px'})
}
Yet, I would be glad if someone looks over my code telling me where some silly things remain.
Hope this post added something nevertheless, thank you guys