Prevent element width from shrinking - javascript

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>

Related

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.

fade out transition for .mouseout using .animate?

I have a div that when you hover, another div shows up. They aren't parent/child or wrapped, so I used a script to get this to work the easiest I could and to have what I needed. With .mouseover the hover div slowly appears which is what I want.
My issue is getting the .mouseout to make the hover div slowly disappear and stay gone. I've tried different variations but the closest I got is to make the div slowly fade away, but it pops back up after the delay I had set.
I'm very new to js, really no experience at all. I wrote the first part of this code which works but the .mouseout is what I'm having issues with.
Here's my code:
$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });
$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });
I know it's probably simple, but I don't know much if anything about js.
Here is the html:
<div id="show_stats1" class="stats">
main, visible div
</div>
<div class="stat-1_info" style="visibility:hidden;">
hidden div to be shown on hover
</div>
Here's a jsfiddle https://jsfiddle.net/yt3h9xnf/
You can use the .animate() method with either opacity or visibility. There is no reason to use both.
If you can't figure out which one to use read this answer here.
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").animate({opacity: 1}, 200);
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_stats1" class="stats">
<h1>main, visible div</h1>
</div>
<div class="stat-1_info">
hidden div to be shown on hover
</div>
Make it simple by using fadeIn() and fadeOut() with sec as parameter. This will take care of the time you want to see the text and want to disappear.
Use display:none; which is latest and best in market now than using visibility property.
fadeIn()
fadeOut()
$(document).ready(function() {
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
});
});
.stats_container {
width: 310px;
padding: 10px;
margin-bottom: 0px;
}
.stats {
width: 300px;
height: 34px;
margin: 15px 0px -3px 0px;
}
.stats h1 {
text-align: left;
}
.stats h2 {
position: absolute;
left: 260px;
margin-top: 8px;
width: 50px;
text-align: right;
}
.stats h1 {
display: inline-block;
font-weight: 400;
color: #000;
line-height: 9.5pt;
font-size: 9.5pt;
}
.stat-1_info {
top: -50px;
margin: 0px;
}
.stat-1_info {
float: right;
position: relative;
left: 0px;
display: inline-block;
width: 380px;
height: 334px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
<div id="show_stats1" class="stats">
<h1>Strength:</h1>
</div>
</div>
<div class="stat-1_info" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>

Scrollable text in a DIV of unknown size?

I have this:
<section>
<div id="dont-scroll">
Unknown content!
</div>
<div>
<div id="scroll-this">
This part should be scrollable when
the total content overflows the SECTION
</div>
</div>
</section>
As you can see I want the user to be able to scroll the content in the lower half, but not the upper.
I can achieve this by using "resize" events, checking the size of SECTION and "dont-scroll", etc.
However, is there an easier way today, using only CSS?
A possible approach using Flexbox
body, html {
margin: 0;
padding: 0;
}
section {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
section > div {
padding: 20px;
}
div:not([id]) {
background: #d8d8dc;
flex: 1;
overflow: auto;
}
<section>
<div id="dont-scroll">
Unknown content! <br />
Lorem ipsum sit dolor amet
</div>
<div>
<div id="scroll-this">
This part should be scrollable when
the total content overflows the SECTION
<br /><br />
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec
odio. Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede.</p>
...
</div>
</div>
</section>
Example on codepen
Defining height of scroll-this id and using overflow-y: scroll will make scroll-this id scroll able
#scroll-this {
height: 10px; //this can be as per your choice
overflow-y: scroll;
}
I used 10px because your content is too less.
"This part should be scrollable when the total content overflows the
SECTION".
Scroll will show only if line breaking content is greater then provided height.
#scroll-this {
height: 20px;
overflow-y: scroll;
}
<section style="width:200px">
<div id="dont-scroll">
Unknown content!
</div>
<div>
<div id="scroll-this">
This part should be scrollable when the total content overflows the SECTION
</div>
</div>
</section>

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.

Categories