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>
Related
I am trying to toggle a ul but getting an error saying that "slideToggle is not a function". The menu is used to toggle through a list.
$(function() {
$("li ul").hide();
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a").after('<span class="children"> > </span>');
$("li a").click(function () {
console.log($(this).text());
});
$("span.children").click(function() {
$(this).find('ul').first().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul class="test">
<li>Black b</li>
<li>Black c</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Basically when users click the >, the submenu should be shown.
I cannot reproduce the slideToggle is not a function error you mention.
However your code will not work, because this line is incorrect:
$(this).find('ul').first().slideToggle();
The ul element is a sibling, not a child of the span.children element. Changing it to the following resolves the issue:
$(this).siblings('ul').first().slideToggle();
$(function() {
$("li ul").hide();
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a").after('<span class="children"> > </span>');
$("li a").on('click', function () {
console.log($(this).text());
});
$("span.children").on('click', function() {
$(this).siblings('ul').first().slideToggle();
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul class="test">
<li>Black b</li>
<li>Black c</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
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>
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>
I want to create a simple menu using jquery.
I want to slideDown the sub <li> elements of another <li> (containing a ul) on mouseover of the parent element and slide them up if the mouse goes out of them.
At the moment I use this code but it does not work it slidesUp the child elements if I leave the parent element.
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function showSubLi() {
//alert("Hallo");
if (!$('#first').children().is(':visible')) {
$('#first').children().slideDown();
}
}
function hideSubLi() {
//alert("Hallo");
if ($('#first').children().is(':visible')) {
$('#first').children().slideUp();
}
}
</script>
<body>
<ul>
<li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
<ul style="background-color: Green" onmouseout="hideSubLi();">
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$('#first').children().hide();
});
</script>
What's wrong whith this code?
I'm going to guess that this will get you close to what you want:
$('ul > li').hover(function(){
$(this).children('ul').slideToggle();
}).children('ul').hide();
http://www.jsfiddle.net/yijiang/De54m/
Instead of inline events, which should not be used under almost any circumstances, we can use jQuery's event handling capability with the hover() function as well as slideToggle() to do away with the multiple is(':visible') calls.
The problem is that the line $('#first').children() refers to the ul element instead of the li elements. Instead, you could use $('#first>ul>li'), which refers to the li elements.
Your corrected code:
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function showSubLi() {
//alert("Hallo");
if (!$('#first>ul>li').is(':visible')) {
$('#first>ul>li').slideDown();
}
}
function hideSubLi() {
//alert("Hallo");
if ($('#first>ul>li').is(':visible')) {
$('#first>ul>li').slideUp();
}
}
</script>
<body>
<ul>
<li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
<ul style="background-color: Green" onmouseout="hideSubLi();">
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$('#first>ul>li').hide();
});
</script>