We Keep Coding

On sliding the details of particular position should store in local storage?

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

Vue: How do I generate a new instance of a div with a buttonclick?

I need to create a function that generates a new instance of a specific div (.container in the template) when a button (#addDiv) is clicked. The button should be the only thing visible on the webpage before that. How do I do?
I know that it may be possible to do this with document.appendChild. Is there a better way?
I am using toggle-function that works great, I have included it in the code to give you the whole picture.
Vue
Vue.component('dynamicdDvs', {
template: `
<div>
<div class="headerDiv">
<button class="addDiv" type="button" v-on:click="createDiv">Create</button>
</div>
<div class="container">
<div class="createdDiv">
<h2>I am dynamic!</h2>
<button class="minimize" v-on:click="expand">Make me smal</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv">
<p>I am a smal version of the created div!</p>
<button class="maximize" v-on:click="expand">Expand me</button>
</div>
</div>
</div>
`,
data:function () {
return {
displayDiv: false
}
},
methods: {
expand: function () {
this.displayDiv = !this.displayDiv;
},
createDiv: function() {
//The function that creates a new div, with the same code as
//.createdDiv and .createDivMinimized may be placed here
}
}
});
CSS
.headerDiv {
height: 100px;
width: 400px;
background-color: blue;
color: white
}
.createdDiv {
height: 300px;
width: 400px;
background-color: black;
color: white
}
.createdDivMinimized {
height: 300px;
width: 400px;
background-color: red;
color: white
}
HTML
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="parent">
<dynamicDivs></dynamicDivs>
</div>

So what you can do is set a number in data for the number of <div> elements and use v-for with a range. For example
data () {
return {
displayDiv: [false],
divs: 1
}
}
And in your template
<template v-for="n in divs">
<div class="createdDiv">
<!-- snip -->
<button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv[n-1]">
<!-- snip -->
</div>
</template>
and in your methods...
createDiv () {
this.divs++
this.displayDiv.push(false)
}

upload with multiple image preview

I am using this source: http://opoloo.github.io/jquery_upload_preview/
until now, I can upload one image with preview.
<style type="text/css">
.image-preview {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background-color: #000000;
color: #ecf0f1;
}
input[type="file"] {
line-height: 200px;
font-size: 200px;
position: absolute;
opacity: 0;
z-index: 10;
}
label {
position: absolute;
z-index: 5;
opacity: 0.7;
cursor: pointer;
background-color: #bdc3c7;
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("image-preview").each(
function(){
$.uploadPreview({
input_field: $(this).find(".image-upload"),
preview_box: this,
label_field: $(this).find(".image-label")
});
}
);
});
</script>
<!--| catatan penting: yang penting action="" & input type="file" name="image" |-->
<form action="upload.php" method="POST" enctype="multipart/form-data">
<div class="image-preview">
<label for="image-upload" class="image-label">+ GAMBAR</label>
<input type="file" name="my_field[]" class="image-upload" />
</div>
<div class="image-preview">
<label for="image-upload" class="image-label">+ GAMBAR</label>
<input type="file" name="my_field[]" class="image-upload" />
</div>
<input type="submit"/>
</form>
then try to add more div class image preview, i want add another button with image preview. i don't want multiple upload with one button.
$(document).ready(function() {$.uploadPreview => use id, of course when change to class and add more div, when upload a button, another button will change. i am confused with the logic. Anyone can help? maybe using array but, i don't know how..

Since upload button is dependent on state of uploadPreview you need to initialize for each div separately to get separate upload buttons.
Change your html like this give each container a class say imgBox
<div class="imgBox">
<label for="image-upload" class="image-label">Choose File</label>
<input type="file" name="image" class="image-upload" />
</div>
.....
....
...
<div class="imgBox">
<label for="image-upload" class="image-label">Choose File</label>
<input type="file" name="image" class="image-upload" />
</div>
..
Now initialize each one using jquery each()
$(".imgBox").each(
function(){
$.uploadPreview({
input_field: $(this).find(".image-upload"),
preview_box: this,
label_field: $(this).find(".image-label")
});
});

I created a simple image uploading index.html file for image uploading and preview.
Needs j-query.No need of extra plugins.
If you have any questions ask me ;)
//to preview image you need only these lines of code
var imageId=idOfClicked;
var output = document.getElementById(imageId);
output.src = URL.createObjectURL(event.target.files[0]);
Check it here:
https://jsfiddle.net/chs3s0jk/6/

I have one better option for the file upload it's easy to use and you can try it.
window.onload = function(){
if(window.File && window.FileList && window.FileReader){
$(document).on("change",'.file', function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("upload-preview");
$("#upload-preview").html("");
if(files.length>5){
$(".file").after("<div class='alert alert-error'><span class='close'></span>Maximum 5 files can be uploaded.</div>");
$(this).val("");
return false;
}
else{
$(".file").next(".alert").remove();
}
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
// if(!file.type.match('image'))
if(file.type.match('image.*')){
if(this.files[0].size < 2097152){
// continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.className = "upload-preview-thumb";
div.style.backgroundImage = 'url('+picFile.result+')';
output.insertBefore(div,null);
});
//Read the image
$('#clear, #upload-preview').show();
picReader.readAsDataURL(file);
}else{
alert("Image Size is too big. Minimum size is 1MB.");
$(this).val("");
}
}else{
alert("You can only upload image file.");
$(this).val("");
}
}
});
$(".file2").change(function(event){
var err=0;
var input = $(event.currentTarget);
var ele = $(this);
var file = input[0].files[0];
var u = URL.createObjectURL(this.files[0]);
var w = ele.attr("data-width");
var h = ele.attr("data-height");
var img = new Image;
img.onload = function(){
if(w){
if(img.width!=w || img.height!=h){
ele.parent().find(".alert").remove();
ele.parent().find(".upload-preview").before("<div class='alert alert-error'>Please upload a image with specified dimensions.</div>");
ele.val("");
}
else{
ele.parent().find(".alert").remove();
}
}
};
img.src = u;
var nh;
if($(this).attr('data-preview')=='full')
nh = (h/w*150)
else
nh=150
var preview = ele.parent().find(".upload-preview");
var reader = new FileReader();
preview.show();
reader.onload = function(e){
image_base64 = e.target.result;
preview.html("<div class='upload-preview-thumb' style='height:"+nh+"px;background-image:url("+image_base64+")'/><div>");
};
reader.readAsDataURL(file);
});
}
else
{
console.log("Your browser does not support File API");
}
}
above code save as one js file like file-upload.js
then link it to your file where you want perview.
i.e.
<script src="js/file-upload.js" type="text/javascript"></script>
use this kind of example for the input type
<input type="file" class="file2" name="page-image" id="page-image"/>
that works on the class that name is "file2" that class you given to the input field that able to create preview.
full structure something like below.
HTML Code you can try
<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
<div class="upload-preview-thumb">
// perview genereate here
// you can display image also here if uploaded throw the php condition in edit image part
</div>
</div>
<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
<div class="upload-preview-thumb">
// perview genereate here
// you can display image also here if uploaded throw the php condition in edit image part
</div>
</div>
CSS
.upload-preview {
border: 1px dashed #ccc;
display: block;
float: left;
margin-top: 10px;
padding: 5px;
}
.upload-preview-thumb {
background-position: 50% 25%;
background-size: cover;
float: left;
margin: 5px;
position: relative;
width: 139px;
}
Hope this works and in future it's helpful for you.
Thanks.

