How to get height of a div in react js - javascript

I'm trying to get height of a parent div using React JS.
The html structure is as follows :
<div ref="sectionSlider">
<div class="detailsOutterDiv">
<div class="swiper" style="width: 100%;">
<div class="detailsInnerDiv">
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
</div>
</div>
</div>
<div class="slider-thumbnails">
<div class="thumb">
<img src="someURl">
</div>
</div>
</div>
And the css-scss structure is like this :
.detailsOutterDiv{
position: relative;
width: 100%;
overflow: hidden;
}
.detailsInnerDiv{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 10000%;
transition: all 0.5s ease;
}
.slide{
display: inline-block;
margin-right: 15px;
}
.slide img{
width: 100%;
height: auto;
}
.slider-thumbnails{
width: 100%;
padding-top: $primary-margin-xs - 5;
text-align: center;
.thumb{
display: inline-block;
width: (100% / 12);
img{
width: 100%;
height: auto;
padding: 0 2px;
}
}
}
I'm trying to get the height of the div with ref="sectionSlider".
I tried to do this on a few ways in componentDidMount like this :
componentDidMount(){
//First way
let top = this.refs["sectionSlider"].offsetHeight;
//Second way
let top = this.refs["sectionSlider"].clientHeight;
//Third way
let top = this.refs["sectionSlider"].getBoundingClientRect().height;
//Fourth way
let node = this.refs["sectionSlider"];
let nodeStyle = window.getComputedStyle(node);
let top = parseInt(nodeStyle.getPropertyValue('height').replace(/\D/g,''));
}
And in every case top is 82 what is not true.
It looks like :
Thus, the div has height of 523.
Any idea how to solve it?

If the problem is (according to your guess) that the images aren't loaded you could do something like this:
const Example = React.createClass({
getInitialState () {
return {
imagesLoaded: 0,
};
},
printClientHeight() {
console.log(this.wrapper.clientHeight)
},
updateLoadedImages() {
this.setState({ imagesLoaded: this.state.imagesLoaded + 1 })
if (this.state.imagesLoaded = 4) {
printClientHeight();
}
},
setWrapperRef(el) {
this.wrapper = el;
},
render() {
return (
<div ref={this.setWrapperRef}>
<div className="detailsOutterDiv">
<div className="swiper" style="width: 100%;">
<div className="detailsInnerDiv">
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/ >
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
</div>
<div className="slider-thumbnails">
<div className="thumb">
<img src="someURl" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
);
}
});
Obviously you could clean this up quite a bit by getting the image tag count dynamically but I think you get the point...

Related

Vue JS displaying a block on hovering over a certain picture

I have four pictures when you hover over one of these pictures, certain content appears, for example, if you hover the mouse over the first picture, a green block appears when you hover over the second picture, a blue block appears, and so on, the problem is that the logic that I have implemented looks like nightmarish
Here is a link, you can see the logic on codesandbox, I want to know if it is possible to somehow optimize the logic to make it more readable and simple
<template>
<div>
<div id="girls_gallery">
<div class="girls_gallery_content">
<div>
<div class="g_gallery_title_container">
<h1>Hover Image</h1>
</div>
<div class="girls_list">
<div class="girls_container">
<img
style="width: 200px; height: 200px"
#mouseover="mouseOver1"
#mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
#mouseover="mouseOver2"
#mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
#mouseover="mouseOver3"
#mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
#mouseover="mouseOver4"
#mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div
style="width: 200px; height: 200px; background: red"
v-show="img1"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: green"
v-show="img2"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: blue"
v-show="img3"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: orange"
v-show="img4"
key="img1"
></div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
};
},
methods: {
mouseOver1: function () {
this.img1 = true;
},
mouseOver2: function () {
this.img2 = true;
},
mouseOver3: function () {
this.img3 = true;
},
mouseOver4: function () {
this.img4 = true;
},
mouseout: function () {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
},
},
};
</script>
It seems that it hasn't "clicked" yet with regards on how vue is supposed to work. Check this as an example for reference:
https://codesandbox.io/s/wandering-dream-237l0?file=/src/components/HelloWorld.vue
Basically what you want to do is to render your component content based on component data. Thus you create a data object that holds the information required for your logic.
What I would do is add position: relative to girls_container. Then move your color block into the <div class="girls_container">.
Next, add the following to your color blocks
z-index: 9999;
position: absolute;
top: 0;
left: 0;
Move #mouseover and #mouseout to the girls_container.
<div class="girls_list">
<div
class="girls_container"
style="position: relative"
#mouseover="mouseOver1"
#mouseout="mouseout"
>
<img
ref="img1"
style="width: 200px; height: 200px"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
<div
style="
width: 200px;
height: 200px;
background: red;
z-index: 9999;
position: absolute;
top: 0;
left: 0;
"
v-show="img1"
key="img1"
ref="img-block1"
></div>
</div>
Example on Code SandBox

make the page scroll to put div on top

