Develop Reference

How do i hide child <ul>'s when scrolled to a certain id?

How can I hide my child ul's when they're not supposed to be visible i.e when someone have scrolled to another section? Could you listen for a specific 'frame'/position to show the different sub menus, or perhaps see which section that has the active class and then take that ones .attr('id') and show the corresponding one in the nav?
I hope someone here could contribute with a solution that has good browser support (if that could be an issue).
JSFiddle here
Markup:
<nav>
<ul>
<li>First
<ul id="sub-menu1">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>Second
</li>
<li>Third
<ul id="sub-menu3">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>Fourth
<ul id="sub-menu4">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>Fifth
<ul id="sub-menu5">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
Javascript/jQuery:
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
var link = nav.find('a[href="#'+$(this).attr('id')+'"]');
link.addClass('active');
// Calling this function just to see if there is a sub menu to show
checkSubmenu(link);
}
});
});
// Want to check if there is a Submenu - if, then show it.
// But it should also hide a sub-menu not corresponding to the correct section
// which this solutions does not support
function checkSubmenu(el) {
if(el.next('ul').length) {
el.next('ul').slideDown();
} else {
$('nav > ul > li > ul').slideUp();
}
}
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});

using a somewhat other approach: Fiddle
This doesn't loop all sections, but rather filters the sections on the 'current' section (with filter).
Then it finds the submenu, if any, based on the section number and nav id, much in the same way as was done in the original code.
Every active class, not in that collection, is hidden (slideUp), at the same time removing the active class.
Finally, if not already active, the appropriate submenu is shown.
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
//find visible section
var sect = sections.filter(function(){
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
return cur_pos >= top && cur_pos <= bottom;
});
//find submenu
var submenu = nav.find('a[href="#'+sect.attr('id')+'"]').next('ul');
//hide previously shown, not in the current selection
$('.active').not(submenu).slideUp().removeClass('active');
//if not already active, show
submenu.not('.active').addClass('active').slideDown();
});

buttons gets repeated on every sorting of an item?

I doing sorting of items and i want to show update button when sorting is done, when i have tried getting buttons repeated on number of time i am dragging and dropping the item.
here is my code what i have tried.
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div align="center" id="sortOrder"></div>
<script>
$(function(){
$( "#sortable" ).sortable({
placeholder:"sortable-placeholder",
update: function( event, ui ) {
console.log($("#sortable").sortable("toArray",{attribute:"pageid"}));
},
stop: function(event, ui){
showButton();
}
});
$("button").click(function(){
var order = $("#sortable").sortable("toArray",{attribute:"pageid"});
$.post(
"/page.cfc",
{method:"Ordering",data:order}
);
});
});
function showButton(){
var field = '#sortOrder';
$node = '<button type="submit">Update</button>';
$(field).after($node);
};
</script>
can anyone tell me what's wrong with this code ? THanks

showButton is constantly adding a new button element, so every time it gets called, it will add the button.
You might just want to use $('button').show() and .hide()

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html

it should work too-
$("#1").css("display","block");

$("#1").click("show");
should be:
$("#1").show();

Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle

as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

Selecting an element whose parent element does not have a particular class

Assuming, I have the following HTML:
<ul class="topnav">
<li class="">Page 1</li>
<li class="">Page 2</li>
<li class="">Page 3</li>
<li class="">Page 4</li>
<li class="">Page 5</li>
<li class="active">Page 6</li>
</ul>
When the mouse leaves the LI element, it is suppose change the color of the font back to grey except for the A element whose parent LI has a class value of 'active'.
Below is the JQuery code I am trying: (The 'mouseleave' function is not working)
$(".top_nav li a").mouseenter(
function() {
$(this).stop().animate({'color': '#ffffff'}, 'slow');
});
$(".top_nav li a").mouseleave(
function() {
$(this).parent().not(".active").stop().animate({'color': '#a5acb2'}, 'slow');
});

$(this).parent() selects the li element and all other functions apply to this one instead to the a element.
You can do:
$(this).not(".active > a").stop()...
DEMO

Try using .hasClass():
if($(this).parent().hasClass("active")) {
$(this).stop().animate({'color': '#a5acb2'}, 'slow');
}
If your list items can only be assigned the one class, you can do this:
// class not equals 'active'
$(this).parent("[class!='active']");
Otherwise, this should work:
// class contains 'active'
$(this).parent("[class*='active']");

$(".top_nav li a").hover( function () {
$(this).stop().animate({'color': '#ffffff'}, 'slow');
},
function () {
$(this).parent().not(".active").stop().animate({'color': '#a5acb2'}, 'slow');
});

Filtering content (jQuery)

HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!

$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});

Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.