This is the div structure:
<div id="wrapper">
<div class="mainG mainGT">
<div class="rawV">
<div class="svs"></div>
<div class="drgM"></div>
</div>
</div>
</div>
I'm loading an external image into drgM. Now I need div svs to be same size as drgM (height and width). So I wrapped both drgM and svs inside rawV. My question is, how do I make the svs to be the same size as drgM at all times? So basically if mainGT height is changed, drgM and svs should scale proportionately maintaining their aspect ratio?
Here is a Fiddle including the css
This might be close to what you need. If you change the width of .mainG the image and overlay (.svs) will scale accordingly.
It might be possible to scale by changing the height, let me know if that is critical.
.wrapper {
border: 1px dotted green;
}
.mainG {
border: 1px solid yellow;
width: 400px;
}
.rawV {
border: 1px dotted blue;
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
}
.drgM img {
display: block;
width: 100%;
}
.svs {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px dashed red;
}
<div class="wrapper">
<div class="mainG mainGT">
<div class="rawV">
<div class="svs"></div>
<div class="drgM"><img src="http://placehold.it/200x150"></div>
</div>
</div>
</div>
I modified your code a bit and added another wrapper for .svs and .drgM since I'm not sure how you want .rawV to work.
<div class="rawV">
<div class="resize">
<div class="svs"></div>
<div class ="drgM"></div>
</div>
</div>
https://jsfiddle.net/5ppbgxvq/2/
Basically, .resize will resize depending on .drgM and .svs will fill the size of .rawV giving it the same size as .drgM
Set the css height for both drgM and svs as auto.
Setting the height as a percentage means it is relative to its parent element.
Related
I am currently trying to center a rectangle in an image with only using javascript (no css center properties). However, even if the numbers are right, the showing is wrong.
To do this, I use the following code :
$(document).ready(function() {
$(".img-zoom-container").css("width", $("#myimage").width());
$(".img-zoom-container").css("height", $("#myimage").height());
$("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
$("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
$("#lens_container").css("top", ($("#lens").height() / 2));
$("#lens_container").css("left", ($("#lens").width() / 2));
});
.img-zoom-container
{
border: 1px solid red;
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
}
#lens_container
{
border: 1px solid cyan;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
The item I am trying to center is the #lens_container div (appears blue on screen). I also have a white square (#lens div) of size 50px by 50px. I would like to center and to size the blue rectangle in order to have half of the square width at each side of the blue rectangle and same with height. However, as you can see when trying the code, it is not the case although the maths are correct.
I do not know if you can understand my needs, but I would really appreciate help there.
Thanks in advance.
There are 2 issues:
First, position: absolute means to position the item "to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block" (reference). The parent element ".img-zoom-container" is not positioned. The initial container block would be <body>, which has some padding by default.
So your #lens_container is positioned relative to <body> of the iframe, which is probably not what you expected. Moreover, <body> by default has a non-zero padding size. You may see it clearer if you simply use CSS to position everything to top: 0 and left: 0:
body {
background-color: rgba(0, 0, 0, 0.1);
}
.img-zoom-container
{
border: 1px solid red;
width: 600px;
height: 160px;
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
#lens_container
{
border: 1px solid cyan;
width: 550px;
height: 110px;
position: absolute;
top: 0;
left: 0;
}
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
To have both #lens and #lens_container positioned relative to .img-zoom-container, you have to give .img-zoom-container a "position" value so it can be the "position ancestor":
$(document).ready(function() {
$(".img-zoom-container").css("width", $("#myimage").width());
$(".img-zoom-container").css("height", $("#myimage").height());
$("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
$("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
$("#lens_container").css("top", ($("#lens").height() / 2));
$("#lens_container").css("left", ($("#lens").width() / 2));
});
.img-zoom-container
{
border: 1px solid red;
position: relative; /** this line **/
}
#lens
{
border: 1px solid white;
width: 50px;
height: 50px;
position: absolute;
}
#lens_container
{
border: 1px solid cyan;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
<div id="lens"></div>
<div id="lens_container"></div>
<img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>
It's still 1-2 pixels off. That is because you didn't take the border width into consideration (your second issue). You'd get a better result once you clear your head and think how you want the border widths to behave.
Depending on its container, you could just set an ID on your div like:
CONTENT .
Then in javascript, if there is an event to center it, you could make a function like:
function centerDivItem() {
document.getElementById("id1").style.alignContent = "center"
}
And then, as I said, call it from another place.
I'm building an html/javascript theme designer for a CMS. Elements are positioned absolutely and can be moved/resized via the mouse, and/or contain editable text whose height may be determined by the number of lines. However I'm running into the problem where a parent element's height does not expand to include its absolutely positioned children.
Minimal code (also on JSFiddle here):
<style>
div.layer { position: absolute }
div.layer1 { width: 400px; border: 1px solid #ccc }
div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue }
</style>
<div class="layer layer1">container should expand to the bottom of the child.
<div class="layer layer2" contentEditable>Child with<br/>editable text.</div>
</div>
A CSS-only solution is ideal and I'm not concerned about older browsers. But I'm mostly looking for any way to prevent the need for javascript to run on every page using a created theme to set their height (since pages with the same theme may have different amounts of text).
There are already a few similar questions but their accepted answers (e.g. don't use absolute positioning) won't work in my case. Unless there is a way to have multiple layers of draggable/resizable elements without them being position: absolute.
I found a pure-css solution! In summary:
Set the child elements to position: relative instead of absolute.
Set their margin-right to be their negative width, to give them zero effective width, and make them float: left to keep them all on the same line. This makes all of them have an origin of 0, 0.
Then we can set their left and margin-top properties to position them absolutely within their parents. Note that margin-top is required instead of top because top won't push down the bottom of the parent element.
JSFiddle here or code below:
<style>
div.layer { position: relative; float: left; }
div.layer1 { width: 400px; border: 1px solid black }
div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
Container
<div class="layer layer2" contentEditable>Edit me</div>
<div class="layer layer3">
<div class="layer layer4" contentEditable>Edit me</div>
</div>
</div>
absolute positioned elements are removed from the flow, thus ignored by other elements
the only way you have is to set the child position to position:relative, in this way it is possible to move it using right,left,top and bottom and also change parent display to display:inline-block
If you want keep the children absolutely positioned, you can use the following script to resize the container : http://jsfiddle.net/6csrV/7/
var layer1 = document.getElementsByClassName('layer1'),
i = 0, len = layer1.length, childHeight;
for(; i < len; i++) {
childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight;
layer1[i].style.height = childHeight + 'px';
}
document.addEventListener('keyup', function(e) {
if(e.target.className.indexOf('layer2') !== false) {
e.target.parentNode.style.height = e.target.clientHeight + 'px';
}
});
AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>
I want have width and height of a full div with scroll using JQuery, but i can only have size of visible content and not size of visible + hidden content of scroll bar.
Anyone knows anyway to have this values (width and height)?
<div id="area" class="divLeftCem area">
<div id="panelArea" class="areaBackground"
style="width: 1004px; height: 613px; background: #FFFFFF url('Images/background.png') repeat;">
</div>
</div>
.area
{
margin-left: 10px;
width: 1004px;
height: 613px;
border: 1px solid #AFAFAF;
overflow: auto;
position: absolute;
top: 145px;
}
PS: Sorry about bad english.
Get the element's .scrollHeight:
$(".el").get(0).scrollHeight;
It goes without saying you could use .scrollWidth for the x-axis as well.
Fiddle: http://jsfiddle.net/spN6n/
I have a page that has 2 columns. The first column is a dynamic width. It contains a bunch of tabular data in tables. The 2nd column is a fixed width full of navigation stuff.
The 2 columns are divs with float left. I need to accomplish 2 things.
I need to center the 2 divs on the page. For example, if the first div is 600px wide as dictated by the data inside of it and the second div is a fixed 200px, the centering point is 400px.
I don't want the 2nd div to wrap down if the browser window is resized.
I'm thinking that I may have to nest the 2 divs inside of another div, set the parent div width using javascript, then center it.
I created this fiddle to help illustrate. http://jsfiddle.net/darthg8r/uhKdt/
Surround them with a div and set its style to:
width: ( whatever you need )
margin: 0 auto; // this centers the div
You can set the width dynamically with JavaScript if needed. As long as it's smaller than 100% of the surrounding container, it will stay centered.
You could achieve this with the following code:
HTML:
<div id="wrapper">
<div id="container">
<div id="variable">test</div>
<div id="fixed">test</div>
</div>
</div>
CSS:
#wrapper { overflow: hidden; }
#container {
float: left;
position: relative;
left: 50%; }
#container > div {
float: left;
position: relative;
right: 50%;
height: 300px; }
#variable {
background: red;
width: 300px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/
You could also achieve this effect by wrapping the two elements in a container, setting them both to display: inline-block, and finally setting their container to have text-align: center.
The answer is a little more complicated than this, so let me know if you want to choose this route instead.
To make it so the elements don't fall to the next line, use inline-block.
<div id="container">
<div id="variable">
<p>test</p>
</div><div id="fixed">
<p>test</p>
</div>
</div>
CSS:
body { margin: 0; }
#container {
color: #fff;
text-align: center;
white-space: nowrap; }
#container > div {
height: 300px;
display: inline-block; }
#variable {
background: red;
width: 100px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/2/