I want to make a custom slider on mousewheel event, my question is how can i do for get each scroll done on my page and add an active class on my 'ul li' and increment it one by one like:
if ($('scroll') === 1, function() {
$('ul li:first-child').addClass('active');
});
if ($('scroll') === 2, function() {
$('ul li:nth-child(2)').addClass('active');
});
ul li{
height:20px;
width:20px;
background:blue;
margin:5px;
list-style:none
}
ul li.active{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
Based on this answer: , you can do something like this:
var scrollable = $('ul li').length - 1,
count = 0;
$('body').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
})
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
This syntax doesn't work:
if (value === other value, function() {
});
The correct syntax for an if statement is as follows:
if (value === other value) {
// execute code in here
}
Also, you've got this:
$('scroll') === 1
Here, $('scroll') is a jQuery function that selects the <scroll> HTML element (which doesn't exist).
Instead, you can detect the page's scroll position in JavaScript using window.scrollY, which returns the number of pixels that the document is currently scrolled down from the top. For example:
if (window.scrollY < 100) {
$('ul li:first-child').addClass('active');
} else if (window.scrollY < 200) {
$('ul li:nth-child(2)').addClass('active');
}
Related
I've been stuck with this one for quite awhile. Any help would be highly appreciated.
What I need is, once a client hits > arrow the current li element will be inactive, and next li element will be active. And the process will continue until the last li of the list will be the only active one.
Here is my jQuery code:
$(document).keyup(function(event) {
if (event.keyCode == 39){
$('#nav li .active').next().addClass('active').siblings().removeClass('active');
}
});
I am open to any suggestions and modifications of the code :)
You can use .each() (JQuery). syntax can be like this $('#nav li .active').each(function(index){Yourcodehere})
Feel free to comment.
What about something like this?
$(document).keyup(function(event){
if(event.keyCode == 39){
// Capture active li element
$active_li = $('#nav li.active');
// Clear active from all li elements
$('#nav li').each(function () {
this.removeClass('active');
});
// Set active for next li element
$active_li.next().addClass('active');
}
});
Or even maybe:
$(document).keyup(function(event){
if(event.keyCode == 39){
$('#nav li.active').removeClass('active').next().addClass('active');
}
});
Here's an example of a way to accomplish this. The markup will obviously be different. (JSFiddle below - be sure to click in the HTML frame before pressing the right arrow button):
https://jsfiddle.net/d13kwz1p/
Example HTML
<ul id="menu">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
Example JS
var menu = $('#menu');
$(document).keyup(function(event) {
if (event.keyCode == 39) {
var current = menu.find('.active');
var next = current.next();
current.removeClass('active');
if (current.is(':last-child')) {
menu.find(':first-child').addClass('active');
} else {
next.addClass('active');
}
}
});
Example CSS:
#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
background: #fff;
padding: 5px;
margin-bottom: 1px;
}
#menu li.active {
background: #ccc;
}
I made an increment class on scroll with jquery and now i want to get it in a condition but it doesn't work, where is the problem?
this is my code:
var scrollable = $('ul li').length - 1,
count = 0;
$('body').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
so i want to make a condition like:
if ( $( 'ul li:nth-child(2)' ).hasClass( "active" ) ) {
alert('is second');
}
I made a function that increment class on a li list everytime i scroll on the page, so now i want to make the function on click but there is a conflict, for example if i click and i want to scroll again the increment function stop, how can i fix it ?
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
here is a working script http://codepen.io/mozzi/pen/oLWZjY
you needed to reset allowTransition flag andd update the current count
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
//alert(count);
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--;
} else {
allowTransition=true;
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++;
} else {
allowTransition=true;
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
count = $(this).attr('count');
allowTransition=true;
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active" count='0'></li>
<li count='1'></li>
<li count='2'></li>
<li count='3'></li>
</ul>
I'm trying to achieve a responsive menu similar to Google Plus, where the main menu options are added to or removed from the "more" drop down as the window is resized.
The menu I have currently looks like this:
Here is the code:
// JQuery
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
});
<!-- HTML -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Calendar</li>
<li>Forum</li>
<li>Gallery</li>
<li>More
<ul id="drop-menu">
<li>Contact</li>
<li>Contact</li>
</ul></li>
</ul>
/* CSS */
#navigation {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#navigation li {
display: inline-block;
}
#navigation li a:link, #navigation li a:visited, #navigation li a:active {
display: block;
width: 120px;
line-height: 50px;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #27383F;
color: #CCC8C0;
}
#navigation li a:hover, #navigation li a.active {
background-color: #2C3C53;
}
#drop-menu {
display: none;
position: absolute;
padding: 0px;
margin: 0px;
}
#drop-menu li {
display: block;
}
JSFiddle
Currently, when the browser window is re-sized the menu options collapse as follows:
However, the below image is my desired result:
I'm wondering if there is a way to accomplish this without media queries? More specifically:
How can I dynamically detect whether the window size is large enough or too small to contain the li tags in the main navigation on a single line?
How do I swap the li tags between one menu and the other?
By not using media-queries I think you can use jQuery $( window ).width(); which will return width of browser viewport.. It should be like this:
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
if($( window ).width() < $("#navigation > li").length * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
$("#navigation > li").last().prev().remove();
$("#drop-menu").append(html);
}
var bigger = $("#navigation > li").length + 1;
var smaller = $("#navigation > li").length;
$( window ).resize(function() {
if($( window ).width() <= smaller * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
if(html != undefined){
$("#navigation > li").last().prev().remove();
$("#drop-menu").prepend("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
}
if($( window ).width() >= bigger * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#drop-menu > li").first().html();
if(html != undefined){
$("#drop-menu > li").first().remove();
$("#navigation > li").last().before("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
};
});
});
Check out this Fiddle, I believe it's not the perfect result.. But, I believe you can use it as your starting point.. Hope it helps..
This should be easy, but I'm having a hard time with it.
I have a simple collapsing menu that uses SPAN tags inside LI tags, the usual.
Here's the JavaScript:
var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
allSpan[i].onclick = function() {
if (this.parentNode) {
var childList = this.parentNode.getElementsByTagName('UL');
for (var j = 0; j < childList.length; j++) {
var currentState = childList[j].style.display;
if (currentState == "none") {
childList[j].style.display = "block";
} else {
childList[j].style.display = "none";
}
}
}
}
}
It works just fine in hiding and showing the nested ULs. What I'd like to do is add a piece of code that also changes the SPAN of the clicked-on parent LI item.
I'm thinking it would be something like:
if(currentState=="none") {
childList[j].style.display="block";
$(this).css('background-color', 'red');
}
else {
childList[j].style.display="none";
$(this).css('background-color', 'blue');
}
I'm sure I'm missing the obvious. Could somebody please point me in the right direction?
UPDATE
Sorry, I totally forgot there was more code at the bottom:
$(function() {
$('#menu').find('SPAN').click(function(e) {
$(this).parent().find('UL').toggle();
});
});
And here is the body of the HTML:
<style TYPE="text/css">
<!--
body { background: white;color: #000000;font-family:geneva; }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
ul { margin:0;padding:0; }
li { list-style-type: none; }
ul li span { display:block;min-height:20px;background:blue;color:white;font-weight:bold;padding: 3px 8px 3px 8px;border-top:1px solid black;border-left:1px solid black;border-right:1px solid black;margin:0; }
li ul { display:none; }
li ul li span { background:#98ff33;padding: 3px 8px 3px 8px;color:black;font-weight:normal;display:block; }
li ul li:last-child span { border-bottom:1px solid black; }
-->
</style>
</head>
<body>
<UL id="menu">
<LI class="Category"><SPAN>Solid Tumors</SPAN><UL>
<LI class="subtopic"><SPAN>Anal Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Biliary Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Bladder Cancer</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Hematologic Malignancies</SPAN><UL>
<LI class="subtopic"><SPAN>Acute Myeloid Leukemia</SPAN></LI>
<LI class="subtopic"><SPAN>Acute Promyelocytic Leukemia</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Reviewers</SPAN><UL>
<LI class="subtopic"><SPAN>Physician Reviewers</SPAN></LI>
<LI class="subtopic"><SPAN>Pharmacy Reviewers </SPAN></LI>
</UL>
</UL>
A simple method would be to only toggle the class of the parent li element:
$(function () {
$('#menu SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
And then add then using CSS to manage the colors and the show/hide by adding the following css:
#menu li.open > span {
background-color: red
}
#menu li.open ul {
display: inline
}
see: http://jsfiddle.net/3TTDJ/
Note: if you only want to do this for the first menu level and not recursive, you'll want to specify that in the selector using immediate child selector '#menu > li > SPAN':
$(function () {
$('#menu > li > SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
see: http://jsfiddle.net/tleish/3TTDJ/2/
Below changes the span background color or the parent listitem
http://jsfiddle.net/tuusT/2/
$('#menu').find('SPAN').click(function(e){
$('#menu').find('.active').removeClass("active");
$(this).parents(".Category").children("span:first").addClass("active")
$(this).parent().find('UL').toggle();
});