I'm trying to center a pargraph below a div (could be a square image for the matter). I understand that the easiest way to do it is to contain both the div and the text below it in a single container and use text-align, but in this instance I have a limitation where I cannot let the small image be contained in a container wider than that image.
Without centering the text it looks like this:
My code:
HTML:
<div class="block"></div>
<p class="label">This text is a bit long</p>
CSS:
body {
padding: 5rem;
}
.block {
background-color: blue;
width: 80px;
height: 80px
}
.label {
}
Codepen:
https://codepen.io/omerh3/pen/oNqVjvV
The reason why I cannot let the image be in a container is that I'm using ReactFlow where the handles should connect to the sides of the image without a gap. If I put the image and the text inside a div, the div will take the width of the text and thus it will naturally be wider than the image.
I tried centering the text below the image with absolute positioning, but with different paragraphs sizes, it won't be persistent in the center. Is there a away to achieve this without inserting the image/square and the text inside one div?
One last thing: the width of the image if constant, for example 100px
one way to do this is to get the coordinates of your two elements and then add margin-left: to adjust the position of the span
let divOffsets = document.getElementById('a').getBoundingClientRect();
let divRight = divOffsets.right;
let divLeft = divOffsets.left;
console.log(divLeft,divRight)
let spanOffsets = document.getElementById('b').getBoundingClientRect();
let spanRight = spanOffsets.right;
let spanLeft = spanOffsets.left;
console.log(spanLeft,spanRight)
let divCenter = divLeft + divRight / 2
console.log(divCenter)
let offset = divCenter - (spanLeft + spanRight / 2)
offset = offset + "px"
document.getElementById('b').style.marginLeft = offset;
body {
padding: 5rem;
border:solid 1px red;
position:relative;
}
.block {
background-color: blue;
width: 80px;
height: 80px;
}
span{
position:absolute;
}
<div id = 'a'class="block"></div>
<span id = 'b' >1234</span>
Do you mean something like this??
body {
padding: 5rem;
}
.block {
background-color: blue;
width: 80px;
height: 80px;
margin:0 auto;
}
p.label {text-align: center}
<div class="block"></div>
<p class="label">This text is a bit long</p>
Related
I am trying to make a container that holds some text and images, and starts out at a certain size, say 48px. Upon clicking I want the container to grow to fit the contents, and on a second click reshrink down to 48px. The main issue is I don't want to set the height for the full size container, I would like the container to automatically resize to fit the content.
I have figured out how to start the blog at full size, shrink and regrow, but I can't figure out a way to have it start small, grow, and shrink again.
const hoistingId = document.getElementById('hoisting')
function enlargeBlogItem() {
if(hoistingId.style.height===''){
hoistingId.style.height = '3rem';
} else {
hoistingId.style.height = '';
}
}
hoistingId.addEventListener('click', enlargeBlogItem)
You can use overflow: hidden; on the parent element to ensure that the child elements are inside the parent and not overlapping and then use a JavaScript function to handle the size changes. Attribute attr-small is used to store the original value of height. By removing the height attribute from the style of the parent it will default to wrapping the children.
function toggleSize(el){
const originalSize = el.getAttribute('attr-small');
if(el.style.height === originalSize) {
el.style.removeProperty('height');
} else {
el.style.height = originalSize;
}
}
#container {
border: 1px solid;
width: 200px;
overflow: hidden;
}
#container:hover {
cursor: pointer;
}
.foo {
width: 90px;
height: 90px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
}
<div id='container' onclick='toggleSize(this)' attr-small='48px' style='height:48px;'>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
</div>
I am trying to create a tooltip element that has a min width of 50px and a max width of 200px. I place the tooltip element inside another element so that I can easily control when the tooltip appears or disappears when there is a hover event on the parent.
The problem that I have is that the tooltip element's width appears to be controlled by the parent's width even though I specified that the child(tooltip) has an absolute position.
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
position: relative;
transition: width 2s;
}
#tooltip {
position: absolute;
top: calc( 100% + 5px );
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
I would like the tooltip (yellow div) to keep it's size at 200px in this example, but we can see that when the parent changes width, the tooltip width also changes. Why?
Is there a way to fix this problem?
Clarification: In this example: https://codepen.io/anon/pen/ePPWER we see that the tooltip text looks nice on one line. I don't want the tooltip's div to change its width when the parent changes width, because it forces the tooltip text to wrap onto 2 lines which is undesirable.
If we check the specification related to the width of absolutely positioned element we can read this:
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
So in your case the width of your element is shrink to fit:
Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, calculate the available width: this is found by solving for
'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
To make it easy, and without considering the min/max-width, the width of your element will try to fit the content without exceding the width of its parent container (containing block). By adding min/max-width you simply add more constraint.
One idea of fix it to remove positon:relative from the parent element so that it's no more the containing block of the position:absolute element (it will be the initial containing block which is wide enough to avoid the available width constraint).
Then use margin instead of top/left to control the position:
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
}
#tooltip {
position: absolute;
margin-top: 30px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
ID Tooltip is being used under Parent. When parent's width changes, it also suggest that tooltip's total width is changed. Since you have used mix-width and max-width it will expand till it reaches max-width. If you want it to be fixed then simple use width.
It is because the .parent has a position: relative. This will keep all children (position: absolute included) as confined by the parent div.
Not sure if this will work for you because it is pulling the tooltip out of the parent and making it's own with span wrapping the text. Alternatively, you'll need to change the parent from being relative otherwise it'll continually affect the child.
let p = document.getElementById('parent');
let b = true;
setInterval(() => {
b = !b;
let w = 10;
if (b) {
w = 300;
}
p.style.width = `${w}px`
}, 5000);
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
position: relative;
}
#root {
position: relative;
}
#tooltip {
width: 100%;
}
#tooltip span {
position: absolute;
top: calc( 100% + 5px);
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="root">
<div id="parent"></div>
<div id="tooltip">
<span>My long tooltip text that wraps to multiple lines as needed.</span>
</div>
</div>
Part of my Uni module requires me to make a webstory that uses random elements to mix up the story. I'm using GetElementById in JS to embed one random image from an array into a div, which works perfectly fine. The image becomes the background of the div, and I then have text on top of the image - again this all works perfectly fine.
However the issue is that I want the image to be slightly transparent so that the text is easier to read, however no matter what solution I try, I can't get it to work.
I've tried making the div transparent in both CSS and JS, however then the whole div including the text is effected which defeats the point. Then when I try the RGBA style in CSS, the image isn't effected.
So what I need is the image that is loaded into the div through JS to be slightly transparent, whilst the text that is also in the div in the HTML doument to remain untouched.
This is the JS I'm using to randomly select an image:
function randomGun() {
var imgCount = 3;
var dir = 'img/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "gun1.jpg",
images[2] = "gun2.jpg",
images[3] = "gun3.jpg",
document.getElementById("left").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
}
<div id="container">
<div id="left">
<a id="message">Drive a bit closer to see if anybody is there.</a>
</div>
<script>
window.onload = randomGun()
</script>
</div>
Use a nested div with semi-transparent white background.
<div id="container">
<div id="left">
<div id="nested" style="width:100%;height:100%; background-color: rgba(255,255,255,0.5)">
<a id="message">Drive a bit closer to see if anybody is there.</a>
</div>
</div>
<script>window.onload = randomGun()</script>
</div>
In addition, I would set everything relative to style in a stylesheet, or at least inside a <style></style>.
UPDATE
Added your JS and fixed it a little. Note the adjustment to the random expression.
Perhaps this'll help you.
Use an element that'll contain 2 other elements, give the container position:relative and z-index:-2
Then the 2 elements inside should have position:absolute.
Next give the top element z-index:-1, background:url(http://image-host.com/path/to/img.jpg), and opacity:.5
Then the second element should have text and whatever else you want visible. Give this element z-index:1.
The reason why opacity wasn't working the way you expected to work is because opacity applies to everything within the element as well. Here in the Snippet, we layered an element with content and an element with a background image separately.
REFERENCE: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
SNIPPET
function randomBG() {
var imgCount = 3;
var path = 'http://imgh.us/';
var randomCount = Math.round(Math.random() * (imgCount));
var images = ['solar_system.jpg', 'kowloon.jpg', 'transparent-map.png'];
document.getElementById("fader").style.backgroundImage = "url(" + path + images[randomCount] + ")";
}
window.onload = randomBG;
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Verdana;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#base {
position: relative;
z-index: -2;
width: 100vw;
height: 100vh;
}
#content {
position: absolute;
z-index: 1;
padding: 20px;
margin: 0 auto;
width: 75%;
height: auto;
top: 0;
left: 0;
background: none;
}
#fader {
position: absolute;
z-index: -1;
padding: 20px;
margin: 0 auto;
min-width: 75%;
min-height: 75%;
/*background: url(http://imgh.us/Lenna.png);*/
opacity: .5;
}
<main id='base'>
<section id='fader'></section>
<article id='content'>
<h1>This is the Text</h1>
</article>
</main>
I have a div with height = 10*screen-height.
I want to add another smaller div to it with height = screen height
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?
Presumably you already have the screen height stored, and the two divs created at the correct heights, so:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative in your style if it's in your css already
See here how you can access and manipulate the body's height and the big div's inners afterwards;
JSfiddle
HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#biggy {
width: 200px;
background-color: orange;
position: relative;
}
.smally {
width: 100%;
background-color: blue;
color: white;
text-align: center;
position: absolute;
}
JavaScript
$(document).ready(function() {
var bh = $('body').height();
var smally_offset = (bh / 10);
// Set biggy to be the body's height
$('#biggy').css('height', bh);
// Make all smallies 10% of the set height
$('.smally').css('height', smally_offset);
// Handle the different smallies :)
$('.smally:nth-child(1)').css('top', smally_offset * 0);
$('.smally:nth-child(2)').css('top', smally_offset * 1);
});
I'm trying to achieve the following in HTML/Javascript:
have a coloured circle with a piece of text perfectly centred (both horizontally and vertically) within it;
dynamically from JavaScript, be able to alter the size of the circle, maintaining the text centred within it at all times.
The following achieves the first of these:
Create the circle using a DIV element whose style has appropriate background and border-radius;
Inside the DIV, put a P element whose style has "text-aligbn: center" and "line-height: ".
For example:
p.circlecaption {
text-align: center;
line-height: 128px;
}
...
<div style="background: #a0a0a0; margin: 0px; width: 128px;
height: 128px; border-radius: 64px;" id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
This works fine for the initial, static, case. The problem comes when, from JavaScript, I attempt to set the line-height property in order to keep the text vertically centred as I change the size of the div. I expected something like the following to work:
var obj = document.getElementById('theCircleDiv');
var sz = '' + (rad*2) + 'px';
obj.style.width = sz;
obj.style.height = sz;
obj.style.margin = '' + (64 - rad) + 'px';
obj = document.getElementById('theText');
obj.style['line-height'] = sz;
However, while this code re-sizes and re-centres the circle perfectly, it doesn't vertically re-centre the text-- i.e. the attempt to dynamically set line-height appears to be ignored.
Can anybody offer any help on either how to set line-height dynamically, or else a way to achieve my desired goal of keeping the text centred within the circle? From my reading around, I've seen various other suggestions such as calling the property "lineHeight" or playing around with "vertical-align: middle", but none seems to work.
(I am currently testing in Safari on Mac OS which is likely to be most used among the site's target audience, but am also looking for a solution that is reasonably cross-browser compatible.)
You can achieve that with pure css
#theCircleDiv {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#theText {
vertical-align: middle;
}
Working Example: http://jsfiddle.net/bZj52/
Here is an example. I'm using jQuery UI to wire up some dynamic setting of the size but the re-size code should work in a pure JavaScript environment.
First, I cleaned up the HTML and put it's style in CSS
HTML:
<div id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
CSS:
#theText {
text-align: center;
line-height: 128px;
}
#theCircleDiv {
background: #a0a0a0;
margin: 0px;
width: 128px;
height: 128px;
border-radius: 64px;
}
JavaScript:
function resize(size) {
var circle = document.getElementById('theCircleDiv'),
text = document.getElementById('theText');
circle.style.width = size + 'px';
circle.style.height = size + 'px';
circle.style.borderRadius = (size / 2) + 'px';
text.style.lineHeight = size + 'px';
}
And this is much easier with flex box.
div {
background-color: #ccc;
height: 50px;
width: 100%;
/* Important Part */
display: flex;
justify-content: center;
align-items: center;
}
<div>
<span>Center Me Please</span>
</div>