same onclick js function for multiple images

I have a gallery of images. I want to show a loading gif when an image is clicked. I am passing the same onclick function to all the images with their id as below:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading" style="margin-top: -65%; display: none; z-index= 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
This is my js :
function imageClicked(id) {
// alert(id);
document.getElementById("loading").style.display = ""; // to display
//alert(loading);
return true;
}
var FirstLoading = true;
function Restoresmallimage() {
if (FirstLoading) {
FirstLoading = false;
return;
}
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = Restoresmallimage;
For the first image its working fine.
But issue is when I am clicking on second image, gif is running on first image and not on the second one. How to resolve this issue? I had defined loading id in each div image.

I think the problem is you never move imagepreloader.gif. Here is my solution to have only one imagepreloader.gif for all images:
HTML:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
CSS:
div {
display: inline-block;
position: relative;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JavaScript:
function constructImagePreloader() {
'use strict';
var imagePreloader = document.createElement('img');
imagePreloader.setAttribute('src', 'images/imagepreloader.gif');
imagePreloader.setAttribute('alt', 'loading...');
imagePreloader.setAttribute('id', 'loading');
return imagePreloader;
}
function imageClicked(id) {
document.getElementById(id).appendChild(constructImagePreloader());
return true;
}
Tell me if it suits your needs. We could go further with code optimization but I wanted to stay close from your code for now. For instance: we could remove the image preloader from the clicked image if another image is clicked.

Try this if it will work,
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading1" style="margin-top: -65%; display: none; z-index:9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
<div id="loading2" style="margin-top: -65%; display: none; z-index: 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
And your script will be like this;
function imageClicked(id) {
// alert(id);
var loadingId = $(id).replace('smallimage','loading');
document.getElementById(loadingId).style.display = "block"; // to display
//alert(loading);
return true;
}

jQuery an element with for a url

I have 3 divs with data-image="1" data-image="2" data-image="3".
And I have variable $img_nubmer.
I need to take the div's background-image url from element with data-image = $img_nubmer.
Something like $url = $("'.img[data-image="+$img_number+"']").css("background-image")
How could I do that please?

I would try
$img_number = 5; // just an example
$url = $("img[data-image='"+$img_number+"']").css("background-image"); // grab the background property
So for a full example:
window.getURL = function() {
$img_number = $('[type="number"]').val();
$url = $("[data-image='" + $img_number + "']").css("background-image");
$url = $url.replace('url(', '').replace(')', ''); // lose the extra details
alert($url);
}
div.image {
background-image: url('http://graph.facebook.com/205500370/picture?type=large');
height: 150px;
width: 150px;
}
div {
display: inline-block;
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image" data-image="5"></div>
<div>
<input type="number" value="5" />
<br>
<button onclick="getURL()">Get Image URL</button>
</div>

You can add the variable into your selector as such:
var img_number = 1;
$('img[data-image="'+img_number+'"]');
View Codepen example