So I have 6 cards on my html. Each one on click need to pop up a modal window (this modal window is the card with more informations, so each modal window is corresponding to one card).
I dont know how to do that. After a day searching on the web I'm here to ask your help.
I have tried to make the html animal_card, and my modal appart. Then all the content will change with php.
And the Javascript need to change the modal window css property to absolute on click.
Someone know how to do that with Javascript ?
HTML :
<div class="animal_card">
<div class="card_title">
<h3>title</h3>
</div>
<div class="card_image">
<img src="image.img" alt="">
</div>
<div class="card_text">
<div class="card_info">
<div class="card_info_age">
<h4>Age</h4>
<p>14</p>
</div>
<div class="card_info_gender">
<h4>Gender :</h4>
<p>Female</p>
</div>
</div>
<h4>Who am I</h4>
<p>Description Text</p>
</div>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="modal-animal">
<h1>Animal Name</h1>
<button class="close" onclick="closeModal()">×</button>
<div><img src="img/greciaprofile.jpg" alt=""></div>
<div class="animal-informations">
<div class="left">
<label for="">Age</label>
<p>14</p>
<label for="">Sexe</label>
<p>Female</p>
</div>
<div class="right">
<label for="">Description</label>
<p>
Text
</p>
</div>
</div>
<div>
<button class="main">Adopt</button>
<button class="secondary">Support</button>
</div>
</div>
</div>
</div>
CSS :
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
.modal-content {
position: absolute;
margin-top: 5rem;
width: 75vw;
background-color: $white;
border-radius: 15px;
}
Javascript :
const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');
const onCardClick = async (e) => {
const card = e.currentTarget;
modal.style.position = 'absolute';
}
cards.forEach(card => card.addEventListener('click', onCardClick));
function closeModal() {
modal[0].style.position = 'none';
}
const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');
const getKeyMap = (modal) => {
if (modal) {
let i;
let keyMap = {};
for (i = 0; i < modal.length; i++) {
const item = modal[i];
const key = item.getAttribute('key');
keyMap[key] = item;
}
return keyMap;
}
return null;
};
const modalMap = getKeyMap(modal);
const onCardClick = async (e) => {
const card = e.currentTarget && e.currentTarget.getAttribute('key') || null;
const selectedModal = modalMap[card] || null;
if (selectedModal) {
selectedModal.style.position = 'absolute';
}
}
cards.forEach(card => card.addEventListener('click', onCardClick));
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
/* position: absolute; */
top: 0;
left: 0;
display: flex;
justify-content: center;
}
.modal-content {
position: absolute;
margin-top: 5rem;
width: 75vw;
background-color: $white;
border-radius: 15px;
}
<div key="5" class="animal_card">
<div class="card_title">
<h3>title</h3>
</div>
<div class="card_image">
<img src="image.img" alt="">
</div>
<div class="card_text">
<div class="card_info">
<div class="card_info_age">
<h4>Age</h4>
<p>14</p>
</div>
<div class="card_info_gender">
<h4>Gender :</h4>
<p>Female</p>
</div>
</div>
<h4>Who am I</h4>
<p>Description Text</p>
</div>
</div>
<div class="bg-modal" key="5">
<div class="modal-content">
<div class="modal-animal">
<h1>Animal Name</h1>
<button class="close">×</button>
<div><img src="img/greciaprofile.jpg" alt=""></div>
<div class="animal-informations">
<div class="left">
<label for="">Age</label>
<p>14</p>
<label for="">Sexe</label>
<p>Female</p>
</div>
<div class="right">
<label for="">Description</label>
<p>
Text
</p>
</div>
</div>
<div>
<button class="main">Adopt</button>
<button class="secondary">Support</button>
</div>
</div>
</div>
</div>
So the direct answer using your example is modal on the onCardClick is returning a collection, not a single element. So selecting the first one modal[0] will fix the position update. I attached an example.
If you are going to show different modals based on the card you click on, you generally need to have a method to track them. Really depends on how you want to do that, based on ids, or index position or so on. Anyways, let me know if this helps.
Related
Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!
<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused
I am making a webpage and I am adding a feature; when you hover on a certain div another div will display a certain text. There are 5 elements I want to be able to hover and display text.
I added this feature but it did not work properly - only the last hoverable div displayed the text. I isolated the elements used and moved them to a sandbox to tweak them. No matter what I do (I got it to work by using a bunch of if statements, but I am trying to remove that so it looks neater), only the last div will display the text.
Here is a fiddle of the working version with the many if statements:
https://codepen.io/SynergyOfLife/pen/qBNJboR
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var isHovered1 = $(`.${dataArray[0]}`).is(":hover");
var isHovered2 = $(`.${dataArray[1]}`).is(":hover");
var isHovered3 = $(`.${dataArray[2]}`).is(":hover");
var isHovered4 = $(`.${dataArray[3]}`).is(":hover");
var isHovered5 = $(`.${dataArray[4]}`).is(":hover");
if (isHovered1) {
$('p').html("TEST")
} else if (isHovered2) {
$('p').html("TEST")
}else if (isHovered3) {
$('p').html("TEST")
} else if (isHovered4) {
$('p').html("TEST")
}else if (isHovered5) {
$('p').html("TEST")
} else {
$('p').html("")
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>
Here is the version I am trying to perfect:
https://codepen.io/SynergyOfLife/pen/VwjELME
setInterval(function(){
var dataArray = ["1","2","3","4","5"]
var i;
for (i = 0; i < dataArray.length; i++) {
var isHovered = $(`.${dataArray[i]}`).is(":hover");
if (isHovered) {
$('p').html("TEST")
} else {
$('p').html("")
}
}
}, 300);
div {
height:100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Only working div?</a>
</div>
<div class="viewer">
<p></p>
</div>
In summary, I am asking for help on how to shorten the number of if statements
Just use the hover() method which accepts two functions, one for mouseenter and one for mouseleave.
var dataArray = ["1", "2", "3", "4", "5"]
var selectors = '.' + dataArray.join(',.');
$(selectors).hover(function() {
// `this` is the element the event occurred on
$('p').html('TEST ' + this.className)
}, function() {
$('p').empty()
})
div {
height: 100px;
width: 100px;
background: blue;
float: left;
}
.viewer {
height: 500px;
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<a>Test</a>
</div>
<div class="2">
<a>Test</a>
</div>
<div class="3">
<a>Test</a>
</div>
<div class="4">
<a>Test</a>
</div>
<div class="5">
<a>Test</a>
</div>
<div class="viewer">
<p></p>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tabbis</title>
<link rel="stylesheet" href="../assets/css/dist/style-default.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
/* Reset */
#import url('https://fonts.googleapis.com/css?family=Quicksand:600&display=swap');
* {
margin: 0;
font-family: quicksand;
}
body {
padding: 4rem;
background: #eee;
#media screen and (max-width: 460px) {
padding: 0;
}
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: blue;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: transparent;
padding: 5px;
right: 0;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 50px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
</head>
<body>
<div data-tabs>
<button>INDEX</button>
<button>NORTH</button>
<button>SOUTH</button>
<button>EXTENSION</button>
</div>
<div data-panes>
<!-- Index Tab -->
<div>INDEX</div>
<!-- North Tab -->
<div>
<!-- NE Tabs -->
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TN</button>
</div>
<div data-panes>
<div>
<div data-tabs>
<button>DNE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
<div data-panes>
<button>DNE JPGs HERE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
</div>
<!-- NW Tabs -->
<div>
<div data-tabs>
<button>DNW</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
<div data-panes>
<button>DNW JPGs HERE</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
</div>
<!-- TN Tab -->
<div>Pane TN</div>
</div>
</div>
<!-- SOUTH -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TS</button>
</div>
<div data-panes>
<!-- SE Tabs -->
<div>
<div data-tabs>
<button>DSE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
<div data-panes>
<button>DSE JPGs HERE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
</div>
<!-- SW Tabs -->
<div>
<div data-tabs>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
<div data-panes>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
</div>
<!-- TS Tab -->
<div>Pane TS</div>
</div>
</div>
<!-- EXTENSION -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TSX</button>
</div>
<div data-panes>
<!-- SEX Tabs -->
<div>
<div data-tabs>
<button onclick="onClick()">DSEX</button>
<button onclick="onClick()">HSEX</button>
<button onclick="onClick()">KSEX</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
<div data-panes>
<button>
<div id="dsex">DSEX</div>
</button>
<button>
<div id="hsex>">HSEX</div>
</button>
<button>
<div id="ksex>"></div>
</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
</div>
<!-- SWX Tabs -->
<div>
<div data-tabs>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
<div data-panes>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
</div>
<!-- TSX Tab -->
<div>Pane TS</div>
</div>
</div>
<script src='script.js'></script>
</div>
<script src="../assets/js/dist/tabbis.es6.js"></script>
<script>
tabbis({
memory: true
});
</script>
</body>
</html>
var elementaries = '../assets/elementaries/';
var elemLoc = [];
var dsex = [
"this.jpg",
"that.jpg"
];
var hsex = [
"this.jpg",
"that.jpg"
];
// ON click of quadrant (DSEX...) do this
function onClick() {
let id = event.srcElement.id; // returns the id of the button (tab 8-0)
let quadrant = document.getElementById(`${id}`).innerHTML.toLowerCase(); // returns the value of the button ie DSEX
getElemLoc(quadrant); // calls function to make an array of elementaries based on quadrant
loadElementaries(quadrant); // loads elementaries under proper tab
}
// Function makes an array of elementaries based on quadrant
var getElemLoc = (q) => {
elemLoc = [];
let elem = window[q];
elem.forEach(function (img) {
let loc = `${elementaries}${q}/${img}`;
elemLoc.push(loc);
})
};
// Loads elementaries to proper div based on quadrant.
var loadElementaries = (quad) => {
for (var i = 0; i < elemLoc.length; i++) {
document.getElementById(`${quad}`).innerHTML = document.getElementById(`${quad}`).innerHTML + `<a class="thumbnail" href="${elemLoc[i]}"><img src="${elemLoc[i]}" width="350px" height="250px" border="0" /><span><img src="${elemLoc[i]}" width="900" height="700" /><br /></span></a> <br />`;
}
};
When going to the tab Extension/East/DSEX my innerhtml code works perfectly, but if I try the hsex tab the inner html in loadElementaries fails. Does anyone have any idea what's going on. Maybe the way the DOM is loading between tabs?
document.getElementById(`${quad}`).innerHTML works for dsex tab but not hsex...
I'm at work so I'm limited to using client side JS/HTML/CSS so nodejs isn't an option unfortunately.
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:
<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>
<div class="row mb-3 mt-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next » </div>
</div>
</div>
My CSS code is:
<style>
.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;
}
</style>
My JS code is:
<script>
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';
});
});
</script>
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.
There is no enough details about what json you want to store in the localStorage so that's why i am giving you the basic idea of how you can store a json in localStorage.
Basically you can't store json in localStorage directly but you can store that json in form of a stringand then converting that string(json) into json. Here is the basic example :
// setting json to localStorage
var jsonToBeStoredInLocalStorae = {
sliderImages = [
{path : 'image-path-here'},
{path : 'image-path-here'}
],
phrase : 'your image phrase'
};
localStorage.setItem('slider_json',JSON.stringify(jsonToBeStoredInLocalStorae ));
When you want to get that json from localStorage so you will do like this
//Here you are getting that json in `string` form from `localStorage` and parsing it to `json`
var localStorageJson = JSON.parse(localStorage.getItem('slider_json'));
In localStorage you can only save text strings, so if you want to save it is only one value per record, you insert a name and value to localStorage, but if you want to save an object, you must transform it to a text string with the function JSON.stringify
I have div with questions
Here is it
Here is code for it
<div class="listdivright">
<div style="height: 80%; width: 100%; overflow: auto">
#foreach (var item in Model)
{
<div class="title" style="margin-top:15px;margin-left:15px; margin-bottom: 10px;">
<img class="click" src="#Url.Content("~/Images/plus_plus.png")" />
<span>
#Html.TextBoxFor(modelItem => item.question, new {#class="testclass", #readonly = "readonly" })
</span>
<a class="click2" style="margin-left:10px;">
<img src='#Url.Content("~/Images/arrow.png")' />
</a>
<a style="margin-left:25px;" href='#Url.Action("Edit", "Questions", new {id = item.QuestionId})'>
<img src='#Url.Content("~/Images/Edit.png")' />
</a>
<a href='#Url.Action("Delete", "Questions", new {id = item.QuestionId})'>
<img src='#Url.Content("~/Images/Delete.png")' />
</a>
</div>
<div class="content" style="margin-left:60px; width: 80%; height: 100px; background: white">
<div style="width: 100%">
<div style="float:left; width: 50%;">
<b>#Html.LabelFor(modelItem=>item.TimeForAnswer)</b>
<b>:</b>
<span>#Html.DisplayFor(modelItem=>item.TimeForAnswer)</span>
</div>
<div style="float:right;width: 50%;">
<b>#Html.LabelFor(modelItem => item.TimeForReady)</b>
<b>:</b>
<b>#Html.DisplayFor(modelItem => item.TimeForReady)</b>
</div>
</div>
<div style="width: 100%; text-align: center;" >
<b>#Html.LabelFor(modelItem => item.Retries)</b>
<b>:</b>
<b>#Html.DisplayFor(modelItem => item.Retries)</b>
</div>
</div>
}
</div>
I use JS to move block to left div
Code of JS script
<script type="text/javascript" >
$('.title').on('click', function () {
$(this).next().toggle();
});
$('.click2').click(function () {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
});
Here is code of left div
<div class="listdivleft">
<div style="height: 80%; width: 100%; overflow: auto">
<div class="title2" style="margin-top: 15px; margin-left: 15px; margin-bottom: 15px;padding-top: 10px">
</div>
</div>
</div>
I need to limit blocks in left div. From 0 to 10.
So it can be 0 or not more than 10
How I can do this?
You can check that if element with class title are less than 10 using length property, in that case only the new html should be appended, something like:
if($(".title").length < 10) {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
}
else {
alert("No more than 10 allowed.");
}
or if title class is reused other places as well on page, then restrict it to current parent element using listdivright class element in combination with closest and find :
if($(this).closest(".listdivright").find(".title").length < 10) {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
}
else {
alert("No more than 10 allowed.");
}
Hope it helps and gives you idea how it can be done.