We Keep Coding

Image is overlapping content after resizing

I tried to create JS function that resize image by clicking on it. It works but I have problem with overlapping content. After I click on image it will resize and overlap content above and under my image I tried to set width, height, position(absolute) but nothing works. I want to push the content away from image.
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.transform = "scale(2)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

The css scale() function will always overlay neighboring elements. Try this..
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style = "height:100%;width:100%";
// Animation effect
img.style.transition = "transform 0.25s ease";
}

Set transition on the image element in the CSS with width as the property to transition. In your code, remove the setting of the transition. When clicking on the image, all you need to do is apply img.style.width = "100%".
The problem with using scale is it scales the image in place, thus, it can overlap other elements.
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.width = "100%";
}
#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
transition:width 0.25s ease;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

That is, because positioning by position: relative and changes to the element by the transform-property are only applied after the element has been inserted into the DOM.
By that I mean that visual changes of the elements achieved by using position: relative in combination with the top-, left-, right- and bottom-property as well as by using the transform-property do not affect the layout of its parent or its siblings. These changes only affect the element itself and its children.

Scroll Div with a Position Fixed child

I have a div that wraps some content. This div has its overflow-y set to scroll.
Inside the wrapper, are 2 more divs. The first has a height greater than the wrapper, the second contains some content and is absolutely positioned.
<div id="wrapper" style="overflow-y:scroll;height:500px">
<div id="setHeight" style="height:1000px"></div>
<div id="content" style="position:fixed">
Content Goes Here
</div>
</div>
The question is when the mouse is positioned over the #content div, the #wrapper will not scroll. However, when the mouse is positioned on some other part of the #wrapper div where the #content div doesn't fill it scrolls.
I tried to fix this in various ways:
First: set the z-index of #content to -1. This works (as in the #wrapper scrolls) but the content can no longer be interacted with.
Second:, apply the above fix, but use Javascript to listen for mouse clicks. When the user clicks, immediately change the #content's z-index to 1 allowing the user to interact.
The problem with this is even though it works (i.e. the z-index changes), the browser still won't interact with the #content unless you let go of the mouse and click again. Which by the time you let go of the mouse I would want the #wrapper to be scroll-able again.
Third: I tried to set the #content z-index to -1, and set the #wrapper's pointer-events to none. This however made both the scrolling and interaction stop.
Is there anyway to do this?

#wrapper {
background: red;
overflow-y: scroll;
height: 100px; border: solid 1px;}
#header {
background: lightblue;
height: 200px; overflow-y: none;}
#content {
background: green;}
#popup {
background: yellow;
position: fixed;
top: 0;
opacity: 0.5;
pointer-events: none;
}
<div id="wrapper">
<div id="header">Headerum textum</div>
<div id="content">
Contentum Textum
<div id="popup">
Popup textum, lorem ipsum dolor sit amet, consectetur adipiscing elit. ... Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.
</div>
</div>
</div>
Please have a look... on this CodePen

Don't know why do you need the setHeight div. Did some change to your code. Don't know if this is what you want.
<div id="wrapper" style="overflow-y:scroll;height:500px;position:relative">
<div id="setHeight" style="height:1000px"></div>
<div id="content" style="position:absolute;top:0px;">
Content Goes Here
</div>
</div>

How to position button depending on what content is on the page

I'm having troubles positioning a button on a page with css. I want the button to be fixed at a certain position but when there is a lot of content on the page I want the button to move down.
Firstly I want the button at the bottom of the page when there isn't much content such as the code below which does this:
#Button
{
position: fixed;
height:90px;
width:220px;
left:16%;
top:70%;
border:none;
background:none;
}
Then when there is lots of content I want the button to move down such as the code below:
#Button
{
position: absolute;
height:90px;
width:220px;
left:16%;
padding-top:10%;
padding-bottom: 13%;
border:none;
background:none;
}
Can anyone help? I've looked online but cant make sense of it.

If you define a wrapper block element (a <div> for example) around all your content and put the <button> directly under that element, it is possible to reach the desired result with CSS only.
HTML:
<div id="wrapper">
<!-- other content goes here -->
<button id="button">Sample</button>
</div>
CSS:
#wrapper {
position: relative;
min-height: 100vh;
}
#button {
position: absolute;
bottom: 0;
}
However, I have to warn you about the fact that legacy browsers do not support the vh unit and some others show buggy behavior. Take a look at here before you implement it in your project.

