We Keep Coding

ul li selector doesn't work

I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/

Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});

First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});

Navigation bar- animate a ul

I want to make a navigation bar with submenu's that slide out when clicked.
So I want to animate a unordered list when another unordered list item is clicked.
So i'm thinking something like: (excluding the CSS)
<ul id="menu">
<li id="filemenu">File</li>
<li id="reportmenu">Reports</li>
<li id="toolsmenu">Tools</li>
<li id="helpmenu">Help</li>
</ul>
<div class="fileSubmenu">
<ul class = "fileSubmenu sm">
<li>New</li>
<li>Open</li>
<li>Copy</li>
<li>Print Setup</li>
<li>Exit</li>
</ul>
</div>
jquery:
$(document).ready(function () {
$("#filemenu").click(function () {
$(".fileSubmenu").animate({left:'50px'});
});
});
So I would think that the entire 2nd list would slide to the right but it doesn't.
what do the experts suggest?
the basic structure http://jsfiddle.net/zLCWW/2/

Try this one:
$(document).ready(function () {
$("#filemenu").click(function () {
$("div.fileSubmenu").animate({paddingLeft:'50px'});
});
});
because with the left-attribute, you can only modify elements which are position:relative or position:absolute.

Here is a great demo on building and animating a slide out nav menu. This is fixed to left side of screen but you can tweak it to your needs.
Demo

You just need to make your CSS positioning use something other than the default (which is static).
Here's a demo
CSS:
.fileSubmenu {
position: relative;
}
If you have an affliction towards strictly using jQuery:
jQuery:
$('.fileSubmenu').css({'position': 'relative'}).animate({'left': '50px'});

Try this: FIDDLE
JS
$(document).ready(function () {
$("#menu li").click(function () {
$( ".fileSubmenu" ).animate({
width: "70%",
marginLeft: "50px"
}, 1500 );
});
});

One page website, show/hide divs, menu button will not stay selected

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
​
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.

Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

jquery hovering li to show inside paragraph?

simple jquery code to show paragraph only when hovering the LI
<ol id="sortme">
<li>this content <p class="edit">first hidden content</p></li>
<li>this content <p class="edit">second hidden content</p></li>
<li>this content <p class="edit">third hidden content</p></li>
</ol>
Jquery
$(".edit").hide;
$('#sortme li').hover(
function () {
$(".edit").show();
},
function () {
$(".edit").hide();
}
);
my problem is when hovering any of li all paragraph's appear
i need to do it one by on one
so when hovering the first li "first hidden content" appear
and when hovering the second li "first hidden content" disappear and "second hidden content"
and so on for the rest of list

You can search in this context by supplying it as second parameter into $():
$(".edit").hide;
$('#sortme li').hover(
function () {
$(".edit", this).show();
},
function () {
$(".edit", this).hide();
}
);

Do this -
$('#sortme li').hover( function () {
$(this).find(".edit").show();
},
function () {
$(this).find(".edit").hide();
});
OR
$('#sortme li').hover(function () {
$(this).find(".edit").toggle();
});

You need to apply show hide to children of current li having class edit instead of applying to every element having class edit
Live Demo
$(".edit").hide;
$('#sortme li').hover(
function () {
$(this).find('.edit').show();
},
function () {
$(this).find('.edit').hide();
}
);

You can achieve the same effect using CSS only.
http://jsfiddle.net/LNsaa/
#sortme p {
display: none;
}
#sortme li:hover > p {
display: block;
}​
You can then apply CSS3 transitions for some nice and smooth effects.

jQuery .hover() is driving me crazy

I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}

$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});

$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.

I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.