Develop Reference

Make Javascript function ignores the last li to submit form

I have the following html code:
<div class="ranges">
<ul>
<li>Op 1</li>
<li>Op 2</li>
<li>Op 3</li>
<li>Op 4</li>
<li>Op 5</li>
<li>Op 6</li>
<li>Op 7</li>
</ul>
I need to submit a form on the click of op 1, op 2, op 3, op 4, op 5, op 6. In other word, the last li, cant submit the form.
`In this the code Im trying to make this happen:
gData.on('click', '.ranges ul li', function(e){
gFilter.find('form').submit();
});
But this .ranges ul li, will get all the li. How Can I make it ignore the last one?

You can use combination of :not() and :last
gData.on('click', '.ranges ul li:not(:last)', function(e){
gFilter.find('form').submit();
});
$('body').on('click', '.ranges ul li:not(:last)', function(e){
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ranges">
<ul>
<li>Op 1</li>
<li>Op 2</li>
<li>Op 3</li>
<li>Op 4</li>
<li>Op 5</li>
<li>Op 6</li>
<li>Op 7</li>
</ul>

This should work:
gData.on('click', '.ranges ul li:not(:last-child)', function(e){
gFilter.find('form').submit();
});

You can use the :not(:last)function in jQuery.
gData.on('click', '.ranges ul li:not(:last)', function(e){
gFilter.find('form').submit();
});

Use:
gData.on('click', '.ranges ul li', function(e){
if ( !$(this).is(':last-child') ) { //if this is not last child
gFilter.find('form').submit(); //execute submit
}
});

Javascript hover/click trouble

I have an accordian style menu which works fine on hover state but I'd like to change to to click instead...
<script type="text/javascript">
$(document).ready(function(){
$('#nav > li').hover(
function() {
if ($('> span',this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span',this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span',this).addClass('active');
}
},
function() {
$('#nav li ul').slideUp();
$('#nav li a').removeClass('active');
});
});
</script>
But simply replacing hover with click doesn't work, any advise much appreciated I'm a designer so my JS is pretty poor :)

Try this,
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li').click(function () {
if ($('> span', this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span', this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span', this).addClass('active');
}
}).mouseout(function (e) {
if ($(e.target).parents().find('#' + $(this).attr('id')).length) return;
$('#nav li ul').slideUp();
$('#nav li span').removeClass('active');
});
});
</script>
HTML:
<li id="t1"><span>Nav item click me 1</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
<li id="t2"><span>Nav item click me 2</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>

.hover(fucntion() {}, function()); // .hover() accept two function
.click(function() {}); // only accept one
try
$('selector').on('click', function() {
if($(this).hasClass('active')) {
// do something if this has class active
}
else {
// do something if not.
}
} );

Progressive reveal with jQuery

I have nested unordered list.
<ul id="catalogue">
<li>List
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2
<ul>
<li>Item 1.2.2.1</li>
</ul>
</li>
<li>Item 1.2.3</li>
</ul>
</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
At the beginning only the very top level shows, but if you click on each LI, if there's a child UL in it, it should display the next lever, and so on. If you click on the same LI again, the level below should become hidden.
$(document).ready(function () {
$('#catalogue li').each(function () {
$(this).contents().first().wrap("<span/>")
});
$('#catalogue li > span').addClass('brd');
$('ul').hide();
$('#catalogue').show();
$('#catalogue li').click(function () {
var nxt = $(this).children('ul:first')
if ($(nxt).is(":visible")) {
$(nxt).slideUp();
} else {
$(nxt).slideDown();
}
$(this).parent().show();
});
});
If a user clicks on a sibling LI and it has a child UL, that UL should show but any sibling's ones should close.

You need to stop the event from propagating to the parent. Clicking on each li will invoke its own click handler and the event will propagate to its parent li invoke its handler and so on. So you can just stop it at one level by using event.stopPropagation(). And you can use slideToggle to toggle the current state of the element.
Try:
$('#tree li').click(function (e) {
e.stopPropagation();
$(this).children('ul:first').slideToggle();
});
Demo
And if you want to slide up while clicked on its sibling then,
$('#tree li').click(function (e) {
e.stopPropagation();
var $this = $(this);
$this.children('ul:first').slideToggle().end()
.siblings().children('ul:visible').slideUp();
//Code Broken down
//$this.children('ul:first').slideToggle();
//$this.siblings().children('ul:visible').slideUp();
});
Demo

Copy element's attributes to other element in javascript loop

I have a problem in loop js. I would like to copy data-icon value from .nav class to li in #item-control. Is there anyway easy way to solve it with jquery?
<div id="nav-container">
<ul class="nav">
<li data-icon="images/1.png">Item 1</li>
<li data-icon="images/2.png">Item 2</li>
<li data-icon="images/3.png">Item 3</li>
</ul>
</div>
<div id="item-control">
<li>Item Control 1</li>
<li>Item Control 2</li>
<li>Item Control 3</li>
</div>
What I've tried:
$(document).ready(function () {
var a = 1;
$('#container #nav-container ul.nav li').each(function () {
var item_control = $(this).parent().parent().parent().find('#item-control li');
item_control.addClass('item' + a); //this is what I tried before adding data-icon attributes to #item-control li
a++;
});
});

var $navItems = $('.nav li'),
$itemControlItems = $('#item-control li');
$.each($navItems, function(index, el) {
$($itemControlItems[index]).data('icon', $(el).data('icon'));
});
Fiddle

jquery slideDown and slideUp() not working for partial showing

Is it possible to show and hide partially with jquery sliding functions?
Basically, there's a list with 7 items. But only the 1st two are showing initially, while the rest is hidden. I want that when the user clicks to view more, all 7 items should show. And when he/she clicks again only the 1st two are showing and the rest is hidden again. But I can't manage to do it. Please give me some light, thanks.
jquery:
var ul = $('ul'),
showMoreLnk = $('a.show-more');
$('a').click(function(e){
if(ul.outerHeight() === 38){
ul.find('li.hide').removeClass('hide').addClass('show');
ul.slideDown(function(){
showMoreLnk.text('Show less');
});
} else {
ul.slideUp(function(){
showMoreLnk.text('Show more');
ul.find('li.show').removeClass('show').addClass('hide');
});
}
e.preventDefault();
});
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hide">Item 3</li>
<li class="hide">Item 4</li>
<li class="hide">Item 5</li>
<li class="hide">Item 6</li>
<li class="hide">Item 7</li>
</ul>
show more
CSS:
.hide{
display: none;
}
.show{
display: block;
}

Try this:
$('a').click(function (e) {
e.preventDefault();
$('ul li.hide').slideToggle('slow');
});

Check this out.
http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/
and the example:
http://sim.plified.com/jQuery/slide/#

Check out this code:
$('a.show-more').click(function (e) {
e.preventDefault();
var hidden_list = $('ul li.hide');
if (hidden_list.is(':hidden')) {
$(this).html("show less");
hidden_list.slideDown();
}
else {
$(this).html("show more");
hidden_list.slideUp();
}
});
I also created this for you to test in fiddle http://jsfiddle.net/Shanison/H4vbB/2/