This is a profile picture issue. When I set an image for the first it's working fine and when I'm trying to select an image for the second time but i didn't select it and cancel it after all process it doesn't show image in the final outcomes/output.
<!--HTML-->
<div class="modal-body">
<div class="row" style="padding-top: 4em; min-width: 1000px; max-width: 1200px;">
<div class="col s4" style="height:100%">
<div class="row row-zero grey lighten-3" style="margin-top: 50px; padding:10px; width: 300px; ">
<div class="row row-zero" style="border: 1px solid rgba(50,50,50,0.5); padding:10px;">
<label for="create-group-pic">
<span id="group-image-holder" >
<img id="group-image-uploader" class="image-circle" alt="" src="https://s3.ap-south-1.amazonaws.com/airitdata/default/ic_default_group_pic.png" style="padding:25px 5px; width:100%; height:300px;">
</span>
</label>
<input id="create-group-pic" name="profile_pic" type="file" accept="image/*,capture=camera" style="width:1px; height:1px; display:none;">
<span class="col s12 grey lighten-2" style="text-align: center; padding:10px;">Group Profile Picture</span>
</div>
</div>
</div>
var img1;
$("#create-group-pic").on('change', function() { if($(this)[0].files.length!=null){ img1=this.value; // console.log(img1) if (typeof (FileReader) != "undefined") {
var image_holder = $("#group-image-holder"); image_holder.empty();
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src" : e.target.result,
"class" : "image-circle",
"id" : "group-image-uploader",
"style" : "width: 99%; height: 300px; overflow:hidden;"
}).appendTo(image_holder); }
image_holder.show(); reader.readAsDataURL($(this)[0].files[0]); } else {
alert("Your browser doesn't support file upload. Please update your browser. FileReader not supported.."); } } else{
var img= $('#group-image-uploader img').attr('src',img1);
console.log(img);
} });
Related
I have some tabs and there are several buttons in the third tab which display different images when clicked. The problem is that when any of these buttons are clicked and an image is displayed, all the other images on my web page disappear. Perhaps this is because I'm not appending the images to that particular tab?
What do I need to add/change in my code to fix this issue?
// tabs
function selectTab(tabIndex) {
document.getElementById('tab1Content').style.display = "none";
document.getElementById('tab2Content').style.display = "none";
document.getElementById('tab3Content').style.display = "none";
document.getElementById('tab4Content').style.display = "none";
document.getElementById('tab1').classList.remove("active");
document.getElementById('tab2').classList.remove("active");
document.getElementById('tab3').classList.remove("active");
document.getElementById('tab4').classList.remove("active");
document.getElementById('tab' + tabIndex + 'Content').style.display = "block";
document.getElementById('tab' + tabIndex).classList.add("active");
}
// Colour Swatch
function showImage(el, id = 'tab3Content') {
var images = document.getElementById('img1');
Array.from(images).forEach(i => i.style.display = 'none');
var img = document.createElement('img');
img.style.marginTop = '-50px'
img.setAttribute("width", "850");
img.setAttribute("height", "500");
img.setAttribute("src", "");;
if(el.getAttribute('data-id') == '1'){
}
else if(el.getAttribute('data-id') == '2'){
img.setAttribute("src", "");;
}
else if(el.getAttribute('data-id') == '3'){
img.setAttribute("src", "");;
}
else if(el.getAttribute('data-id') == '4'){
img.setAttribute("src", "");;
}
document.getElementById(id).appendChild(img);
}
.tab {
border-radius: 0.5px;
}
.tabButton {
color: #FFFFFF;
border: 1px solid;
border-color: rgb(45, 68, 117);
border-radius: 0.3em;
color: rgb(45, 68, 117);
margin-top: 50px;
background-color: white;
margin-left: 70px;
padding-left: 100px;
padding-right: 100px;
padding-top: 14px;
padding-bottom: 14px;
margin-right: -75px;
}
<html>
<body>
<button class="tabButton active" id="tab1" onClick="selectTab(1);">Tab1</button>
<button class="tabButton" id="tab2" onClick="selectTab(2);">Tab2</button>
<button class="tabButton" id="tab3" onClick="selectTab(3);">Tab3</button>
<button class="tabButton" id="tab4" onClick="selectTab(4);">Tab4</button>
<br />
<div class="contentTab" id="tab1Content" style="display: block;">
<div class="tabcontent">
<p>tab 1</p>
<img class="img-position" src="">
</div>
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
<p>Tab 2</p>
<img src="">
</div>
<div class="contentTab colour-swatch" id="tab3Content" style="display: none;">
<img id="img1">
<button class="colour-btn colour-btn--1"data-id="1" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--2" data-id="2" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--3"data-id="3" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--4"data-id="4" onClick="showImage(this)"></button>
</div>
<div class="contentTab" id="tab4Content" style="display: none;">
<div class="container">
<p>tab4</p>
<img class="img" src=""></div>
</body>
</html>
Simply change var images = document.querySelectorAll('img'); to a more specific selector.
'img' targets every image tag (<img>) on your page.
Perhaps var images = document.querySelectorAll('.img'); is what you want (or '.img-position?) with a dot to point to a class.
I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized My html code is:
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.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 {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.
Are you just trying to remember what the last slide the user viewed is? If so just use the localStorage.setItem() method and utilise the dataset feature to set a flag of each slide.
If I am right in my presumption your on load function would include the following line to default to the first slide:
localStorage.setItem('currentSlide', '1')
Your HTML slides would each have a dataset tag which could be something like:
data-index="1"
Then, in your change slide function you would get the dataset value and update the localStorage parameter:
function changeSlide() {
// ... Whatever code you have...
localStorage.setItem('currentSlide', this.dataset.index);
}
You could also use the sessionStorage instead, if you do not wish for the website to remember the user's last position after they leave the page: https://developer.mozilla.org/en-US/docs/Web/API/Storage
you can save your image using savImage function
html
<img src="../static/images/1.jpg" id="bannerImg" />
js
function saveImage() {
var bannerImage = document.getElementById('bannerImg');
var canvas = document.createElement("canvas");
canvas.width = bannerImage.width;
canvas.height = bannerImage.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(bannerImage, 0, 0);
var dataURL = canvas.toDataURL("image/png");
localStorage.setItem("imgData", dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}
after your process you can get your image from local storage
html
<img src="" id="tableBanner" />
js
function getImage() {
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
}
you must run these two function for your problem
I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>
You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>
From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>
I have a page that generates some draggable elements.
However I noticed that on firefox I cannot get them to drag while on chrome I can.To create a new element i press the create item button.Here is my code
/*
* #param event A jquery event that occurs when an object is being dragged
*/
function dragStartHandler(event){
//e refers to a jQuery object
//that does not have dataTransfer property
//so we have to refer to the original javascript event
var originalEvent = event.originalEvent;
var currentElement = originalEvent.target;
console.log("Hack it");
console.log($(currentElement).data());
//We want to store the data-task-id of the object that is being dragged
originalEvent.dataTransfer.setData("text",$(currentElement).data("task-id"));
originalEvent.dataTransfer.effectAllowed = "move";
}
$(document).ready(function(){
//When a new task/item is creatted it is assigned a unique data attribute which is the task index
var taskIndex = 0;
$(".text-info").addClass("text-center");
$(".createTask").addClass("btn-block").on("click",function(){
//Find the category whict this button belongs to
var currentCategory = $(this).parent(".box");
var categoryId = currentCategory.data("category");
//Create a new task
var task = $("<div class='list-group-item droppable' draggable='true' data-task-id="+taskIndex+"></div>");
//Assign a data-task-id attribute and set its text
task.text("Data id = "+taskIndex);
taskIndex++;
task.appendTo($(this).prev(".dropTarget"));
});
$(".droppable").on("dragstart",dragStartHandler);
$(".dropTarget").on("dragenter",function(event){
event.preventDefault();
event.stopPropagation();
$(this).addClass("highlighted-box");
}).on("dragover",false)
.on("drop",function(event){
event.preventDefault();
event.stopPropagation();
var originalEvent = event.originalEvent;
//Retrieve the data-task-id we stored in the event
var taskId = originalEvent.dataTransfer.getData("text");
console.log(taskId);
//The object that will be moved is determined by the id we stored on the event parameter
var objectToMove =$("body").find(`[data-task-id='${taskId}']`);
console.log(objectToMove);
var category = $(this).parent(".box").data("category");
objectToMove.data("category-group",category);
//Remove the square object from its previous position
//and append it to the current dropTarget
$(objectToMove).appendTo(this);
return false;
});
});
.highlighted-box {
box-shadow: 0 0 4px 4px #EBE311;
}
.dropTarget {
height: 10em;
width: 10em;
/* border:2px solid; */
margin: auto;
}
.dropTarget .droppable{
margin: auto;
position: relative;
top: 20%;
}
.droppable {
background-color: dodgerblue;
/* height: 6em;
border-radius: 5px; */
/* box-shadow: 0 0 5px 5px #3D0404; */
/* width: 6em; */
}
#square2{
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
<div class="jumbotron intro text-center">
<h1>Drag and drop demo</h1>
</div>
<div class="row">
<div class="col-md-3 box" data-category="0">
<h1 class="text-info">Ideas</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="1">
<h1 class="text-info">Wornking on</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="2">
<h1 class="text-info">Completed</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
<div class="col-md-3 box" data-category="3">
<h1 class="text-info">Accepted</h1>
<div class="dropTarget list-group">
</div>
<div class="btn btn-info createTask">
Create item
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="square" draggable="true" data-index = "0" class="droppable list-group-item"></div>
</div>
<div class="col-md-6">
<div id="square2" class="droppable list-group-item" draggable="true" data-index="1"></div>
</div>
</div>
</div>
</body>
The problem with my code was the event delegation.
To fix it I did the following:
$("body").on("dragstart",".droppable",dragStartHandler);
Here you can find more more here
I'm working on a kind of puzzle game with HTML5 drag and drop api. I build a grid of 3 rows with 4 col per row giving me twelve squares. All but one of the squares contains some numbers from 1 to 11. The empty square is meant to be the dropzone i.e where any square can be dragged into.
When an element is dragged the dataTransfer.setData is set to the id of the element being dragged while ondrop event gets the data using dataTransfer.getData() result of which is used to query the dom for the element being dragged, then cloned after which the dropzone is now replaced with the cloned node. The source from which the dragged element is coming is also replaced with a dropzone.
var squares = document.querySelectorAll(".item");
var dropzone = document.querySelector(".col-lg-3.dropzone");
function startDrag(e){
e.dataTransfer.setData("text", e.target.id);
console.log(e.target)
}
function overDrag(e){
e.preventDefault();
e.target.classList.toggle("dropzone-active");
}
function leaveDrag(e){
e.preventDefault();
e.target.classList.toggle("dropzone-active");
}
function dropItem(e){
e.preventDefault();
var data = e.dataTransfer.getData("text");
var draggedElem = document.getElementById(data)
var clone = draggedElem.cloneNode(true);
var emptyzone = dropzone.cloneNode(false);
emptyzone.className = "col-lg-3 dropzone";
draggedElem.parentNode.replaceChild(emptyzone,draggedElem);
clone.id = data;
e.target.parentNode.replaceChild(clone, e.target);
}
for(var i=0; i<squares.length; i++){
squares[i].addEventListener("dragstart", startDrag, false);
}
dropzone.addEventListener("dragover", overDrag, false);
dropzone.addEventListener("dragleave", leaveDrag, false);
dropzone.addEventListener("drop", dropItem, false);
#gameZone{
width:800px;
height:500px;
background-color: rgba(0,0,0,.5);
margin: 0 auto;
padding:15px;
position:relative;
}
.item,
.dropzone{
background-color:red;
margin-right:10px;
margin-bottom:15px;
width:100px;
height:100px;
font-size: 2em;
color:#fff;
text-align:center;
}
.drag-active{
position:absolute;
z-index: 10;
}
.dropzone-active{
border:dashed 3px white;
}
.dropzone{
background-color:rgba(255,255,255,.6);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="gameZone">
<div class="row">
<div class="col-lg-3 item" id="one" draggable="true">1</div>
<div class="col-lg-3 item" id="three" draggable="true">3</div>
<div class="col-lg-3 item" id="two" draggable="true">2</div>
<div class="col-lg-3 item" id="four" draggable="true">4</div>
</div>
<div class="row">
<div class="col-lg-3 dropzone"></div>
<div class="col-lg-3 item" id="five" draggable="true">5</div>
<div class="col-lg-3 item" id="six" draggable="true">6</div>
<div class="col-lg-3 item" id="nine" draggable="true">9</div>
</div>
<div class="row">
<div class="col-lg-3 item" id="seven" draggable="true">7</div>
<div class="col-lg-3 item" id="eight" draggable="true">8</div>
<div class="col-lg-3 item"id="eleven" draggable="true">11</div>
<div class="col-lg-3 item" id="ten" draggable="true">10</div>
</div>
</section>
The problem now is that the first drag and drop action is successful, however, trying to drag a new element in the new dropzone doesn't work, it just doesn't recognize the ondragenter, ondragleave, ondragover and the drop events anymore.
You can create a function to set dropzone variable, attach dragover, dragleave, drop events to current dropzone element. Within drop event listener call function passing data to attach dragstart event to element currently having id data.
var squares = document.querySelectorAll(".item");
var dropzone;
//= document.querySelector(".col-lg-3.dropzone");
function startDrag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function overDrag(e) {
e.preventDefault();
e.target.classList.toggle("dropzone-active");
}
function leaveDrag(e) {
e.preventDefault();
e.target.classList.toggle("dropzone-active");
}
function dropItem(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
var draggedElem = document.getElementById(data)
var clone = draggedElem.cloneNode(true);
var emptyzone = dropzone.cloneNode(false);
emptyzone.className = "col-lg-3 dropzone";
draggedElem.parentNode.replaceChild(emptyzone, draggedElem);
clone.id = data;
e.target.parentNode.replaceChild(clone, e.target);
setResetDND(data);
}
for (var i = 0; i < squares.length; i++) {
squares[i].addEventListener("dragstart", startDrag, false);
}
function setResetDND(id) {
dropzone = document.querySelector(".col-lg-3.dropzone");
dropzone.addEventListener("dragover", overDrag, false);
dropzone.addEventListener("dragleave", leaveDrag, false);
dropzone.addEventListener("drop", dropItem, false);
if (id) {
document.getElementById(id)
.addEventListener("dragstart", startDrag)
}
}
setResetDND();
#gameZone {
width: 800px;
height: 500px;
background-color: rgba(0, 0, 0, .5);
margin: 0 auto;
padding: 15px;
position: relative;
}
.item,
.dropzone {
background-color: red;
margin-right: 10px;
margin-bottom: 15px;
width: 100px;
height: 100px;
font-size: 2em;
color: #fff;
text-align: center;
}
.drag-active {
position: absolute;
z-index: 10;
}
.dropzone-active {
border: dashed 3px white;
}
.dropzone {
background-color: rgba(255, 255, 255, .6);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="gameZone">
<div class="row">
<div class="col-lg-3 item" id="one" draggable="true">1</div>
<div class="col-lg-3 item" id="three" draggable="true">3</div>
<div class="col-lg-3 item" id="two" draggable="true">2</div>
<div class="col-lg-3 item" id="four" draggable="true">4</div>
</div>
<div class="row">
<div class="col-lg-3 dropzone"></div>
<div class="col-lg-3 item" id="five" draggable="true">5</div>
<div class="col-lg-3 item" id="six" draggable="true">6</div>
<div class="col-lg-3 item" id="nine" draggable="true">9</div>
</div>
<div class="row">
<div class="col-lg-3 item" id="seven" draggable="true">7</div>
<div class="col-lg-3 item" id="eight" draggable="true">8</div>
<div class="col-lg-3 item" id="eleven" draggable="true">11</div>
<div class="col-lg-3 item" id="ten" draggable="true">10</div>
</div>
</section>