I use this javascript to produce "toggle" an extra word on class name by expanding DropDown function functionality and drop it when clicked:
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
/* event.stopPropagation();*/
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
});
HTML in which I want JavaScript to make effect looks like,
(I'm targeting class="wrapper-dropdown") :
<div class="wrapper">
<div id='dd' class="wrapper-dropdown">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">2'nd subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">3'rd subject
<ul class="dropdown"></ul>
</div>
<div id='dd' class="wrapper-dropdown">4'th subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
The problem is that JavaScript makes effect only on the first item in wrapper div
Because you have multiple divs with id='dd' - ID's need to be unique.
Just add a dd class to your div like so:
<div class="wrapper-dropdown dd">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And change the el: var dd = new DropDown($('.dd'));
Related
I have a simple ul list, as can be seen below:
<div class="container">
<div class="row">
<div class="col">
<h1>My Favorite Meals <span>(1)</span></h1>
<hr>
<ul>
<li class="selected">Spaghetti</li>
<li>Curry & Rice</li>
<li>Burrito</li>
<li>Soup</li>
<li>Something Else</li>
</ul>
</div>
</div>
</div>
What I want to do, is to make this list clickable. So that when you click on one of the Lis, the background color changes, and the selected li will also be assigned a new class.
My JS code isn't working:
var ul = document.getElementById("foo")
var items = ul.getElementsByTagName("li")
for (var i = 0; i < items.length; ++i) {
// do something with items[i], which is a <li> element
var current = items[i]
current.addEventListener("click", onClick)
var onClick = function() {
current.style.backgroundColor = "red"
}
}
HTML:
<div class="container">
<div class="row">
<div class="col">
<h1>My Favorite Meals <span>(1)</span></h1>
<hr>
<ul>
<li class="selected">Spaghetti</li>
<li>Curry & Rice</li>
<li>Burrito</li>
<li>Soup</li>
<li>Something Else</li>
</ul>
</div>
</div>
</div>
CSS:
.backgroundColor {
background-color: lightgray;
}
JS:
var items = document.getElementsByTagName("li")
items.forEach(li => {
li.addEventListener('click', () => {
li.classList.toggle('backgroundColor');
});
});
Hopefully this will help you to solve your problem.
Try something like this:
<div class="container">
<div class="row">
<div class="col">
<h1>My Favorite Meals <span>(1)</span></h1>
<hr>
<ul id="list">
<li class="selected">Spaghetti</li>
<li>Curry & Rice</li>
<li>Burrito</li>
<li>Soup</li>
<li>Something Else</li>
</ul>
</div>
</div>
</div>
<script>
document.getElementById("list").addEventListener("click",function(e) {
if (e.target && e.target.matches("li")) {
e.target.classList.toggle("foo"); // toggle foo class name here
e.target.style.backgroundColor = "red"; // new background color here
}
});
</script>
I assigned your ul element an id of "list" and added a "click" event listener to it. Whenever you click an li element within that list, it will assign the foo class to that clicked element (click again to unassign). Similarly, assign a red background color to that element.
JavaScript - addEventListener on all created li elements
I hope my code solved your problem.
$(document).ready(()=>{
$(".my-list li").each((i)=>{
var myLi = $($(".my-list li")[i]);
myLi.bind("click",()=>{
if(!myLi.hasClass("selected"))
myLi.addClass("selected")
else
myLi.removeClass("selected")
})
})
})
.selected{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="my-list">
<li class="selected">Spaghetti</li>
<li>Curry & Rice</li>
<li>Burrito</li>
<li>Soup</li>
<li>Something Else</li>
</ul>
See below. Documentation is inside the code.
// Put a nodelist of li's in variable lis
const lis = document.querySelectorAll("ul li");
// Add an event listener to each li
lis.forEach(li => {
li.addEventListener("click", () => {
// Remove class selected from currently selected li
document.querySelector("ul li.selected").classList.remove("selected");
// Assign class selected to the clicked li
li.classList.add("selected");
});
});
li {
cursor: pointer; /* Change cursor */
}
li.selected {
/* Change background color of selected li */
background-color: lightgreen;
}
<div class="container">
<div class="row">
<div class="col">
<h1>My Favorite Meals <span>(1)</span></h1>
<hr>
<ul>
<li class="selected">Spaghetti</li>
<li>Curry & Rice</li>
<li>Burrito</li>
<li>Soup</li>
<li>Something Else</li>
</ul>
</div>
</div>
</div>
I have a pagination bar and it will switch to the next button if you click the "next" or "prev" arrow buttons.
I wrote some code to stay on the current "page" number if the next item in the list is ".next" or ".prev", but it is not working.
What am I missing?
$(document).ready(function() {
var pageItem = $(".pagination li").not(".prev,.next");
var prev = $(".pagination li.prev");
var next = $(".pagination li.next");
pageItem.click(function() {
$('li.active').removeClass("active");
$(this).addClass("active");
});
// stay on current button if next or prev button is ".next" or ".prev"
next.click(function() {
if($('li.active').next() != next) {
$('li.active').removeClass('active').next().addClass('active');
}
});
prev.click(function() {
if($('li.active').prev() != prev) {
$('li.active').removeClass('active').prev().addClass('active');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul class="pagination">
<li class="prev">
<span>«</span>
</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="next">
<span>»</span>
</li>
</ul>
</nav>
jQuery selectors return an Array object, objects cannot be deemed equal unless they are derived from each other.
i.e.
var a = []
var b = []
console.log(a==b); //would output false
If you changed you code to select the item in the array you would get the actual DOM node
$('li.active').next()[0] != next[0]
All you need to check the class name, Please check below updated code
$(document).ready(function() {
var pageItem = $(".pagination li").not(".prev,.next");
var prev = $(".pagination li.prev");
var next = $(".pagination li.next");
pageItem.click(function() {
$('li.active').removeClass("active");
$(this).addClass("active");
});
// stay on current button if next or prev button is ".next" or ".prev"
next.click(function() {
if($('li.active').next().attr('class') != 'next') {
$('li.active').removeClass('active').next().addClass('active');
}
});
prev.click(function() {
if($('li.active').prev().attr('class') != 'prev') {
$('li.active').removeClass('active').prev().addClass('active');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul class="pagination">
<li class="prev">
<span>«</span>
</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="next">
<span>»</span>
</li>
</ul>
</nav>
I have problems with creating a dropdown menu with jQuery.
This code shows the sub menus on hover but I couldn't get the sub sub menu to work too
$(document).ready(function() {
$("li").has(".sub").hover(function() {
$(this).find(".sub").toggle();
});
});
Here's the JS code
http://codepen.io/anon/pen/rVmabP
Lose the sub-sub class and use the immediate descendant selector to help you:
HTML
<ul id="nav">
<li>11111
<ul class="sub">
<li>2</li>
</ul>
</li>
<li>11111
<ul class="sub">
<li>2</li>
<li>22222
<ul class="sub">
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
$("li").has("> .sub").hover(function() {
$(this).find("> .sub").stop().slideToggle();
});
});
JSFiddle
Note that this would work for unlimited nested .subs.
I have a simple code which cycles through list elements adding and removing class "active".
This code works great but only for first list element. What I would like it to do is to apply this same function to all lists with class "imageslider".
Any help is appreciated!
Here's the js code:
<script>
toggleSlide = function(){
$(".imageslider li.active").removeClass()
.next().add(".imageslider li:first").last().addClass("active");
}
setInterval(toggleSlide, 500);
</script>
And here's is my HTML markup:
//First list
<ul class="imageslider">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
//Second list
<ul class="imageslider">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
Try
toggleSlide = function () {
$(".imageslider").each(function () {
$(this).find("li.active").removeClass()
.next().add($(this).children().first()).last().addClass("active");
})
}
setInterval(toggleSlide, 500);
Demo: Fiddle
Remove the :first predicate!
.next().add(".imageslider li").last().addClass("active");
I am trying to make a simple function but doing something wrong. Clicking the href causes a page jump and the function fails. Fiddle: http://jsfiddle.net/XkzUK/5/
HTML:
<nav>
<ul id="site-nav">
<li class="nav1">Recent</li>
<li class="nav2">Highlights</li>
<li class="nav3">Animals</li>
<li class="nav4">Cars</li>
</ul>
</nav>
<div id="content-listing">
<div id="recent">
<ul class="top-level">
</ul>
</div>
<!--end recent-->
<div id="highlights">
<ul class="top-level">
</ul>
</div>
<!--end highlights-->
<div id="animals">
<ul class="top-level">
</ul>
</div>
<!--end animals-->
<div id="cars">
<ul class="top-level">
</ul>
</div>
<!--end cars-->
</div>
<!--end content-listing-->
JS:
var test1;
var test2;
var test3;
var test4;
function switcher(divToShow, thisVar, otherVar, ajaxContent) {
$("#site-nav li a").parents().removeClass("nav-active");
$(this).addClass("nav-active");
if(otherVar) {
otherVar.detach();
}
if(typeof thisVar === 'undefined') {
thisVar = $(divToShow + "ul.top-level").load('/echo/html/', {
html: ajaxContent
}, function () {
alert("I'm new");
});
} else {
thisVar.appendTo("#content-listing");
alert("I'm old");
}
}
//Recent
$("#site-nav .nav1").on("click", function (event) {
switcher("#recent", "test1", "test2", "<li>1</li> <li>2</li> <li>3</li>");
event.preventDefault();
});
//Highlights
$("#site-nav .nav2").on("click", function (event) {
switcher("#recent", "test2", "test1", "<li>A</li> <li>B</li> <li>C</li>");
event.preventDefault();
});
http://jsfiddle.net/XkzUK/5/
You have error with
otherVar.detach()
because, otherVar is just a string, so .detach() will not work, .detach() accepts jQuery object.
So correct format should be
$(otherVar).detach();
You're passing strings as all of those parameters.
Therefore, calling methods like detach() or appendTo() throws an error, since those methods don't exist on strings.
You need to pass jQuery objects.