I'm working on a banner 'slider' with a next, and previous button. There are 3 li elements i'm targetting.
In plain english, this is what i'm trying to achieve - "if the last li element is displayed, (visible) - then hide it, and display the first element.."
Hello - I'm trying to do the following in plain english.
When '#next' clicked, hide current 'li' element, and display the next. IF 'li:last' - rewind / 'show()' first li again.
here is what i have so far.. please provide me with explanation to what's being done with your suggested approach. (also explain if possible, what was wrong on my end.)
Thanks in advance!
$('a#next').click(function() {
var curlistItem = $('li:visible'); // find our 'visible' li element, and assign it to variable
var nextlistItem = curlistItem.next(); // take the 'visible' element, and append the 'next' element
curlistItem.hide(); // hide the visible element
nextlistItem.show(); // show the next element
if (nextlistItem.is('li:last')) { //if last 'li' element,
//restart, rewind, bring back to first 'li'
alert ('this should only display if current list item last element');
Hello all, as you can tell by the following statements, i'm new to jQuery. I'm trying to do the following (in plain english) without too much success..
Any help would be gladly appreciated! --
1) when document ready.. 2) find the element with id 'next'. 3) pull / take all 'li' elements, and perform so and so, all whilst excluding 'last' element.
$(document).ready(function() {
$('#next').click(function() {
$('li').each(function() { //for each li ..
$(this).filter(':last'); //exclude last item in sequence?
$(this).fadeOut('slow'); //fade out current
$(this).next().fadeIn('slow'); //bring in next
});
});
});
My questions are.. - Why is the 'filter' method not being properly executed? - How can i perform a simple transition from one li to the next? (when element with id 'next' is clicked)
*Currently, (with provided script) - it clicks / scrolls through all the way to last element, (quickly) and then fades out..
Hello jQuery community - I have the following code, which works great, but i'm looking for any suggestions that could help condense / simplify this code, considering it's essentially doing the same thing, in exception to the different input element + it's associated value.
For clarity's sake, i've highlighted the differentiators in red.
described below is my dilemma: I have a 'main' navigation, that display a dropdown / sub navigation where necessary.
I'm trying to achieve the following - 1) considering the parent tab has no associated page, I want to ..
a) disable the 'click' through b) add custom css property 'cursor:default' to parent tab, containing a 'ul' element (which is in fact, the dropdown menu)
Problem? With the code pasted below, i've successfully achieved the custom css.. problem - not working as intended.
a) custom css styling, is being applied to 'all' anchor elements in top navigation b) custom css styling also being applied to 'children' anchor elements
/*MAIN NAV, APPLY CUSTOM
CSS BASED ON 'IF' ANY CHILDREN (SUBNAV) PRESENT*/
$("ul.nav.top li a").hover(function() {
if ($(this).has('ul.dropdown')) {
$(this).css("cursor", "default");
}
//revert to standard 'pointer' for child anchor elements
Hi all, here are my intentions. 1) display defaulted 'tertiarynav' for first subnav item and hide rest 2) when a different subnav is clicked, display it's 'tertirary nav' 3) when the selected / active dropdown is clicked, hide it's contents.
My problem with following script, when clicking the selected / active dropdown, it slides up and back down again.