Develop Reference

jquery show hide not working properly

I've made an animation which fades in and out.
I have two buttons $('.point li') to show two different contents $("#"+classVal+" .table-cell")
However, when I click $('.point li'), I'd like to gradually show its content from white background.
But its opacity remained when I click another button and click back.
Is there a way to show the content from zero opacity every time I click the button?
var q = $('#intro .table-cell'); //this is a first content to show
var qIndex;
$(window).ready(function(){
$('.point li').click(function(){ //click a button
$('.point li').removeClass('active');
var classVal = $(this).attr('class');
$(this).addClass('active');
q.stop(true,false);
$('.bg > div').css('display','none');
$('.bg > div .table-cell').css('display','none');
$('#'+classVal).css('display','block');
q = $("#"+classVal+" .table-cell");
qIndex = -1;
showNextQ();
});
});
function showNextQ() {
++qIndex;
q.eq(qIndex % q.length).show(2000).delay(1000).hide(2000, function(){
showNextQ();
});
}

I found a solution.
The reason why the animation's attributes remained is that JQuery store it to a variable.
So I change the second parameter in a function "stop"
q.stop(true,false);
to True
q.stop(true,true);
which means "jump to end"
Than it works

move a div from one li to another

I am trying to sort from two li. If i will delete any div it will be sort by asc.
The fiddle is
i am using jquery append to to move div.
please take a look in my delete function
function del_slide(no,sdiv)
{
$('.s'+no).remove();
if(sdiv==1)
{
alert("first");
$($('.bxslider .btm-slides').last()).appendTo(".bs1");
}
else if($('.bxslider .btm-slides').last())
{
alert("last");
$($('.bxslider .btm-slides').last()).appendTo(".bs1");
}
}
If i am deleting any item !. Then divs are not in order.
How to do all the items in ascending order? I can't do this sort. Please help me.
I need to put first li full. If i will delete any div from first li then one of 2nd li's div should move to the first div. If i will delete from last li the div will be on the same position.
If i will delete any div then last li will blank. But first li will contain 3 div.If I will delete a div from first li then one div from second li will come to first one.

Did you want something that works like this?
JSFiddle: http://jsfiddle.net/TrueBlueAussie/H6PY6/3/
I removed all the unnecessary classes and links and inline javascript as you can connect it all with jQuery and work out the positions via jQuery DOM traversing.
$(function () {
$(".bxslider").on('click', '.editText', function (e) {
// Stop click of link
event.preventDefault();
// Edit code goes here
}).on('click', '.delSlide', function (e) {
// Stop click of link
event.preventDefault();
var $this = $(this);
// Find current slide we clicked
var $slide = $this.closest('.btm-slides');
// Get parent of slide
var $parent = $slide.closest(".bottom-slides");
// if parent li is the first li
if ($parent.closest('li').index() == 0)
{
// Move up one slide from the last li
var $from = $parent.closest(".bxslider").children().last();
// Move up one item from second section
$parent.append($from.find('.btm-slides:first'));
}
// Empty the contents of the deleted slide
$slide.html('');
});
});

jQuery fade in active element, fade out inactive elements

Update
Using:
$(event.currentTarget).fadeTo(0, 1);
Seems to work, while using:
$('.btn .active').fadeTo(0, 1);
Does not. Any idea why?
The Code
jsFiddle link here: http://jsfiddle.net/SeanKilleen/fwerK/
JavasScript code below:
var global_loggedOnUser = "User1";
$(document).ready(function () {
var viewmodel = (function () {
this.feedbacktype = ko.observable("None");
this.currentPage = ko.observable(location.href);
this.currentUsername = global_loggedOnUser;
this.updateFeedbackType = function (item, event) {
var newText = $(event.currentTarget).children("span").text();
$('#buttonList button').removeClass('active');
$(event.currentTarget).addClass('active');
feedbacktype(newText);
$('.btn').not('.active').fadeTo('fast', 0.3);
$('.btn .active').fadeTo('fast', 1);
};
return {
pageUserIsOn: currentPage,
theUser: currentUsername,
feedbackType: feedbacktype
};
})();
ko.applyBindings(viewmodel);
});
The Goal
I have a list of buttons.
When someone clicks on the button, I want to ensure the button they click on becomes 100% opacity, and the rest of the buttons become 30% capacity.
I'm trying to accomplish this by adding an "active" class to the button and removing it from all others, and then performing the fade based on class.
The Issue
The first click, it works as expected. The clicked button is at 100% opacity and all others fade.
The second time, the previously highlighted element fades, but the clicked button doesn't become 100% opacity, despite being given the "active" css class.
I added a border-size element to the active class so I could verify this. The clicked item expands its border, but does not fade to 100% opacity.
What am I missing?

