How could I toggle class between these numbers both on click and on scroll..? So, basically I want to switch between these when rotating mouse wheel, and fire some sort of a callback after that...
EDIT: So, I would like to be able to move mouse wheel anywhere in the window, and that would in return toggle class .active in the li's. Also, when for example li#runOne is selected, it should run a callback function let's say runFunctionOne. When li#runTwo is selected/scrolled to - it would run for example runFunctionTwo...
$("#runTwo").on('click', function() {
$("#runTwo").toggleClass("active", function() {
// Run some callback
console.log("Two");
});
});
$(window).scroll(function() {
// Switch between numbers on scroll
});
ul {
margin: 50px auto;
width: 300px;
}
.active {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="runOne" class="runOne active">Run 1</li>
<li id="runTwo" class="runTwo">Run 2</li>
<li id="runThree" class="runThree">Run 3</li>
</ul>
You can toggle class using click and mousewheel like this
https://codepen.io/creativedev/pen/rKOBEq
$('.rr').on('click, mousewheel', function() {
$('.rr').removeClass('active');
$(this).addClass('active');
console.log("Two");
});
HTML code:
<ul>
<li id="runOne" class="runOne active list">Run 1</li>
<li id="runTwo" class="runTwo list">Run 2</li>
<li id="runThree" class="runThree list">Run 3</li>
</ul>
jQuery code:
$('.list').click(function(e){
$('.list.active').removeClass('active');
$(this).addClass('active').trigger('activeEvent');
});
$(document).on('mousewheel',function(e){
var currentScrollAmt=$(window).scrollTop();
var activeLi=$('.list.active');
$('.list.active').removeClass('active');
if(e.originalEvent.wheelDelta /120 > 0) {
//Scrolling Up
if(!activeLi.is(':first-child'))
activeLi.prev('li').addClass('active').trigger('activeEvent');
}
else{
//Scrolling Down
if(!activeLi.is(':last-child'))
activeLi.next('li').addClass('active').trigger('activeEvent');
}
});
$('li').on('activeEvent',function(e){
runCallback(e.target.id);
});
function runCallback(id)
{
if(!id)
return false;
switch(id)
{
case 'runOne':
alert('runOne Callback Code');
break;
case 'runTwo':
alert('runTwo Callback Code');
break;
case 'runThree':
alert('runThree Callback Code');
break;
}
}
Related
I'm adding trivia as a main component to my webpage. I'm trying to the class of "correct" when it's right, and "wrong" when it's wrong. I have no idea what I'm doing. lol. Any help would be greatly appreciated.
<ul>
<li id="a">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
JQuery
I tried to make the correct one a variable in Jquery
var right = $( "ul li#a" ).on(click, function() {});
if (click === right){
$("ul li#a").addClass("correct");
} else {
$("li").addClass("wrong");
}
If I'm understanding your end goal, you want to do something to indicate that an answer is the "right" answer or not, then you want to assign class .correct or .wrong if they get the "right" answer or not.
I would assign data-right="right" to the "right" answer. Then when someone clicks on an li, look for that attribute and assign .correct if they chose the "right" answer, and assign .wrong if not.
$('li').on('click',function() {
var right = $(this).data('right');
$(this).siblings().removeClass('correct wrong');
if (right == "right") {
$(this).addClass('correct');
} else {
$(this).addClass('wrong');
}
})
.correct {
color: green;
}
.correct:after {
content: '\2713';
}
.wrong {
color: red;
}
.wrong:after {
content: '\2613';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a" data-right="right">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
This solution relies on giving the right answers a class called "correctAnswer", then binding a click event handler that sets the class of the clicked li based on whether or not it has that class. I think that does what you're looking for:
<ul>
<li id="a" class="correctAnswer">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
$('li').on('click', function () {
var classToAdd = $(this).is('.correctAnswer') ? 'correct' : 'wrong';
$(this).addClass(classToAdd);
});
Here is a complete example:
$( document ).ready(function() {
var correctAnser = 'a'; // you need to set this to what you need the answer to be
$('ul li').on('click', function () {
$('ul li').removeClass('correct').removeClass('wrong'); // remove both classes on list elements
var classToAdd = $(this).attr('id') == correctAnser ? 'correct' : 'wrong';
$(this).addClass(classToAdd);
});
});
.correct {
background:#2bb539;
color:#ffffff;
}
.wrong {
background:#c00;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a">A) Lucy</li>
<li id="b">B) Bonnie</li>
<li id="c">C) Sheila</li>
<li id="d">D) Kai</li>
</ul>
How can I make my webpage switch buttons from on hover to on toggle when the width of the screen is less than 769px.
The hover or toggle script is selected based on what size the browser starts on and cannot switch when changing the size .
$(document).ready(myFunction);
function myFunction() {
var ww = document.body.clientWidth;
if (ww < 769) {
$(".button").click(function() {
$("ul").toggle();
});
} else {
$(".button").hover(function() {
$("ul").toggle();
});
}
}
.button {
display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Men
<ul class="menu">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
Add document ready and resize events, both of them combined, to make when the document is ready and when the window is resized too.
I make an improvement with the events, take a look at the on() function
$(document).ready(myFunction);
$(window).on('resize', myFunction);
function myFunction() {
var event;
var ww = document.body.clientWidth;
if (ww < 769) {
event = "click";
} else {
event = "hover";
}
// here is the improvement
$(".button").on(event, function() {
$("ul").toggle();
});
}
.button {
display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Men
<ul class="menu">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
click and hover are used to add event handlers not trigger events, to manually cause an event use trigger().
I'm trying to figure out how to loop through each list element one at a time and apply a function to them when they run, I've tried several methods and some hints would help!
HTML structure
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
I've worked out an each function that if i understand correctly will handle the changing of classes, this is where I'm failing to loop through each element.
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( this.className !== "active" ) {
this.addClass("active");
} else {
this.removeClass("active");
}
});
});
You need to use $(this).hasClass to check for "active" class.
JSFiddle
http://jsfiddle.net/39o0bagv/
JavaScript
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( $(this).hasClass("active") ) {
$(this).removeClass('active');
$(this).addClass("changed");
} else {
$(this).addClass("active");
}
});
});
CSS
.active {
color: red;
}
.changed {
color: blue;
}
The loop will check if the element has 'active' class and replace it with 'changed'. And vise versa.
I've added a css class so that you can see the active class being toggled. Your methods for checking, adding, and removing the class weren't write, so it was failing with a script error. See what I've done below, using the classList property. However, judging from your post title, I'm not sure if maybe you're wanting to pause on each one and then continue. In that case the javascript setInterval method might be the tool you want. http://www.w3schools.com/jsref/met_win_setinterval.asp
$(document).ready(function() {
$(".custom-item").find('.slide').each(function(){
if (!this.classList.contains("active")) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
});
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
Fiddle
Fix: fiddle
$(document).ready(function() {
$('.slide').each(function(i) {
if ( !$(this).hasClass("active")) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});
I want to create a menu with a background sliding horizontally on mouseenter. However when i try to move the mouse from the first one to the fourth one, background stops by on the second and third ones. And the delay is a problem too. Here is my html codes:
<div class="menuSecili iconset"></div>
<ul class="iconset fl">
<li class="secili seciliSg" id="homepage">Homepage</li>
<li id="corporate">Corporate</li>
<li id="products">products</li>
<li id="branches">Branches</li>
<li id="contact">Contact</li>
</ul>
And js:
$('ul li').mouseenter(function(){
$('.menuSecili').animate({'left':$(this).position().left+20},350);
$('ul li').removeClass('secili');
$(this).addClass('secili');
});
$('ul').mouseleave(function(){
$('.menuSecili').animate({'left':$('.seciliSg').position().left+20},350);
$('ul li').removeClass('secili');
$('.seciliSg').addClass('secili');
});
JSFiddle link too: http://jsfiddle.net/D2r4E/
It's working now with this code?
var site = {
menuKaydir: function () {
$('.menuSecili').offset({
left: $('ul li.secili').offset().left
});
$('ul li').mouseenter(function () {
$('.menuSecili').animate({
'left': $(this).position().left + 20
}, 350);
$('ul li').removeClass('secili');
$(this).addClass('secili');
});
$('ul').mouseleave(function () {
$('.menuSecili').animate({
'left': $('.seciliSg').position().left + 20
}, 350);
$('ul li').removeClass('secili');
$('.seciliSg').addClass('secili');
});
}
}
$(function () {
site.menuKaydir();
});
I have a fixed height unordered list <ul> with fixed height list items <li>
My ul height is 600px and it contains 200 li items with 40px height.
I need to create a script which scrolls down the list when the mouse hovers the bottom of the list and scrolls up when the mouse hovers the top of the list.
I tried this: http://archive.plugins.jquery.com/project/hoverscroll but it is not as smooth as it should be, so I need to create a custom one (maybe not using jQuery at all).
Any ideas or examples? How can I achieve the desired effect?
Thanks
Try to use $wrapper.animate({scrollTop: step});
for example
JS:
var isScroll = false;
$(document).ready(function () {
$('#up').hover(function () {
isScroll = true;
gotoNext(true);
}, function () { isScroll = false; });
$('#down').hover(function () {
isScroll = true;
gotoNext(false);
}, function () { isScroll = false; });
});
function gotoNext(dir) {
if (isScroll) {
isScroll = true;
var step = dir ? '-=20' : '+=20';
$('#wrapper').animate({
scrollTop: step
}, 200, "linear");
setTimeout(function () { gotoNext(dir); }, 200);
}
}
HTML:
<div style="height:10px; background:green; width:200px;" id="up"></div>
<div style="height:200px; overflow:auto; width:200px;" id='wrapper'>
<ul>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
<li style="height:30px;">7</li>
<li style="height:30px;">8</li>
<li style="height:30px;">9</li>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
</ul>
</div>
<div style="height:10px; background:green; width:200px;" id="down"></div>
it is looks pretty good for me
Why not devide your screen into a grid? once the mouseX and mouseY hit the top grid it will scroll up with a predefined integer value