I'm building a page where I have some divs with different heights and a text inside them, I'd like to, when I click on div's text, to make the page move so that this div would get at the top of the screen.
I've searched around but what I find is often related to the fixed property, the thing is that I don't want to change the position property of the div, I'd like just the page to scroll automatically so that the div would be on top.
Do you have any advice on where I could start?
Thank you
.container {
width: 100vw;
height: auto;
}
.element {
padding: 50px;
}
#element-1 {
background-color: beige;
height: 500px;
}
#element-2 {
background-color: darkSeaGreen;
height: 200px;
}
#element-3 {
background-color: coral;
color: white;
height: 800px;
}
#element-4 {
background-color: MidnightBlue;
color: white;
height: 300px;
}
<div class="container">
<div class="element" id="element-1">
<h1>Some text</h1>
</div>
<div class="element" id="element-2">
<h1>Some text</h1>
</div>
<div class="element" id="element-3">
<h1>Some text</h1>
</div>
<div class="element" id="element-4">
<h1>Some text</h1>
</div>
</div>
If I correctly understand you, this will help you.
let divs = document.querySelectorAll(".element");
divs.forEach(div => {
div.addEventListener("click", event =>{
let divTop = div.offsetTop;
window.scrollTo(0, divTop);
console.log(divTop + " --- " + window.scrollY);
});
});
.container {
width: 100vw;
height: auto;
}
.element {
padding: 50px;
}
#element-1 {
background-color: beige;
height: 500px;
}
#element-2 {
background-color: darkSeaGreen;
height: 200px;
}
#element-3 {
background-color: coral;
color: white;
height: 800px;
}
#element-4 {
background-color: MidnightBlue;
color: white;
height: 300px;
}
<div class="container">
<div class="element" id="element-1">
<h1>Some text</h1>
</div>
<div class="element" id="element-2">
<h1>Some text</h1>
</div>
<div class="element" id="element-3">
<h1>Some text</h1>
</div>
<div class="element" id="element-4">
<h1>Some text</h1>
</div>
</div>
You would need to implement a function that does this
window.scrollTo(x, 0);
where x is the position of the element. You can get that by using
let x = element.getBoundingClientRect().top;

How to change the images based on the range slider?

I am replicating this webpage https://www.modsy.com/project/furniture but the images are not changing based on the range slider
My html code is:
<div class="image mt-3 mb-3">
<img src="../static/images/7.jpg" width="400" height="180">
<img src="../static/images/8.jpg" width="400" height="180">
<img src="../static/images/9.jpg" width="400" height="180">
</div>
<br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="3" class="myslider" id="sliderRange">
<div class="row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p id="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</div>
My JS code:
<script>
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
rangeslider.oninput = function() {
output.innerHTML = this.value;
}
</script>
My CSS code:
<style>
.rangeslider{
width: 50%;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
</style>
Error is : Uncaught TypeError: Cannot read property 'value' of null
Can you say what mistake I had done in my code
You should use the load event or move your script tag before the end of your body tag.
I'm changing the style attribute but the best approach is to use classes to make the code scale nicely.
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>
Your JS code is running too early. The DOM is not ready.
Moving the script tag towards the end of the page will help (as #RyanSparks mentioned above).
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>

How to fix div position in html2canvas

i am trying to make a customized product, and the issue i am getting here is when i customize my product and try to save it or preview it my div position is not the same i set before! printArea is the div which i want as an image.
<style>
#printArea
{
z-index: 1;
height: 330px;
width: 330px;
border: 1px dashed black;
align-items: center;
position: relative;
left: 126;
top: 165;
margin: 20px;
padding: 10px;
overflow: hidden;
}
</style>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
</div>
<img src="<?php echo base_url(); ?>assets/user/img/customTshirt.jpg" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px; top: -350px; "/>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>
<script type="text/javascript">
var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
</script>
</body>
</html>
What i want
http://i.imgur.com/Y8vMf35.png
What i get
http://i.imgur.com/wZt9eDF.png
Flex can be used to center elements:
var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
#printArea {
z-index: 1;
height: 330px;
width: 330px;
border: 1px dashed red;
padding: 10px;
overflow: hidden;
position: absolute;
}
.box{
display: inline-block;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div class="wrapper">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content"
style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
</div>
<img src="https://via.placeholder.com/600" class="" id="mirror"
style="position: relative; width: 600px; height: 600px; left: 13px;"/>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>
var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
.box {
height: 730px;
width: 100%;
border: 1px dashed black;
align-items: center;
float: none;
margin-top: 20px;
padding: 10px;
position: relative;
}
#mirror{
position: absolute;
width: 600px;
height: 600px;
left: 0;
top: 0;
right: 0;
margin: auto;
}
#printArea {
z-index: 1;
height: 330px;
width: 330px;
align-items: center;
position: absolute;
left: 0;
top: 26%;
margin: auto;
padding: 10px;
overflow: hidden;
right: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content"
style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
<img src="https://via.placeholder.com/600" class="" id="mirror"
style="position: relative; width: 600px; height: 600px; left: 13px;"/>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>

How to make all my divs line up together nicely

I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/

Categories