Position div depending on the height of another div - javascript

I have a <div> (let's call it "image") that contains some images <img><img><img> and so on.
This div's width is set at 100% of the screen, and the images inside rescale depending on the width. So, depending on the browser's width, the height of my div changes.
Now I would like to create another div (let's call it "after_image") that starts after this image, without using "relative", but by retrieving the height of <div id="image">, and using that as a "top: px" attribute.
Is it possible? Maybe a <script>?
(I am using PHP)

Try this :
<div id='image'>
<img src='' />
<img src='' />
<img src='' />
</div>
<div id='after_image'></div>
<script>
var h = document.getElementById('image').clientHeight // returns height as number
document.getElementById('after_image').style.top = h + 'px'
</script>

Here is how you can achieve what you want, although this is the wrong approach in my opinion.
const
image = document.querySelector('#image'),
after = document.querySelector('#after_image')
after.style.top = image.getBoundingClientRect().bottom + 'px'
#image {
width: 200px;
height: 2750px;
box-sizing: border-box;
border: solid blue 3px;
background: skyblue;
}
#after_image {
width: 200px;
height: 500px;
position: absolute;
box-sizing: border-box;
border: solid orangered 3px;
background: pink;
}
<div id='image'>
<img src='' />
</div>
<div id='after_image'></div>
If you really want to do it this way, it is best to bind your JS statement to the resize event.
window.addEventListener('resize', function(){
after.style.top = image.getBoundingClientRect().bottom + 'px'
}

Related

jQuery: cannot scale img with .load. It fills the entire page. I want to scale it down to fit

I am successfully loading the id #Meatball from file NASA.html. It is a very large img within NASA.html. I am unable to size down the image to 300x250px. I wanted the loaded element, whether its a video, image, or text, to fit within 300x250.
#contentframe{
position:absolute;
z-index: 2;
width: 350px;
height: 300px;
}
#iframe{
?
}
<div id="contentframe">
<div id="iframe"></div>
</div>
$("#iframe").load("NASA.html #Meatball");
Try this:
$("#iframe").load("NASA.html #Meatball");
#contentframe{
position:absolute;
z-index: 2;
}
#iframe * {
height: 300px;
width: 250px;
}
<div id="contentframe">
<div id="iframe"></div>
</div>
Here is a working example on JSFiddle: https://jsfiddle.net/sfarbota/3mwc8xL7/
in css, set the height and width of that image to 300x250px.

HTML/js How can I set multiple div widths from multiple different image widths?

