In my HTML I have ol and li this is my HTML
and I have script for those links, like when I click on it i kept a alert to check it its not working
$('#namesId ol li').click(function() {
alert('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
</ol>
</div>
click function id not working what is the problem with it.
Try this:
$('#namesId ol').on('click', 'li', function(e){
e.preventDefault();
alert('clicked');
});
As you said li are generated dynamically, You have to use jQuery event-delegation
So do like below:-
$('#namesId ol').on('click',"li",function(e) {
e.preventDefault();
console.log('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
<li class="v">Wildlife</li>
</ol>
</div>
it should be:
$('#namesId ol li:nth-child(1)').click(function() {
alert('clicked');
//ToDo
}); //for first li click
$('#namesId ol li:nth-child(2)').click(function() {
alert('clicked');
//ToDo
}); //for second li click
Below Code working fine.
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
You have indicated a name for the selector #namesId, but it's not defined anywhere.
Put it this way and it will work:
<div id="namesId">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
</div>
Related
This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>
$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>
You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>
I want to implement a menu in my website.
I need to highlight a parent menu while I click on its child menu.
When I click on the parent menu, it is highlighted. But when I click on the child menu then its parent is not highlighted.
Here is my code. Please help me.
<html>
<head>
<script>
$(document).ready(function(){
$(' #menu-wplook-main-menu').find('li a').click(function(){
$(' #menu-wplook-main-menu').find('li a').removeClass('active');
if($(this).closest('ul').hasClass('sub-menu')){
$(this).parents('li ').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<script src="js/base.js"></script>
<div class="wrapper">
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu"class="parent" >
<li class="menu-item">WHO WE ARE
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1">ABOUT FOUNDER</li>
<li class="sub-menu-item2">ABOUT IAB</li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item current">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item4">NEWS & EVENTS</li>
<li class="menu-item5">CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</body>
</html>
here's a working fiddle: http://jsfiddle.net/KPET6/
javascript changes:
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
Try this fiddle
Jquery changes:
$(document).ready(function(){
$('li a').click(function(){
$('li').removeClass('active');
$(this).parents("li").addClass('active')
});
});
CSS changes
#menu-wplook-main-menu li.active > a{
color:#e53b51;
}
Working fiddle: http://jsfiddle.net/WhqxD/1/
JS:
$(document).ready(function(){
$(' #menu-wplook-main-menu li a').click(function(e){
e.preventDefault();
$(' #menu-wplook-main-menu li a').removeClass('active');
$(this).closest('li.menu-item').find("a:eq(0)").addClass('active');
$(this).addClass('active');
});
});
I'm currently trying to make my menu stay when you click on the menu, i mean so that the dropdown menu stays after clicking on it.
That is code i've already tried(Javascript down below), but for some reason it wont work for me in reality. So I'm looking for help now.
Fiddle with style > http://jsfiddle.net/hRxRG/
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv">
<head>
<title>Nösnäs</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="script.js"></script>
</head>
<body>
<button class="nav-button">Toggle Navigation</button>
<ul class="nav">
<li class="program">Program
<div class="second nav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></li>
</div>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
</body>
</html>
console.log("hej");
$(".program").on('click',function () {
console.log("hejssss");
$('li div ul').toggle('.close');
console.log("hejs");
$('li div ul').show();
});
Try this markup:
<ul class="nav">
<li class="program">Program</li>
<div class="secondNav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul>
</div>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
And this Javascript:
$('li.program').on('click', function() {
$('.secondNav').toggle();
});
Here is the DEMO!
Your HTML code is not valid change it as follows :
<ul class="nav">
<li class="program">Program
<div class="second nav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></div></li>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
and the JS you need to modify for sub menu click event like this :
$(".program").on('click',function () {
$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
with css check this : http://jsfiddle.net/hRxRG/1/
I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
This most be the second most simple rollover effect, still I don't find any simple solution.
Wanted: I have a list of items and a corresponding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.
The following code works, but is awful. How can I get this behaviour in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.
<script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
</body>
</html>
Here's my light-markup jQuery version:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
$('#switches li').mouseover(function(event){
switchTo($('#switches li').index(event.target));
});
switchTo(0);
});
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The switchTo function takes an index number of which <li> / <div> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, display:none for the DIVs) and the sets the desired list-item and div to bold and display. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.
Here's the jQuery version:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$( '#switches li' ).mouseover(
function(){
$( "#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
}
);
}
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>
The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?
And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.