Hide and display div <li> elements using JS

Hide and display div <li> elements using JS - javascript

The first column is displayed by default. If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...". If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2" .....
This is always nested in 3 layers.
The HTML code have to look like as I wrote in my scource code.
It will not be a menu system.
I do not have any idea how to make this work.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
<div id="page">
<iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
</div>
</body>
</html>
table.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
</div>
....
</div>
....
</div>
</div>
</div>
</body>
</html>
style.css
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}

A solution which builds the concept from first class:
var $sel = $(".First li");
var nbr = $sel.length;
var lastval ="";
$sel.clone().appendTo(".Second").clone().appendTo(".Third");
$(".main div:not([class=First])").hide();
$(document).on("click", "li", function() {
var val = $(this).text();
var l = val.length;
if(lastval == val || l > 3) return;
lastval = val;
switch(val.length){
case 1:
$(".main div").show().last().hide();
$(".Second li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
case 3:
$(".Third").show().find("li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
}
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: left;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>

Basically, this is the scrap code where you can start. It is simple logic. The code is creating HTML and changing the other div's HTML.
$(document).ready(function(){
$('body').on('click', 'a', function() {
var number = $(this).html();
var parent = $(this).parent().parent().attr('class');
var htmlss = '';
var i;
if(parent == 'First'){
$('.Second').html('');
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Second').html(htmlss);
}
else if (parent == 'Second'){
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Third').html(htmlss);
}
});
});
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
</body>
</html>

Here is a pure JavaScript solution. I did not touch the HTML as that was declared forbidden, so I had to come up with some js mumbo jumbo to get the initial layout. Following is a working snippet:
function clickMe(id) {
let query;
if (id.length == 1) {
query = document.querySelector(".S_1");
second.style.opacity = 1;
third.style.opacity = 0;
} else if (id.length == 3) {
query = document.querySelector(".T_1").children[0];
selector = ".T_1.1";
third.style.opacity = 1;
}
[...query.children].forEach((node, i) => {
node.innerText = `${id}.${i + 1}`;
});
}
const hideNotUseful = document.querySelector(".S_2").remove();
const first = document.querySelector(".First");
const thirdChild = document.createElement("li");
thirdChild.innerText = 3;
first.append(thirdChild);
const second = document.querySelector(".Second");
const third = document.querySelector(".Third");
second.style.opacity = 0;
third.style.opacity = 0;
[...first.children, ...second.children[0].children].forEach(node => {
node.addEventListener("click", e => clickMe(node.innerText));
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: center;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</div>
</div>
</div>
</div>
</div>

Related

How to reset my list in my searchbox with only html/css/javascript ( no jquery, etc)?

i have a searchbox with a dropdown menu that filters items from the list when you enter letters. My problem is that when i click the X button, it clears the searchbox like expected but it doesn't reset the list of items under the box. Example : if i type javascript we will see javascript under the box but when i click the X button, it will still be written javascript and not the initial list.
So is there any possible way that i can reset it to the initial list using javascript ? ( NOTE : i cannot use jquery or any frameworks)
Thanks a lot.
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
document.querySelector('.clearable').value = '';
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script src="search.js"></script>
</body>
</html>

You could just reuse the code you have, loop over all of the li elements and re-show them on the myFunction call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
</style>
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script>
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
var myList;
document.querySelector('.clearable').value = '';
myList = document.querySelectorAll(".myList li");
Array.prototype.forEach.call(myList, function(element){
element.style.display = 'list-item';
});
}
</script>
</body>
</html>

jQuery multiple sliders

How can I fix the jQuery code below to have multiple sliders working correctly using CSS class names (not IDs) ?
As you can see in the CodePen it's all over the place and not working as expected. The sliders are not working correctly.
CodePen
HTML
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
CSS
.slider {
position: relative;
width: 80%;
}
.slide {
position: absolute;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity:1;
}
JS
var allSlides = $('.slide');
var activeSlide = 0;
setInterval('autoSlide()', 4000);
$(".slider-next").click(function() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
});
$(".slider-prev").click(function() {
if (activeSlide-1 < 0) {
allSlides.eq(0).removeClass("active");
activeSlide = allSlides.length-1;
allSlides.eq(activeSlide).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide--;
allSlides.eq(activeSlide).addClass("active");
}
});
function autoSlide() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
}

I was unsure what you are doing with the sliders, but I was able to wire up the handlers and get you going. I set an array for the sliders, then at page load I wire up the handlers to the sliders. When the sliders are clicked, I think you want to loop through your index of sliders and set the css classes to active. I did that here. Be aware that the selection of the slider by index might be null. Tailor the answer to your use.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.slider {
position: relative;
width: 80%;
}
.slide {
position: relative;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity: 1;
}
</style>
<script type="text/javascript">
//set the array to the slide div's we have here
var allSlides = document.getElementsByClassName("slide");
var activeSlide = 0;//start at 0
setInterval('autoSlide()', 4000);
$(function () { //when the document is ready, wire up the click functions
$(".slider-next").click(function () {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className =""; //remove any css class on this item
activeSlide = 0;
allSlides[0].className["active"]; //careful, these items maybe null
}
else {
allSlides[activeSlide].className="";
activeSlide++;
allSlides[activeSlide].className="active";
}
});
$(".slider-prev").click(function () {
if (activeSlide - 1 < 0) {
allSlides[0].className ="";
activeSlide = allSlides.length - 1;
allSlides[activeSlide].className= "active";
}
else {
allSlides[activeSlide].className= "";
activeSlide--;
allSlides[activeSlide].className ="active";
}
});
});
function autoSlide() {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className = "";
activeSlide = 0;
allSlides[0].className ="active";
}
else {
allSlides[activeSlide].className = "";
activeSlide++;
allSlides[activeSlide].className ="active";
}
}
</script>
</head>
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
</html>

Js not working and I am fairly new to Js and JQuery. Also there are no error messages

Here is my js, relevant css for photo album, and html. My photo album should automatically cycle between photos or be able to cycle between photos using the next and previous buttons. However neither is working properly. I am not sure if I am referencing js and the jquery library correctly in the html document. I am fairly new to js and jquery so any information on what might be wrong with my code would be helpful. Thank you.
ps. html formatted a bit weird in my post.
$(document).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>

Replace .container div to .img-cont div in your jquery to make it work. Since .container div doesn't exist in your html.
$(document).ready(function() {
var currentIndex = 0,
items = $('.img-cont div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.img-cont div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>

Drag and Drop Code for Mobile Game

I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();

By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:

Accessing Dynamically created elements and id in javascript

I am learning javascript and trying to do this with pure javascript..
I have created an input which when user fill and click on "Add Input Text" it will wrap the text into li tags and also add close button on the each input and add the input content to the div under it, I am using following code..
I am unable to make the close button work which are on the right side of each list items...
Please help.. Thanks
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a#closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

you need to add a onclick event on your x link and pass the element as parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script>
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
function close_click(elem)
{
elem.parentNode.remove();
}
</script>
</body>
</html>
i added close_click function in javascript that is being called in every of your created close button.

Change closebtn from an id to a class, because ids must be unique.
You can then replace the closebtn click handler with a delegated event on document.body:
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
event.target will be the element that has been clicked.
Snippet
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a.closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

You need to add the click handler after creating the close button
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme() {
if (inputDisplay.value == "") {
alert("please put something in the input field.");
} else {
//create a new li
var li = document.createElement('li');
//add the input text to it as text
li.appendChild(document.createTextNode(inputDisplay.value));
//create a new anchor
var a = document.createElement('a');
a.href = "#";
//since id of an element must be unique, use classname
a.className = 'closebtn';
//add the click handler
a.addEventListener('click', closeHandler);
//add the anchor to li
li.appendChild(a);
//add the li to the ul
inputBox.appendChild(li);
}
}
function closeHandler() {
this.parentNode.remove();
}
function clearInput() {
inputBox.innerHTML = "";
}
function delLast() {
if (inputBox.innerHTML === "") {
alert("There is nothing to delete");
} else {
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
.container {
min-height: 400px;
width: 100%;
background-color: #999;
color: #fff;
float: left
}
.input-container {
padding: 10px;
background-color: #777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
}
a.closebtn {
background-color: #8B8B8B;
float: right;
padding: 1px 3px;
margin: 0px;
color: #fff;
text-decoration: none
}
#input-box {
list-style-type: none
}
#input-box li {
color: #FFF;
background-color: #404040;
padding: 5px;
width: 300px;
margin: 0px;
float: left;
clear: both;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick="clickme()">Add input text</button>
<button onclick="clearInput()">clear Input Box</button>
<button onclick="delLast()">Del Last</button>
</div>
<!--input-container -->
<div id="main-content-container">
<ul id="input-box">
</ul>
</div>
<!--input-box -->
<div class="array-div">
</div>
</div>
<!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Hide and display div <li> elements using JS - javascript

Related

How to reset my list in my searchbox with only html/css/javascript ( no jquery, etc)?

jQuery multiple sliders

Js not working and I am fairly new to Js and JQuery. Also there are no error messages

Drag and Drop Code for Mobile Game

Accessing Dynamically created elements and id in javascript

Categories

Resources