I want to add my own captions to my images which are the same width as the images. I'm using javascript to obtain the widths of the images, from Get width of specific div and use as another div's height?, except that only works for an individual image, and would require me to set a separate id for each div. Is there an easier way?
The image captions are created by
<img src="myimage.png">
<div class="imgtxt">Caption</div>
<img src="myimage2.png"> <!-- Width set to 80% -->
<div class="imgtxt">Caption2</div> <!-- Div width still at 100% because its the width of the image class -->
and the current javascript is taken from the link above
var imgWidth = $('img').css('width');
$('.imgtxt').css('width', imgWidth);
You can try this:
$("img").each(function(i){
var imgWidth = $('img').eq(i).css('width');
$('.imgtxt').eq(i).css('height', imgWidth);
});
Try this:
$('img').each(function() {
imgWidth = $(this).css('width');
$(this).next('.imgtxt').css('height', imgWidth);
});
Ps: jQuery's .css method doesn't return a jQuery object so it doesn't offer implicit collection iteration, so we need to explicitly iterate through the collection using jQuery's .each method.
Optionally, you could grab all the captions, and navigate from them to the image to get the width to set.
$('.imgtxt').width(function(){
return $(this).prev('img').css('width');
});
img:nth-of-type(1) {
min-width: 50px;
min-height: 25px;
width: 50px;
border: 1px solid black;
}
img:nth-of-type(2) {
min-width: 100px;
min-height: 80px;
width: 80px;
border: 1px solid black;
}
.imgtxt {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="myimage.png">
<div class="imgtxt">Caption</div>
<img src="myimage2.png">
<div class="imgtxt">Caption2</div>
If you want a solution without javascript, you could try adding a wrapper to your images and captions like this
<div class="img-wrapper" style="display: table">
<img src="https://via.placeholder.com/250x300">
<div class="imgtxt">Caption</div>
</div>
And then styling the wrapper as a table. I've demonstrated an example here.

Why isn't the div width/height changing after loading?

I'm trying to create an online image cropper where the user uploads a photo and it is displayed with a box (frame) that is changeable via buttons. Crops the photo and sends it back to the user.
I have a basic template of form uploader in php (working). It then displays the image in a div with another transparent div above it with a border marking the cropping area.
The initial values for the divs are set in the css section via php as the page is sent to the user. I'm trying to adjust the size of the frame div, as the width given is the image width +2 px for the frame (same for height) and it should just be the images width (-2 px).
This code should be working, but when the alerts pop up, they show that the frame width/height has not changed the original values, and it appears as though the frame does not change.
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
I am aware that I can change the value php gives to the css section, but I'm going to need to change the crop ratio in the next step anyway, so I need this way to work. Please help, I've been looking at this code for way too long.
Remove the semicolon in the quotes.
frame.style.width = w + "px";
frame.style.height = h + "px";
Also, offsetHeight and offsetWidth takes border into consideration. Since your border width is 1px, it adds 2px to both height and width of the image canceling out the subtraction with 2.
Read more about offset width and height on MDN.

counting class using jquery then multiply the value to the width for the class

I need some help on how to set the width of my wrapper on how many class does my content have.
i have some fiddle here that gets the value of the class but i dont know how to implement it to make my width multiply on how many does the class matches.
CONTENT:
<div id='myDiv'>
<img src='' class='class' />
<img src='' class='class' />
<img src='' class='class' />
</div>
<img src='' class='class' />
CSS:
#myDiv { width: 200px; border: 1px solid red; height: 200px; }
.class { width: 200px; border: 1px solid blue; height: 200px; }
SCRIPT:
var numItems = $('#myDiv .class').length;
alert(numItems);
now what I need to do is for every .class that is there on the content. I need to multiply it to the width of the #mydiv.in this case i need a 600px width for the #myDiv css
--Update
I now have the counting query the problem is its working on the fiddle but when i transfer it to my local it doesn't work.
FIddle Here
var numItems = $('#myDiv .class').length; //get the number of .class in #myDiv
var orig_width = $('#myDiv').width(); //get the original width of #myDiv
//use .outerWidth() here when you want to include padding and border
var new_width = numItems*orig_width; //multiply it with the number of .class
$('#myDiv').css('width', new_width+'px'); //set the new width to #myDiv
Demo
Reference
.width()
.outerWidth()
.css

modifying an enlargement image from thumbnail script to dynamically display image based on their size property

I'm trying to modify this simple js script that enlarges the image from thumbnail whenever it is clicked. The problem is , the enlarged image is displayed according to an define fixed width. I want the enlarged image displayed according to it's size property.For example of an image size is 200 width and 300 height , I want that image to be display according to that size instead of an fixed 300 height and width.
I'm been trying solutions such as removing the width but instead the image is enlarged to the full screen size.
How can I modify this script so the enlarged image is displayed according to it's original size property.
The script belongs to roXon and I give full credit to him
How to enlarge image from thumbnail in jQuery?
This is the jquery http://jsbin.com/egevij/3/edit
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="1.jpg" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
</body>
</html>
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
Something like this should probably work
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" data-width="860px" data-height="590px" alt="" />
$('<img>', {src:imgToLoad, width: $(this).data('width'),height: $(this).data('height')}).appendTo('#jQ_popup');
or this one takes the size from the path /860x590/
var dimensions=$(this).data('full').match(/(\d+)x(\d+)/);
$('<img>', {src:imgToLoad, width: dimensions[1]+'px',height: dimensions[2]+'px'}).appendTo('#jQ_popup');

Categories