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>
Related
I want to use scroll to add and remove a class of Tabs
When I scroll down the page, then all tab switch to active. Then, when I scroll up the page, the all tab switched to inactive.
In the current condition, when I scroll down the page, it removes the current tab class, and when I scroll up the page, it adds the active class to the first tab. But, it's not what I want. I want it when I scroll down it moves to the next tab, when I scroll up it moves to the previous tab. I think I should use the if else tab.
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
firstTab(tabs[0]); //Already remove the ready and callback
firstContent(content[0]);
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
for (let i = 0; i < tabs.length; i++) {
window.addEventListener('scroll', () => tabScroll(i)); //Already remove the multiple scroll listeners in a loop. But, idk whether it's right or not
}
function tabClick(currentTab) {
//Remove Active Class
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function tabScroll(currentTab) {
if(document.documentElement.scrollTop > 0) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
}
})
.container {
width: 100vw;
height: 400px;
}
.tabs {
display: flex;
height: 65px;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 10px;
cursor: pointer;
}
.tab-active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100%;
margin-top: 5px;
height: calc(100% - 65px);
}
.content-item {
width: 100%;
height: 100%;
display: none;
padding: 0px;
border: none;
position: absolute;
}
.content-wrapper1 {
width: 100%;
height: 100%;
}
.content-wrapper2 {
width: 100%;
height: 100%;
}
.content-wrapper3 {
width: 100%;
height: 100%;
}
.content-iframe {
height: 100%;
width: 100%;
}
.content-show {
display: flex;
animation-name: fade-out;
animation-duration: 2.5s;
}
#keyframes fade-out {
0% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
.content-active {
display: flex;
border: none;
justify-content: center;
height: 100%;
animation-name: fade-in;
animation-duration: 2.5s;
}
#keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0.01;
}
100%{
display: block;
opacity: 1;
}
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this guys. Thank you so much..
as you can see I have one main image and another image below the main one but when I click any of them my main image doesn't change to any of them what can be the issue, please identify. if you can edit and send me an amende code will be helpful pls.I don't see any sort of error maybe you can find out , to be honest, i am not techy doing this to learn something new
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group{
display: flex;
justify-content: space-between;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up, .down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover, .down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"]{
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked + label{
background-color: orangered;
color: white;
}
input[type="radio"]:checked + label:before{
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
</script>
<script>
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
basically your script works, you just need to move your script (the one with the images onclick functions) to the bottom of your file, that way the html dom elements load on the page before the script does allowing it to attach the onclick event functions to the dom elements.
You're trying to retrieve the img element with id "MainImg" which doesn't yet exist since your javascript code loads before your html code, so you get something like MainImg[0] is undefined... Try to put your last script (preferably all scripts) just before the closing body tag
i have created this slider separate from your code just to show you an easy way to make one
i have used tailwind here
here's an example below hope it will help
var main = document.querySelector(".main"),
big = main.querySelector(".big"),
smalls = main.querySelectorAll(".each")
big.setAttribute("src",smalls[0].getAttribute("src"))
smalls.forEach(each=>{
each.onclick = function(){
smalls.forEach(ss=>ss.classList.remove("active"))
each.classList.add("active")
big.setAttribute("src",each.getAttribute("src"))
}
})
.active{opacity:1 !important;border:3px solid gray;}
.each{opacity: 0.5;}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="main">
<img class="big w-50">
<div class="smalls flex">
<img class="each cursor-pointer w-16 active" src="https://images.unsplash.com/photo-1557673272-b16d3b6c5a58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-6ef51494f677?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-89e58247f2d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1439668462223-e88f0ad95063?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
I came across this website's work page and would like to recreate the xray effect of each of the card element.
Here's my code for the xray effect: https://codepen.io/carljustineoyales/pen/yLMEVYd
HTML
<section class="banner">
<h1>this is a banner page</h1>
</section>
<section class="projects" id="projects">
<div class="cardlist" >
<div class="cardlist__grid" >
<div class="card" id="card" onmouseover="setSize()" onmouseout="resetSize()">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card" id="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
<div class="cardlist--skeleton" id="skeleton">
<div class="cardlist--skeleton--bg"></div>
<div class="cardlist__grid">
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
</section>
</body>
SCSS
* {
margin: 0;
padding: 0;
}
.banner {
height: 100vh;
}
.projects {
max-width: 1440px;
width: 100%;
margin: 100px auto;
// padding: 100px 0;
position: relative;
}
.cardlist {
width: 100%;
color: #000;
&__grid {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&--skeleton {
--x: 0;
--y: 0;
--size: 0px;
clip-path: circle(var(--size) at var(--x) var(--y));
user-select: none;
pointer-events: none;
// clip-path: circle(100px at 0 0);
// clip-path: circle(300px at 0% 0%);
transition: clip-path 0.1s ease;
&--bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #838383;
z-index: -1;
}
width: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 1;
background-color: #838383;
}
}
.card {
padding: 50px;
&__thumbnail {
width: 500px;
height: 644px;
background-color: #838383;
&--black {
background-color: #000;
}
}
}
JS
let mouseX=0
let mouseY=0
let size = 0;
const projects = document.querySelector('#projects');
function setSize() {
size = 200
skeleton.style.setProperty('--size', size + "px");
}
function resetSize() {
size = 0
skeleton.style.setProperty('--size', size + "px");
}
function updateCoordinates(event) {
mouseX = event.pageX - projects.offsetLeft ;
mouseY = event.pageY - projects.offsetTop ;
skeleton.style.setProperty('--x', mouseX + "px");
skeleton.style.setProperty('--y', mouseY+ "px");
}
The problem is that I can't seem to find a solution for the updating cursor position while scrolling, also the hover animation became laggy when you open the console. Is there a way to update the cursor position on scroll and why the animation became laggy when the console is open.
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>
I'm trying to get file upload working for 3 different div ids (each with their own respective preview), I had come close to it working but the first div replaces the other two divs content.
I'm not sure what I'm doing wrong with the Javascript (not very well versed in js), any help would be extremely appreciated!
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#pic1").live("change",function(){
readURL(this, "#preview1");
});
$("#pic2").live("change",function(){
readURL(this, "#preview2");
});
$("#pic3").live("change",function(){
readURL(this, "#preview3");
});
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline;
margin-top: 25px;
position: relative;
}
#preview_image {
display: inline;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview1" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic1" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview2" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic2" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview3" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic3" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
the "live" method is deprecated, instead change the code to:
$("#pic1").on("change",function(){
readURL(this, "#preview1");
});
$("#pic2").on("change",function(){
readURL(this, "#preview2");
});
$("#pic3").on("change",function(){
readURL(this, "#preview3");
});