I'm creating some web pages for an escape game. They mostly serve to gather responses and check if they are correct. In this case, it is a letter to put in the right order. The sorting script was taken from Codepen, then I've modified some JavaScript to monitor the if/else condition. If it is wrong, you loose a life. The code does that is the answer is wrong, it deletes one of the four images representing the life.
I've searched everywhere how to build a life system, so I tried some theories I've made in my mind, but I'don't have a good understanding of JavaScript yet to achieve what I want to do.
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
function checkOrd() {
var life = document.getElementById('life');
var items = $('#sortable li').map(function() {
return $.trim($(this).attr('id'));
}).get();
var itsort = $('#sortable li').map(function() {
return $.trim($(this).attr('id'));
}).get();
<!-- console.log(items); -->
<!-- console.log(itsort); -->
itsort.sort();
if (JSON.stringify(items) == JSON.stringify(itsort))
alert("Right order!");
else
life.parentNode.removeChild(life);
};
<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<img id="life" src="life.png"><img id="life" src="life.png"><img id="life" src="life.png"><img class="life" src="life.png"> </div>
<div class="Lettre">
<ul id="sortable">
<li class="intro">INTRO TEXT</li>
</br>
<li class="partie" id="3">TEXT </li>
<li class="partie" id="2">TEXT </li>
<li class="partie" id="4">TEXT </li>
<li class="partie" id="1">TEXT </li>
<li class="outro" id="5">ENDING TEXT</li>
</ul>
</div>
<div class="confirmbutton" style="display: flex !important;justify-content: center !important">
<button id="confirm" onclick="checkOrd();">Confirmer</button>
</div>
</html>
Is there a better way to handle this? If I work like that, I still haven't found a way to report the remaining life in the next pages.
This is basically how you can do it:
function removeLife(){
$(".life").last().remove();
}
function countLives(){
return $(".life").length;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
#lives{
padding:0;
}
.life{
display: inline;
}
</style>
<body>
<ul id="lives">
<li class="life">Life 1</li>
<li class="life">Life 2</li>
<li class="life">Life 3</li>
<li class="life">Life 4</li>
</ul>
<button onclick="removeLife()">Remove a life</button>
<button onclick="alert(countLives())">Get remaining lives</button>
</body>
</html>
You can then check how many lives are left with something like
function countLives(){
return $(".life").length;
}
Related
I have the following dropdown list as a part of my project:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="rem">CS 520</li>
<li class="rem">CS 530</li>
<li class="rem">CS 571</li>
<li class="rem">CS 575</li>
</ul>
</div>
When i click on any of the li, i want to popup (not alert) a box containing textarea (to submit comments) and SUBMIT, CANCEL and RESET buttons.
I am unable to figure this out using JavaScript (or jQuery). Is there any way this can be achieved? I can find people giving examples where they do the similar problem with an alert, but I need to do it with a simple popup box.
There is somewhat similar problem's solution on this link ; But the JS code is too complex I guess. Thanks
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Check this and modify the code for list
Check this code and correct accordingly, If will click on any li popup dialog will open.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<!-- content -->
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
</div>
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li><a id="details" href="#">View details</a></li>
<li><a id="share" href="#">Share</a></li>
</ul>
</div><!-- /popup-menu -->
</div>
<script>
var currentId = 0;
var baseURL = "person.php?id=";
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
</script>
</body>
</html>
For more support and help , go through by giving this link in jsFidle Click Here 1 or check here Link 2
Check these links to open your popup and how it workd
I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>
Trying to understand how Javascript and HTML5 work. I have a nav and when you press Part One I'm trying to show Content 1, when you press Part Two..etc. I have tried a couple things, and I am clearly not understand the .next properly, but I can only get it to show the first element, but when I press Part Two, Content Two doesn't show. I guess I am visualizing it wrong, instead of .first(), .next made sense to me since I feel like that would just get the next element. Anyways, here's some code, thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 6 | jQuery Usability </title>
<link rel="stylesheet" href="stylesheet.css">
<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helpful for older Blackberries -->
<meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
<meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->
<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('ul').hide();
$('a.btnDown').click(function() {
$('nav>ul').fadeIn(200);
}); //closes a.btnDown
$('a.contentDown').click(function() {
$('body>aside>ul').first().fadeIn(200);
}); //closes contentDown
}); //closes .ready()
</script>
</head>
<body>
<nav>
<h1><a class="btnDown" href="#"> Main Menu </a></h1>
<ul>
<li><a class="contentDown" href="#"> Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<aside>
<ul>
<li> Content 1 </li>
</ul>
<ul>
<li> Content 2 </li>
</ul>
<ul>
<li> Content 3 </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>
<figure>
<!-- PUT TV IMAGE HERE -->
</figure>
</body>
</html>
With the given markup, the easiest solution is to work with the index of the elements as shown below
$(document).ready(function () {
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(200);
}); //closes contentDown
}); //closes .ready()
Demo: Fiddle
You can use:
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
});
$('a.contentDown').click(function () {
var idx = $(this).index('.contentDown');
$('body>aside>ul:eq(' + idx + ')').fadeIn(200).siblings('ul').hide();
});
Fiddle Demo
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have a list within a list within a list, the outer list is a section , the next groups items with the same letter, and the third is the items themselves. I want to be able to close/open these lists, I've made a couple of attempts including one shown in the code below using a style but I cannot get anything to work.
There seem to be various ways to do this, but what is the definitive way to do this. I don't mind using css or javascript, I could even convert the document to html5 if there is an easy way to do it in there. The solution needs to work with recent version of the main browsers, I'm not worried about older browser versions.
This is what I currently have
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<style type="text/css">
.row {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
#media print {
.hide, .show {
display: none;
}
}
</style>
</head>
<body>
<h1>Sections</h1>
<ul>
<li>Summary
</li>
<li>MusicBrainz Summary
<ul>
<li>D
<ul>
<li>Daniel Desnoyers
</li>
<li>David Guetta
</li>
<li>Dev Electric
</li>
<li>Diddy - Dirty Money
</li>
<li>Drake
</li>
</ul>
</li>
<li>E
<ul>
<li>E-40
</li>
<li>Eagles
</li>
<li>Ed Sheeran
</li>
<li>Elton John
</li>
<li>Eminem
</li>
<li>Enrique Iglesias
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
Attempt with Accordian
After changing from using lists to using headings for the outer layer I have managed to get it working for letters with the Musicbrainz summary, but when I repeat for sections within the Discogs summary it has no effect, can I only use Accordian once within a file ?
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script></head>
<body>
<h1>Sections</h1>
<h2>Summary</h2>
<h2>MusicBrainz Summary</h2>
<div id="accordion">
<h3>H</h3>
<div>
<ul>
<li>Hans Zimmer</li>
</ul>
</div>
<h3>T</h3>
<div>
<ul>
<li>The Zombies</li>
</ul>
</div>
</div>
<h2>Discogs Summary</h2>
<div id="accordion">
<h3>H</h3>
<div>
<ul>
<li>Hans Zimmer</li>
</ul>
</div>
</div>
</body>
</html>
You can try something like this using jQuery
Demo : http://jsbin.com/iZOsaVU/1/
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<h1>Sections</h1>
<ul>
<li>Summary</li>
<li id='li1'>MusicBrainz Summary</li>
<div id='ct'>
<ul id='ul1'>
<li id="l1-1">D
<ul id='ul1-1-1'>
<li>Daniel Desnoyers</li>
<li>David Guetta</li>
<li>Dev Electric</li>
<li>Diddy - Dirty Money</li>
<li>Drake</li>
</ul>
</li>
<li>E
<ul>
<li>E-40</li>
<li>Eagles</li>
<li>Ed Sheeran</li>
<li>Elton John</li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
</ul>
</li>
</ul>
</div>
</ul>
jQuery: You can use same trick for other list items as well.
$("#li1").click(function(){
$("#ct").toggle("fold",1000);
});
Explanation : http://codewithlogic.wordpress.com/2013/09/01/creating-tree-view-in-jquery/
Using Accordion
$( "#accordion" ).accordion({
heightStyle: "content",
collapsible:true
});
$( "#accordion1" ).accordion({
heightStyle: "content",
collapsible:true
});
HTML
<h1>Sections</h1>
<h2>Summary</h2>
<h2>MusicBrainz Summary</h2>
<div id="accordion">
<h3>H</h3>
<div>
<ul>
<li>Hans Zimmer</li>
</ul>
</div>
<h3>T</h3>
<div>
<ul>
<li>The Zombies</li>
</ul>
</div>
</div>
<h2>Discogs Summary</h2>
<div id="accordion1">
<h3>H</h3>
<div>
<ul>
<li>Hans Zimmer</li>
</ul>
</div>
</div>
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.