I want to make it so that when I hover over one of the items in a list, it moves that element.
Here is my HTML code for the list:
<ul class="nav">
<li class="test">Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
And here is my Jquery code:
$(document).ready(function() {
$('').mouseenter(function() {
$(this).animate({ left: '+=100px' });
});
$('').mouseleave(function() {
$(this).animate({ left: '-=100px' });
});
});
Basically, my question is what goes in the quote marks in the JQuery functions?
Use the on event
$(document).ready(function () {
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');
});
Try this:
$(document).ready(function()
{
$('.nav li').mouseenter(function()
{
$(this).animate({left: '+=100px'});
});
$('.nav li').mouseleave(function()
{
$(this).animate({left: '-=100px'});
});
});
You can use $('.nav li') to target list items of your nav:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
Also, you need to set position: relative for your list items, so the left value can work:
.nav li {
position: relative;
}
Fiddle Demo
You might want to consider the .on and event map approach.
$('.nav').on({
mouseenter : function(){
$(this).animate({left: '+=100px'});
},
mouseleave : function(){
$(this).animate({left: '-=100px'});
}
}, 'li');
HTML Code:
<ul class="nav">
<li>Home</li>
<li>News</li>
<li>About us</li>
<li>Venue</li>
<li>Affiliations</li>
<li>Players & Officers</li>
<li>Fixtures & Results</li>
<li>Coaching</li>
<li>Contact us</li>
</ul>
Javascript:
$(document).ready(function () {
$('.nav li').mouseenter(function () {
$(this).animate({
left: '+=100px'
});
});
$('.nav li').mouseleave(function () {
$(this).animate({
left: '-=100px'
});
});
});
A little CSS tweek to make the list hover animation work:
.nav {
padding: 20px 0 0 20px;
}
.nav li {
position: relative;
}
Check the demo at: DEMO
Related
So I have been making onepage websites for a while now, and one thing witch is always annoys me is navigation functions witch i'm repeating for the amount of buttons and id's I have.
It looks like the following:
$('#homeB').click(function () {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 1000);
return false;
});
$("#aboutB").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 1000);
return false;
});
$("#winesB").click(function() {
$('html, body').animate({
scrollTop: $("#wines").offset().top
}, 1000);
return false;
});
Question is, how do I change from here to a small function that does not need repeating.
Thanks.
Note: Preferably no 3rd party plugins etc. keep it in JavaScript/jQuery.
To avoid writing duplicate code, you could do a little something like this:
$(function() {
$('li').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(e.target).attr("href")).offset().top
}, 1000);
});
});
nav {
position: fixed;
top: 0;
left: 0;
}
div {
margin: 100px 0 0 0;
width: 100%;
height: 500px;
}
div:nth-child(even) {
background: #ccc;
}
div:nth-child(odd) {
background: #4c4c4c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>
function scrollTo($element) {
$('html, body').animate({
scrollTop: $element.offset().top
}, 1000);
return false;
}
then you can use it as
$('#homeB').click(function () {
scrollTo($("#home"));
});
$("#aboutB").click(function() {
scrollTo($("#about"));
});
$("#winesB").click(function() {
scrollTo($("#wines"));
});
There are a couple ways of tackling this. If I were to be doing it, I would make whatever is being clicked a class and then setting a data attribute to the destination id, like this
<span class='nav_link' data-dest='home2'>Click me to go to home 2</span>
Then you could do something like this
$('.nav_link').click(function() {
var dest = $(this).attr('data-dest');
$('html, body').animate({
scrollTop: $('#'+dest).offset().top
}, 1000);
})
I've just finished a creating a bare bones JavaScript tabs functionality for website. Right now I'm having a bit of problem trying to add directional functions in order to switch between tabs. Here is what I've created so far. I'm not sue on how I can increment or decrement the index in order to use the directional arrows to switch tabs and also the content
$(document).ready(function() {
$('.tabs-list li:first-child').addClass('active'),
$('.tab-content .show-content:first-child').addClass('active');
$('.tabs-list li').click(function(e) {
event.preventDefault();
if (!$(this).hasClass('active')) {
var tabIndex = $(this).index();
var nthChild = tabIndex + 1;
// select the right elements
var $tabsList = $(this).parent();
var $tabContent = $tabsList.next('.tab-content');
$tabsList.find('li.active').removeClass('active');
$(this).addClass('active');
$tabContent.find('.show-content').removeClass('active');
$tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('active');
}
})
$('.prev').on('click', function() {});
$('next').on('click', function() {});
})
.tabs-list li {
display: inline-block;
}
.tab-content .show-content {
display: none
}
.tab-content .show-content.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="show-content">
Content 1
</div>
<div class="show-content">
Content 2
</div>
<di>
Content 3
</di>
</div>
</div>
<ul>
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
You can do it using jQuery .prev() and .next() methods. You just need to get the current .active tab and change it accordingly.
Here's the code you need:
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
}
});
Demo:
This is a working Fiddle and a working Demo snippet:
$(document).ready(function() {
$('.tabs-list li:first-child').addClass('active'),
$('.tab-content .show-content:first-child').addClass('active');
$('.tabs-list li').click(function(e) {
event.preventDefault();
if (!$(this).hasClass('active')) {
var tabIndex = $(this).index();
var nthChild = tabIndex + 1;
// select the right elements
var $tabsList = $(this).parent();
var $tabContent = $tabsList.next('.tab-content');
$tabsList.find('li.active').removeClass('active');
$(this).addClass('active');
$tabContent.find('.show-content').removeClass('active');
$tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('active');
}
})
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
}
});
})
.tabs-list li {
display: inline-block;
cursor: pointer;
}
.tab-content .show-content {
display: none
}
.tab-content .show-content.active {
display: block;
}
.as-console-row-code {
display: none;
}
.prev,
.next {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="show-content">
Content 1
</div>
<div class="show-content">
Content 2
</div>
<div class="show-content">
Content 3
</div>
</div>
</div>
<ul>
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
Edit:
To make it loop in a cyclic way and doesn't stop in first or last elements, we should just implement that in the else block of our if statement, so it won't stop.
Here's how will be your code:
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
} else {
current.removeClass('active');
$(".tab-content .show-content:last").addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
} else {
current.removeClass('active');
$(".tab-content .show-content:first").addClass('active');
}
});
And this is an updated Fiddle taking in consideration these changes.
How to remove all <li> tags ( ul.gallery li ) when click on the <button>.
The Button is outside the <ul>.
<div class="gallery">
<ul class="gallery-list">
<li>
<img src="sample">
</li>
<li>
<img src="sample">
</li>
<li>
<img src="sample">
</li>
</ul>
<button class="button"></button>
</div>
jQuery
jQuery('.button').on( 'click', function( e ) {
e.preventDefault();
jQuery(this).parents( '.gallery li' ).animate( { opacity: 0 }, 300,function() {
jQuery(this).remove();
});
});
Thanks in advance,
try like this:
jQuery('.button').click(function(e){
e.preventDefault();
jQuery('.gallery .gallery-list li').remove();
});
or like this according to your code :
jQuery('.button').on( 'click', function( e ) {
e.preventDefault();
var gallery = jQuery(this).parents( '.gallery' );
jQuery(gallery).animate( { opacity: 0 }, 300, function() {
jQuery(".gallery-list li", jQuery(gallery)).remove();
});
});
As you are looking for removing all the li elements under the class gallery-list. You can try as below -
jQuery('.button').on('click', function(e) {
e.preventDefault();
jQuery('.gallery-list > li').animate({
opacity: 0
}, 300, function() {
jQuery(this).remove();
});
});
I want to apply slimScroll function on 2 different divs. only one div is active at one time.
So, i am using a variable to get current tab name. When user clicks Reviews, slimscroll shall apply on #reviews and if gallery is clicked, it should switch to gallery.
html code:
<ul class="nav nav-pills nav-justified">
<li class="active">Reviews</li>
<li>Gallery</li>
</ul><!-- tabs -->
<div class="tab-content">
<div class="tab-pane active" id="reviews">
reviews
</div>
<div class="tab-pane" id="gallery">
gallery
</div>
</div>
jquery code:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = ($(this).text());
alert(current);
});
$('article').slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
});
Do like this:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = $(this).attr("href").split('#')[1];
$(this).closest('ul').find('li').removeClass('active');
$(this).parent().addClass('active');
//$('div.tab-pane').removeClass('active');
//$('div#'+current).addClass('active');
alert(current);
$('#'+current).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
or:
$(document).ready(function(){
$('.nav-pills li a').on('click',function(){
var current = $(this).attr("href").split('#')[1];
$(this).closest('ul').find('div.tab-content').find('div.tab-pane').removeClass('active');
$('div#'+current).addClass('active');
alert(current);
$('#'+current).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
$('.nav-pills li a').on('click', function(e){
e.preventDefault();
$(this).parents('li').siblings().each(function() {
$(this).removeClass('active');
$($(this).find('a').attr('href')).unbind('slimscroll');
});
$($(this).attr('href')).slimScroll({
position: 'right',
height: '370px',
railVisible: true,
alwaysVisible: true
});
});
http://jsfiddle.net/deepansh/BHCZ4/2/ this is a fiddle.
I want to save toggle state in cookie so that after page reload I get the same state, and I want to close previously-open list after clicking for opening new list.
I want to do in in minimum lines.
HTML
<ul class="nav sidebar-nav" id="am_menu">
<li> <span>User</span>
<ul>
<li>Add User
</li>
<li>List User
</li>
<li>User Profile
</li>
</ul>
</li>
<li> <span>User</span>
<ul>
<li>Add User
</li>
<li>List User
</li>
<li>User Profile
</li>
</ul>
</li>
</ul>
CSS:
ul {
width: 200px;
}
img {
width: 14px;
}
li ul {
display: none;
}
li ul {
padding-left: 4em;
list-style:none;
}
li ul li {
line-height:35px;
}
li ul li ul {
padding-left: .5em;
}
JS
$(function () {
$('li').filter(function (i) {
return $('ul', this).length >= 1;
}).each(function (i) {
$(this).children("a")
.click(function (e) {
var $ul = $(this).next("ul");
if ($ul.is(":visible")) {
$ul.find("ul").toggle("slow()");
$ul.toggle("slow()");
} else {
$ul.toggle("slow()");
};
})
});
});
I'd personally take the approach (using, as in Arun's answer, the $.cookie plugin):
$(function () {
var toShow = $.cookie('lastShownIndex'),
topLevel = $('#am_menu').find('> li');
topLevel.click(function(){
$(this).children('ul').slideToggle().end().siblings().children('ul').slideUp();
$.cookie('lastShownIndex', $(this).index());
}).eq(toShow).find('ul').show();
});
JS Fiddle demo.
References:
children().
click().
end().
eq().
find().
index().
show().
slideUp().
jQuery cookie plugin is used
$(function () {
$('#am_menu li:has(ul) > a').click(function (e) {
var $ul = $(this).next("ul");
$ul.toggle("slow");
$('#am_menu li ul').not($ul).slideUp();
$.cookie('curr.menu', $(this).parent().index())
});
var cindex = $.cookie('curr.menu');
if (cindex != undefined) {
$('#am_menu li:has(ul)').eq(cindex).children('a').click()
}
});
Demo: Fiddle