So i want to make a content slider. I have 8 LI elements and want to make an array with those elements. So far i have done that by adding a unique ID or Name to each of them and making a variable with that element, but i believe that there is a better way of doing this, i just dont know it because i am a designer, not a developer.
Code:
In HTML
<ul>
<li>
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li>
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li>
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
</ul>
You can get a NodeList of your elements which is similar to an array by using querySelectorAll. If you were to add a class such as list to your ul, you could get them like this:
var items = document.querySelectorAll('.list li')
A NodeList can do some things an array can do. If you need to change it to an array like this:
var itemsArray = [].slice.call(document.querySelectorAll(".list li"));
Add the shared class to each li element like below:
<ul>
<li class="myLiShared">
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li class="myLiShared">
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li class="myLiShared">
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
</ul>
Then in your javascript code you can get the li elements as an htmlcollection like so:
let myCollection = document.getElementsByClassName("myLiShared");
//Now you can iterate over your li elements like so
for(let x = 0; x < myCollection.length; x++){
//Do something with your li element
//myCollection[x]
}
This really depends the surrounding code. You can just add a class to each li and use $('.className').toArray(); or if this is your only list, you could even use $('li').toArray();.
For vanilla javascript, you can use document.querySelectorAll('.className'); or document.querySelectorAll('li');
jQuery alternative
Apply a class to your ul element and execute this selector .classname li.
To populate those elements into an array, call the native jQuery function toArray()
Look at this code snippet
var array = $('.list li').toArray();
console.log(array);
.list {
display: none
}
.as-console-wrapper {
max-height: 100% !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><ul class='list'> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li></ul>
See? the li elements were populated into an array.
Resource
.toArray()
Related
Recenlty I have been implementing lazy loading in flex slider. I lazy load images using the after event of flex slider. I observed that if arrow icon is pressed rapidly and slides move fast then the after event is not fired. Here is a demo:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider',
after: function(slider) {
console.log("after fired on " + slider.currentSlide);
//$("#flex-carousel-H img").slice( ((slider.currentSlide + 1)*4), (((slider.currentSlide + 2)*4) + 1)).each(flexLazy);
}
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
</ul>
</div>
Please try clicking the right arrow icon in bottom thumbnail slider. You will observe that console doesn't log for every slide. But if we click slowly then console logs for every slide.
Question:
1. Why doesn't after event fire for every slide if slides are moved rapidly.
2. How to force after to fire even if slides are moved rapidly.
Thanks
Not sure if you found the answer to this already, but I had this same issue, instead of using the after callback which triggers when the animation finishes you should use the before callback. It triggers "before" the animation starts and it will always fire no matter how quickly you thumb through the slides.
Two unordered lists. When hovering over one list item I need to darken the list items in the other list, but not the hovered list item's own siblings.
With the code below I'm able to darken all other list items but the one being hovered, but I can't seem to get the siblings into the equation.
HTML:
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
JQUERY:
$('.tn').hover(
function() {
$(".tn:not(:hover)").not(this).css({"-webkit-filter":"brightness(15%)"});
},
function() {
$(".tn").css({"-webkit-filter":"brightness(100%)"});
}
);
And for anyone who suggests I should just do the hover over the entire unordered list, it's not possible because of certain restrictions of the design :/
html:
<ul class="tnparent">
javascript:
$('.tnparent:not(:hover) .tn').css({"-webkit-filter":"brightness(15%)"})
Use .closest('ul') to find this list, and then operate just on its siblings.
$('.tn').hover(
function() {
var thislist = $(this).closest('ul');
var otherlists = thislist.siblings('ul');
otherlists.find('.tn').css({
"-webkit-filter": "brightness(15%)"
});
},
function() {
$(".tn").css({
"-webkit-filter": "brightness(100%)"
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
You want the opposite ul so lets traverse to the parent of current one, and jump over to the other
$('.tn').hover(function(){
var $currentList = $(this).parent();
var $otherListItems = $currentList.siblings('ul').find('.tn');
$otherListItems.doSomething();
},function(){
/* similar */
})
(I'm working on a mobile responsive website)
This is the list:
html:
<li url="http://google.com" class="mainli">NFL
<img src="strokesmenu.png" class="sub-menu" />
<ul class="sports2">
<li>Superbowl </li>
</ul>
</li>
<li url="http://google.com" class="mainli">MLB Baseball
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Playoff </li>
</ul>
</li>
<li class="mainli"> NBA
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Finals Playoff </li>
</ul>
</li>
<li class="mainli"> College Basketball
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>March Madness </li>
</ul>
</li>
<li > Boxing </li>
<li> College Football </li>
<li class="mainli"> Golf
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>British Open</li>
<li>Masters</li>
<li>PGA Championship</li>
<li>US Open</li>
</ul>
</li>
<li class="mainli"> NHL
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Stanley Cup </li>
</ul>
</li>
<li> MMA </li>
<li> UFC </li>
<li> Soccer </li>
<li> Tennis </li>
<li class="mainli"> Horse Racing
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Belmont Stakes</li>
<li>Kentucky Derby</li>
<li>Preakness Stakes</li>
</ul>
</li>
<li> Other Sports </li>
</ul>
</div>
and these few onClick jQuery lines:
//first
$('.sub-menu').click(function(){
//$('.sports2').slideToggle("slow");
$(this).parent().find('.sports2').slideToggle("slow");
})
//second
$("li").click(function(){
document.location.href = $(this).attr('url');
});
"NfL" is a link by itself - but if you press the #sub-menu button you have more categories with links. works for all the <li> in my html.
If I comment the second jQuery part - it opens the second list (the sub categories .sports2). but the links don't work.
If I comment the first jQuery code - I get the links working perfectly, but the submenus don't open.
How do I blend both without getting things mixed?
I tried uncommenting both of them - I get the links working fine, but when I click the #submenu button it expands for a second and immediately redirects to the link of the <li url="...">
try to avoid links on different levels.
(wich level will be triggered? li-toplevel or li-lowest level?)
Instaid of trigger your link event on ALL li also your toplayer, try using it on a li with a class reference like you did for '.sub-menu'
When you click on a link or .sub-menu inside of <li> tag you're also clicking the li itself (have a look at example http://jsfiddle.net/op02x1qn/ and try clicking a link)
So one of the options is to get click event of exactly the item you want clicked. You can wrap your text inside of li like this (and style it css to be full width of parent element etc.):
<li class="mainli">
<span class="mainli-text" data-url="http://google.com">NFL</span>
<img src="strokesmenu.png" class="sub-menu" />
<ul class="sports2">
<li>Superbowl </li>
</ul>
</li>
And JS:
$('.mainli-text').on('click',function(e){
document.location.href = $(this).data('url');
});
So now when you click on something other than that new span.mainli-text inside of parent li it will have it's own click event.
need a little help in hiding/showing divs. I know there were a few posts on here but none that specifically targeted what I am looking to do.
My code is below. What I would like to do is have the corresponding DIV display when it is clicked on from the leftColum LI.
<div id="leftColumn">
<ul>
<li> Painting </li>
<li> Landscaping </li>
<li> Kitchen </li>
<li> What's next? </li>
</ul>
</div>
<div id="rightColumnPainting">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
</ul>
</div>
<div id="rightColumnLandscaping">
<ul>
<li> <img src="./img/paint1.jpg" /> </li>
<li> <img src="./img/paint2.jpg" /> </li>
<li> <img src="./img/paint3.jpg" /> </li>
<li> <img src="./img/paint4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnKitchen">
<ul>
<li> <img src="./img/yard1.jpg" /> </li>
<li> <img src="./img/yard2.jpg" /> </li>
<li> <img src="./img/yard3.jpg" /> </li>
<li> <img src="./img/yard4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnNext">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house2.jpg" /> </li>
<li> <img src="./img/house3.jpg" /> </li>
<li> <img src="./img/house4.jpg" /> </li>
</ul>
</div>
For this to work you need to hide the div ul elements, and then use the :target selector to display: block:
#leftColumn {
display: block;
}
#leftColumn ul {
display: block;
}
div ul {
display: none;
}
div:target ul {
display: block;
}
You do, of course, need to ensure that the #leftColumn ul is visible first; and, further, requires that the a elements by which you're navigating within the page has the appropriate id within it's href attribute:
<ul>
<li>Painting</li>
<li>Landscaping</li>
<li>Kitchen</li>
<li>What's next?</li>
</ul>
JS Fiddle demo.
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.