Remove the space between the classes, you want to select elements with both classes not .active descendants of .btn
$('.btn .active').fadeTo('fast', 1);
should be
$('.btn.active').fadeTo('fast', 1);
Updated fiddle

trying to add a hover and click event to list items that show / hide hidden uls?

Basically I have 2 buttons that when hovered show/hide 2 hidden unordered lists so I use .toggle() for these
What I would also like to do however is when i hover and then click the link the unordered list remains visible, then when i hover and click the other link the previous hidden list is hidden again and the new clicked list is shown? Just not managing to work out how this can be best achieved, at the moment when i hover and then click as soon as i hover off the list disappears.
Hope this makes sense, fiddle is here http://jsfiddle.net/kyllle/D5Lmp/5/
Thanks

EDITED: I see now, updating based on your comment.
Basically, you just have to walk through the set of possibilities:
Hover over something active
Hover over something not active
Click on something active
Click on something not active
It's a logic problem more than anything, and here's the code and the fiddle to solve it:
$('#menu > li > a').hover(function() {
if(!$(this).is('.active')) {
var anyActive = $('#menu > li > a.active');
if (anyActive.length == 0) {
$('ul.inner:visible').hide();
$(this).next().show();
}
}
});
$('#menu > li > a').click(function(e) {
if(!$(this).is('.active')) {
var anyActive = $('#menu > li > a.active');
if (anyActive.length > 0) {
anyActive.next().hide();
anyActive.removeClass('active');
}
$(this).addClass('active');
$(this).next().show();
}
e.preventDefault();
});
Working fiddle: http://jsfiddle.net/D5Lmp/22/

I think I was able to get your desired functionality by excluding the hover toggle based on the active class. You can see it here: http://jsfiddle.net/D5Lmp/9/
code:
$('#menu > li a').hover(function() {
$(this).not(".active").next().toggle();
});

Collapsible menu javascript problem

I am struggling with a collapsible vertical menu. The first part of the script below works, so that the upper UL display its sibling LIs, while the other ULs keep their sibling LIs hidden.
My difficult task (to me at least) is to make the parent UL to the active link keep its sibling LIs visible. This is what I tried in the lower part of the script.
My a-links some times get a trailing hash (#) which I want to remove in order to compare i to the active URL. This is done through the trimHash(string)-function--which works when tested on a simple string, but not in this script.
Any good advice out there?
$(document).ready(function() {
// Collapse everything but the first menu:
$(".mainmenu > li > a").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$(".mainmenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$(".mainmenu li").each(function () {
var li = $(this);
var a = rtrimHash(li[0].firstChild);
if (a.href == location.href) {
$(this).find("+ ul").slideDown(1);
}
});

I ended up with this solution. As it is a Wordpress site, while stepping through the menu items in the menu I could check if each link is active by comparing the link to the active post, and insert the class "current" to these menu items:
echo '<li class="child';
if ( $menuPost->ID == $post->ID ) { echo ' current'; }
And then use jQuery to find all instances of the li "current" class, and trigger the parent ul's to slideDown:
$(document).ready(function() {
// Collapse everything:
$("li.cat").find("+ ul").slideUp(1);
// Collapse everything but the first menu:
//$("li.cat").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$("li.cat").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$("li.current").parent().slideDown(1);
});
Sorry I didn't solve this through javascript as I intended, but I achieved what I wanted.