I'm looking for a way to create a dynamic episodes list in html css javascript that understand in which episode the user is and add the "active" class to the li element of the list.
Let me show you an exemple :
what i want
Thanks you :)
This might help. Call the method changeEpisode when the video ends.
document.getElementById("video").addEventListener("ended", changeEpisode, false);
function changeEpisode()
{
var elem = $("#episode_list li.active");
$(elem).removeClass("active");
$(elem).next().addClass("active");
$("#video").attr("src",$(elem).next().data("src"));
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<video height="200px" width="200px" controls autoplay src="https://www.w3schools.com/tags/movie.mp4" id="video"></video>
<ul class="list-group" id="episode_list">
<li class="list-group-item active" data-src="https://www.w3schools.com/tags/movie.mp4">Episode 1</li>
<li class="list-group-item" data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4">Episode 2</li>
<li class="list-group-item" data-src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">Episode 3</li>
</ul>
Related
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;
}
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
Once an li is clicked I want to load a separate html page with content on the main index page.
HTML
<nav>
<ul>
<li>Planet 1</li>
<li>Planet 2</li>
<li>Planet 3</li>
<li>Planet 4</li>
</ul>
</nav>
So once one of the links is clicked I want the jquery to load the content on the same page.
$(document).ready(function(){
// load("location-to-your-file", function(){})
//var indexCatch = $('ul li').click(function(){ alert($(this).index()); });
$("li").click(function(){
$("main").load("tab-1.html", function(){
// Instead of creating another selector combining it from $(this).hide()
// $($(this).hide()).fadeIn(1000);
// you can chain the methods:
$(this).hide().fadeIn(1000);
});
});
Its working for me,
save this file example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script>
</body>
</html>
save this file tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>
You're problem is probably the fact that you are using <a> tags
you don't need them
<nav>
<ul>
<li data-href="tab-1.html">Planet 1</li>
<li data-href="tab-2.html">Planet 2</li>
<li data-href="tab-3.html">Planet 3</li>
<li data-href="tab-4.html">Planet 4</li>
</ul>
</nav>
$(document).ready(function(){
$("li").click(function () {
$("main").load(this.dataset.href, function(){
$(this).hide().fadeIn(1000);
});
});
});
Here we get the value of that specific link href attribute, and inject it into the load function
NOTE: As I can't show a demo of it using fiddle or S.O code panel, here is a DEMO showing how this code works
$(document).ready(function () {
$("nav a").each(function () {
$(this).click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
$("main").load(href).hide().fadeIn(1000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
<ul>
<li>Planet 1
</li>
<li>Planet 2
</li>
<li>Planet 3
</li>
<li>Planet 4
</li>
</ul>
</nav>
<main></main>
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>
Let's say I have a simple list:
<ul>
<li class="notClicked">1</li>
<li class="notClicked">2</li>
<li class="notClicked">3</li>
</ul>
Can I onClick of one "li" change styles of all li's except the one clicked?
So if I click "li" number 2, then the list will look like:
<ul>
<li class="notClicked">1</li>
<li class="clicked">2</li>
<li class="notClicked">3</li>
</ul>
So if I click on first "li" then it will have clicked class, while others will be notClicked.
In case you want to play with it, here's jsbin: http://jsbin.com/ucuca4/edit
Make either in Prototype or plain JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='Clicked';
Lst=obj;
}
/*]]>*/
</script>
<style>
.notClicked {color: black}
.Clicked {color: red}
</style>
</head>
<body>
<ul>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">1
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">2
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">3
</a>
</li>
</ul>
</body>
</html>
Why change the style of the other? You may want to change the style of the clicked element.
If so, you can use jQuery for that
Example:
<li class = "notClicked">element 1</li>
<li class = "notClicked">element 2</li>
<li class = "notClicked">element 3</li>
$('.notClicked').click(function()
{
$(this).addClass('active');
});
<script>
function changeClass(){
document.getElementById("idElement").setAttribute("class", "Clicked");
}
</script>
<ul>
<li class="notClicked" >1</li>
<li class="notClicked" onClick="changeClass()" id="idElement">2</li>
<li class="notClicked">3</li>
</ul>