Develop Reference

Can't make the if else jquery statement work

I added the code to the js below. When you click on either the Sign up or Login the arrow moves / point up, but when you close it again it stay that way. Can someone help me out figure what to do.
I tried using this post but cant make this work either here
Here is the Jquery script I use
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideUp();
})
$('#signup-trigger').click(function () {
$('#login-content').slideUp();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideToggle();
});
});
Here is my jsfiddle, ( I know some people don't pref jsfiddle but since I have a lot of code and it will be so much easier to show what I'm trying to do with it)

the problem is since you are adding the class active to it, on click event .. and right after, you are checking if it has a class active(which is always true)...
use toggleClass(it toggles the mentioned class) instead of addClass and check with hasClass
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}else{
$(this).find('span').html('▼');
}
$('#signup-content').slideUp();
});
.... //same for signup
fiddle here
and yes I know some people don't pref jsfiddle .. i guess you are wrong , i am sure most people prefer jsfiddle rather than the code itself since it is easier to test in fiddle.

You missed else part.
Try:
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}
else{
$(this).find('span').html('▰');//code of down arrow
}
Fiddle here.

You never remove the class active, so after the first click it looks like it is always active, and you also never change the triangle shape after the first click.
This code should work for the login:
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
$(this).addClass('active'); //Add class
$(this).find('span').html('▲'); //BLACK UP-POINTING TRIANGLE
} else { //Now is active, I'll make it not active
$(this).removeClass('active'); //Remove class
$(this).find('span').html('▼'); //BLACK DOWN-POINTING TRIANGLE
}
$('#signup-content').slideUp();
})
This is the jsfiddle link.

Using Jquery background to change css - How to Allow only one link at a time

I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/

I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example

I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().

You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});

LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);

Simple jquery click event script, its a loop

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();
});

Jquery - Pseudo-recursive function with "this" element

I'm trying to apply a cool animation effect on a list with Jquery using a pseudo-recursive function.
It works pretty well for the first item, but after the first loop, the this which was selecting #column-left section becomes the li so of course, the function does not find the next li:hidden because it is already inside. Is there a way for me to come back to my original this once the "this" has changed or maybe do something different ?
$("#column-left section").mouseenter(function fadeItem(){
console.log(this);
$(this).find('ul li:hidden:first').delay(500).fadeIn(fadeItem);
});
Thank you very much for your help.

How about after the .fadeIn() trigger a mouseenter event on the parent section element:
$("#column-left section").mouseenter(function () {
$(this).find('ul li:hidden:first').delay(500).fadeIn(function () {
var $this = $(this);
//check to make sure there are more hidden `<li>` elements
if ($this.siblings('li:hidden').length > 0) {
//trigger a `mouseenter` event on the parent `section` element to continue the queue
$this.parents('section').trigger('mouseenter');
}
});
});
Here is a demo: http://jsfiddle.net/bhTnL/2/

You can use .end():
$(this)
.find('ul li:hidden:first')
.delay(500)
.fadeIn(fadeItem)
.end(); // returns to first selector
But you don't actually need to do this. To select the next hidden li, just do this:
$(this)
.find('ul li:hidden:first')
.delay(500)
.fadeIn(fadeItem)
.closest("li:hidden")
.delay(500)
.fadeIn(fadeItem);

Every function has access to the call method which allows you to pass in your this parameter. I rewrote your original solution using it here:
$("#column-left section").mouseenter(function fadeItem(){
$(this).find('ul li:hidden:first').delay(500).fadeIn.call(this, fadeItem);
});

Ok guys, I found an even better way:
$(this).find('ul li:hidden:first').delay(100).show("fast",function(){
$(this).next(':hidden').show("fast",arguments.callee);
});
Simply use next() (more info) to select the next li then call the function itselt using arguments.callee (more info)
Which gives the full following script below to show the list and hide it:
//show
$("#column-left section").mouseenter(function(){
$(this).find('ul li:hidden:first').delay(100).show("fast",function(){
$(this).next().show("fast",arguments.callee);
});
});
//hide
$("#column-left section").mouseleave(function(){
$(this).find('ul li:visible:last').delay(100).hide("fast",function(){
$(this).prev().hide("fast",arguments.callee);
});
});

click li, go to next li

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')
});
});
});