Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});
Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});
After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});
Related
So I'm making a website for someone and I'm quite new to jQuery (which probably doesn't help). The site needed a dropdown menu to display links to the galleries in a list rather than having them all in the navigation bar. The problem is, whenever I hover over the li element the dropdown slides down but when I hover over the dropdown, it slides back up.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
},
function () {
$('ul.nav-dropdown').slideUp('medium');
}
);
});
Probably something simple, but help is quite welcome. JSFiddle below.
http://jsfiddle.net/6e87Lwkb/
You are toggeling the event in the me handler, you need to do this:
$(document).ready(function () {
$("li#navi-dropdown").on('mouseover',function () {
$('ul.nav-dropdown').slideDown('medium');
})
$("ul.nav-dropdown").on('mouseleave',function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I have also updated your fiddle, check it out it works now.
here is my fiddle:
http://jsfiddle.net/6e87Lwkb/7/
Consider putting your ul submenu inside your li, and reposition it.
Don't forget to use .stop() too, so as jquery don't queue your slides animations :
$('ul.nav-dropdown').stop().slideDown('medium');
See your updated fiddle here
Try with this code.
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
});
$(".nav-dropdown").mouseleave(
function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
I want to slideUp all li element and slideDown li elements under current ul element
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$(this).children("li").slideDown();
$("li").slideUp();
e.stopPropogation();
});
this is the fiddle
Problem is it is sliding up everything in the end
What is the mistake i have done?
You need to target the LIs of all other navs excluding the current one, so use not:
e.g.
$(".nav").hover(function (e) {
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
e.stopPropogation();
});
JSDFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/
As you are having issues of overlapping actions, the usual "fix" is to stop prior animations so they at least do not chain and run to completion:
$(".nav").hover(function (e) {
$(this).children("li").stop(true,true).slideDown();
$(".nav").not(this).find("li").stop(true,true).slideUp();
e.stopPropogation();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/
You can separate your hover() event hook in to two calls, one for mouseenter and another for mouseleave. On mouseenter you want to slideDown() the li in the current ul. In the mouseleave, you want to make them all slideUp(). Try this:
$(".nav").hover(function () {
$(this).children("li").slideDown();
}, function() {
$("li").slideUp();
});
Updated fiddle
According to your code $(this).children("li").slideDown(); makes all li to slide down. And, $("li").slideUp(); will make all li slideup!!
Please do
$(".nav").hover(function (e) {
$(".nav").not(this).find("li").slideUp();
$(this).children("li").slideDown();
e.stopPropogation();
});
refer jQuery not
I added a class to fix this issue
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$("li").removeClass();
$(this).children("li").addClass("current").slideDown();
$("li:not(.current)").slideUp();
e.stopPropogation();
});
Fiddle link
My navigation links are in layout page and they look like:
<h3 id="my-navigation">
ANKETA
STATISTIKA
...
</h3>
I need active link to change color. CSS to achieve this:
#my-navigation a.active {
text-decoration:none;
color:#E0EBEB;
}
Since there are no navigation links in all html pages, but just in layout, I tried with javascript:
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
Why doesn't this work?
EDIT:
I realised that this gives effect just temporary (at the time of click). For example:
$(document).ready(function () {
$('#my-navigation a').click(function () {
$('#my-navigation a').addClass('active');
});
});
blinks all links on click. So, what to do?
The jQuery script you've included works just fine on my end, so I'd say the issue is most likely either with the version of jQuery you've linked on your page or the script being loaded before the links fully render.
Try surrounding the script you listed with a document ready like this:
$(document).ready(function() {
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
});
It is also acceptable to replace the first line with the shorthand version:
$(function() {
This will ensure the page's content is fully loaded before it assigns the on click trigger to the links, as the links must exist prior to that being defined.
Your code should work, at least it works here: https://jsfiddle.net/kvk1keds/
I just changed the click method for
$('#my-navigation a').on('click', function (ev) {});
You should make sure that the method is running and the class 'active' is being set.
if i make a hover over my menulinks currently all submenues which are on the first level will be shown
i dont know whats wrong, see my code:
$('#menu li').hover(function () {
//show its submenu
$('ul', this).slideDown(100);
}, function () {
//hide its submenu
$('ul', this).slideUp(100);
});
so in my opinion it must work very well because a hover over a link should only display this first submenu. But also the submenu of this first link will show directly by a hover and i dont know how to fix it better than yet.
need some help please.
For a better understanging i hve created a fiddle here.
Your selector in your hover functions are finding all ul elements that are descendants of the li element. You want to show only direct children. Try this instead:
$('#menu li').hover(function() {
//show its submenu
$(this).children('ul').slideDown(100);
}, function() {
//hide its submenu
$(this).children('ul').slideUp(100);
});
The <ul> which is holding your submenus also contains the sub-submenus. So if you display the first list, it automatically also shows all elements contained in that list.
you should separate the ul for different levels of submenu using different class for different levels of menus.
if you want to just change your code you might want to try this change:
//show its submenu
$('ul', this).eq(0).slideDown(100);
You need to specify the list you want to show. Use $(this) as context to find the <ul> inside, and then filter the result with the :first pseudo-selector.
Try something like this for both hoverIn and hoverOut events:
$("#menu").on('hover', 'li', function(e){
// $(this) refers to the <li> being hovered
$(this).find('ul:first').slideToggle(100);
});
See the docs for on() and slideToggle() methods.
I have a simple jQuery script. This is the script:
var menu = $('#nav .menu');
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').slideUp();
});
This script open a submenu. But i have a problem with this script. If you go over it quickly. The script launch every time. When you go over the item verry quickly. The menu open a lot of times. How can i fix this?
Thank for help
use jQuery's .stop() function. Passing in the necessary arguments ex. .stop(true,true),.stop(true)
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').stop().slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').stop().slideUp();
});
or passing this as the context seems a little neater to me - it does the same thing as .find()
$('li', menu).mouseenter(function() {
$('.sub-menu',this).stop().slideDown();
}).mouseleave(function(){
$('.sub-menu',this).stop().slideUp();
});
Use this way:
$('#nav .menu li').hover(function() {
$('.submenu').stop().slideDown();
}, function(){
$('.submenu').stop().slideUp();
});