I don't know your structure, but I'll try to help you.
Let's use the following markup:
<div class="parent">
<p class="texto">Your text goes here!</p>
<input type="button" value="OK" />
</div>
To solve your problem, I'd simply use a min-height in the content.
.parent .texto {
min-height: 100px;
}
In this way, the button will always be in the same position if there isn't much content. And it'll follow the height if there are lots of content.
Snippet:
.parent {
width: 200px;
padding: 5px;
border: 1px solid black;
float: left;
margin: 5px;
}
.parent .texto {
min-height: 100px;
}
<div class="parent">
<p class="texto">
Small text!
</p>
<input type="button" value="OK" />
</div>
<div class="parent">
<p class="texto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi urna, rhoncus vitae hendrerit ut, hendrerit a turpis. Phasellus sed rhoncus augue, eget vehicula neque. Vivamus lobortis, velit vitae maximus porttitor, erat nulla scelerisque est, nec
sagittis diam diam id nisl. Maecenas dictum lacinia dignissim. Duis eget ligula fermentum, vulputate dui sed, vestibulum ipsum. Duis non consectetur dolor. Nunc urna eros, tincidunt id nisl id, dapibus imperdiet orci. Mauris posuere convallis ullamcorper.
</p>
<input type="button" value="OK" />
</div>
Hope it helps!

use position:relative for the element which you have defined before this button.

Prevent element width from shrinking

I have a tooltip with some text, and in order to control the tooltip's position relative to the cursor with CSS, I placed it inside a zero-sized div. Javascript moves the outer div, and the tooltip can be aligned via any of the top/right/left/bottom attributes, depending on which side it should be placed on.
However, this creates a new problem - the tooltip contents now tries to use as little width as possible. I can't disable wordwrap because it needs to fit on mobile screens. Without the outer container, it works perfectly, stretching up to the window edge. Is there a way to ignore the outer container while calculating the line breaks?
From what I can tell, the tooltip no longer 'sees' the body element so it can't know how much it can stretch. However, controlling the tooltip position directly via Javascript is more complicated if I need to align the bottom or right sides - I have to either consider tooltip size (which can change depending on its position), or set bottom/right properties and consider window size.
Here's an example: http://jsfiddle.net/03gdomLt/1/
The first tooltip works correctly, while the second one tries to shrink to zero width.
.tip-outer {
position: absolute;
top: 200px;
left: 100px;
}
.tooltip {
position: absolute;
left: 10px;
top: 10px;
border: 1px solid black;
}
<div class="tip-outer">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>
</div>
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>

Looks only parent width shrinks to 0, the tooltip text are still there but are not able to fit on screen. That is because the parent div (tip-outer) is having left:100px which is forcing tooltip to shift towards right, hence not visible.
Try below css to fix it for small screen. Updated fiddle
#media only screen
and (max-width : 400px) {
.tip-outer .tooltip{
left: -90px;
}
}

I don't know if this can or can not work for your case, but positioning the element relative does enable the text to wrap correctly even if it is positioned left top bottom right.
http://jsfiddle.net/03gdomLt/3/
.tip-outer {
position: absolute;
top: 200px;
left: 100px;
}
.tooltip {
position: relative;
left: 10px;
top: 10px;
border: 1px solid black;
//white-space: pre-wrap;
}
<div class="tip-outer">
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>
</div>
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>

I have a div that constantly changes height. How can I get a second div to constantly adopt the height that the first div is?

I have a div that contains a list of items. The user is able to add to/remove items from the list, so the div constantly changes height to compensate for the changing size of the list.
I have another div to its right that is supposed to give details about the items on the left. How can I get the div on the right to constantly keep vertically aligned with the left div and change height so that it equals the height that the left div currently is, as items are added and removed from the left div's list?

display:table-cell will help you here:
div { display:table-cell; border:1px solid; }
<div id=master>
one<br>two
</div>
<div>
three
</div>

It's hard to answer your question without showing your code. Try putting it in a fiddle? https://jsfiddle.net/
Here's what I would say. Put your left and right divs into a container div, and then have the left and right div's inherit the containers height.
<div id="container" style="height:200px">
<div style="float: left; height: 100%">
list items<br />
list items<br />
list items
</div>
<div style="float: left; height: 100%; border: 1px solid black;">
right div
</div>
</div>
<br /><br />
<button onclick="document.getElementById('container').style.height='20px'" />

Remove height from both of them, and wrap a div around both of them where you add the height.

This function is called whenever something on the document changes, and it sets the height of div2 to the value for the height of div1
<script type='text/javascript'>
document.onchange=setDivHeight();
function setDivHeight(){
var x=Number(document.getElementById('1').style.height)
document.getElementById('2').style.height=x;
}
</script>
<div id="1"></div>
<div id="2"></div>

Flexbox Solution
This answer is adapted from an example on css-tricks - Check it out
Assuming the following markup:
<div class="wrapper">
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</aside>
</div>
We can create a flexbox that will force all columns to conform to the height of the largest with the following styles:
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.main {
text-align: left;
background: deepskyblue;
order: 2;
flex: 3 0px;
}
.aside {
background: gold;
max-width: 200px;
order: 1;
}
body {
padding: 2em;
}
Here's a fiddle
NOTE: Browser support for this solution is limited to IE10+, and the use of browser prefixes still applies to most versions of major browsers. For a more thorough breakdown of how flexbox works, I highly recommend that you check out the article I've linked to above.