Develop Reference

How to select between a list css classes

I have a div with a next and previous button
<div class="b1"></div>
<input type="button" class="btnP" value="Prev"/>
<input type="button" class="btnN" value="Next"/>
and a list of css classes
.b1 { background-color:#fff;}
.b2 { background-color:#000;}
.b3 { background-color:#123;}
.b4 { background-color:#444;}
.b5 { background-color:#bbb;}
which i want to use for that div when the user press the next or previous button by that numbering order.
This is what i did so far:
http://jsfiddle.net/51dq5num/
var size_ini = 1;
$(".btnN").click(function () {
var size_increase = size_ini++;
var size_increase1 = size_ini;
$("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);
if (size_increase > 4) {
size_ini = 1;
}
});
I manage to get the next button working but i'm not sure how to do it for the previous button
Is there a better way to do this rather then adding and removing css classes from the div?

Try this :
$(".btnP").click(function () {
var size_increase = $("#content").attr("class").substring(2, 1);
size_increase--;
if (size_increase < 1) {
size_increase = 5;
}
$("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);
});
jsFiddle : http://jsfiddle.net/51dq5num/7/

You can do something like this:
var newClass = function(div, next) {
div[0].className = div[0].className.replace(/b\d+/, "b" + newClass[next ? 'next' : 'prev']());
};
newClass.atual = 1;
newClass.last = 5;
newClass.next = function(){
this.atual = (this.atual == this.last ? 1 : this.atual + 1);
return this.atual;
};
newClass.prev = function(){
this.atual = (this.atual == 1 ? this.last : this.atual - 1);
return this.atual;
};
var myDiv = $("#content");
$(".btnN").click(function () {
newClass(myDiv, true);
});
$(".btnP").click(function () {
newClass(myDiv, false);
});
Jsfiddle here.

This is a combined solution for both buttons.
var size_ini = 0;
$("input[type='button']").click(function () {
if($(this).hasClass("btnN"))
{
size_ini=size_ini+1;
var c="b"+size_ini;
$("#content").removeClass().addClass(c).html("TG"+size_ini);
}
else
{
size_ini=size_ini-1;
var c="b"+size_ini;
$("#content").removeClass().addClass(c).html("TG"+size_ini);
}
});
Note as it is not mentioned i have not checked on the max condition thus btnP can increase the counter infinitely.You can put it in a condn and limit it to a max value.

http://jsfiddle.net/n8dLgh3L/1/
Here is js code to increase and decrease.
var size_ini = 0;
$(".btnN").click(function () {
if (size_ini > 4) {
size_ini = 1;
} else {
size_ini++
}
$("#content").html("<span>" + size_ini + "</span>").removeClass().addClass("b" + size_ini);
});
$(".btnP").click(function () {
var size_decrease = $("#content").attr("class").substring(1, 2);
if (size_decrease <= 1) {
size_decrease = 5;
} else {
size_decrease--;
}
$("#content").html("<span>" + size_decrease + "</span>").removeClass().addClass("b" + size_decrease);
});

You ca achieve this with the help of .substr() for incrementing the number of class. Have a look.
function Getnumber(classNumber,nav)
{
var no=0;
if(nav=="P")
{
no=parseInt(classNumber.substr(1,2))-1;
}
else
{
no=parseInt(classNumber.substr(1,2))+1;
}
return no;
}
$(".btnN").on("click",function(){
var oldClass=$('div').attr("class");
var num=Getnumber(oldClass,"N");
if(num<6)
$('div').addClass("b"+num).removeClass(oldClass);
});
$(".btnP").on("click",function(){
var oldClass=$('div').attr("class");
var num=Getnumber(oldClass,"P");
if(num>0)
$('div').addClass("b"+num).removeClass(oldClass);
});
Feel free to ask.

clicking twice on the same element and then on another element brings the first elment to the "clicked" state

I have an interactive illustration where you can hover over elements and then if you click on them you can see a popover and the clicked element gets black. It works quite good, but there is a problem with the click and hover code. If one clicks on the same element twice in a row and then on another element, the first element gets black. Try for yourself: http://labs.tageswoche.ch/grafik_osze
Here is the code:
var sourceSwap = function () {
var $this = $(this);
if (!$this.hasClass('active')) {
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
};
var makeActive = function() {
var $this = $(this);
// bring the active back (if any) to the first state
if ($('img.active').length) {
var newSource = $('img.active').data('alt-src');
$('img.active').data('alt-src', $('img.active').attr('src'));
$('img.active').attr('src', newSource);
$('img.active').removeClass('active');
}
$this.toggleClass('active');
}
$(function() {
$('img[data-alt-src]')
.each(function() {
new Image().src = $(this).data('alt-src');
})
.hover(sourceSwap, sourceSwap);
$('img[data-alt-src]').on('click', makeActive);
});
To try for yourself: http://jsfiddle.net/8wtvvka5/

i tried this on fiddle:
function swap(e)
{
var src = e.attr('src');
var active = e.hasClass('active');
var dark = src.indexOf('_h.png', src.length - '_h.png'.length) !== -1;
e.attr('data-src-dark', dark);
if (active || e.attr('data-src-dark') == true) return;
e.attr('src', e.attr('data-alt-src'));
e.attr('data-alt-src', src);
return active;
}
var sourceSwap = function ()
{
if (!$(this).hasClass('active'))
{
swap($(this));
}
};
var makeActive = function()
{
var active = $(this).hasClass('active');
$('img.active').each(function()
{
$(this).removeClass('active'); swap($(this));
});
if (active) $(this).removeClass('active');
else $(this).addClass('active');
swap($(this));
}
$(function() {
$('img[data-alt-src]')
.each(function() {
new Image().src = $(this).data('alt-src');
})
.hover(sourceSwap, sourceSwap);
$('img[data-alt-src]').on('click', makeActive);
});
$('img.active') is a complete set of elements so you should use the 'each' function to handle them all
JUST COPY-AND-PASTE to fiddle to check it out yorself :)

jQuery - unbind and bind again

hi I tried to show the div (blue one) on mouseenter but only then, when ul has class hidden.
I have done it but how i dont know how can i bind again function which will show the blue div on mouseenter ..
To test it hover on the white li, then click the violet button and try to hover white li again - in the last step should show blue li but ii wont :(
this is my fiddle
fiddle
$(document).ready(function(e){
$('li').each( function() {
var elem_number = $(this).index();
$(this).html(elem_number + 1);
});
$('.left-panel-toggle').on('click', function () {
if($('ul').hasClass('hidden')) {
$('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
$('li').animate({height:'100px',width:'150px'}, 200);
$('li').unbind("mouseenter");
} else {
$('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
$('li').animate({height:'30px', width:'30px'}, 200);
}
});
$( "li" ).bind('mouseenter',function(e) {
if($('ul').attr('class') == 'hidden') {
$('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
var tooltip_height = $('.tooltip').height();
var tooltip_width = $('.tooltip').width();
var viewHeightY = $(window).height();
var li_position = $(this).position();
var li_height = $(this).height();
var li_width = $(this).width();
var tooltip_position = $('.tooltip').position();
var tt = tooltip_position.top + tooltip_height
if(li_position.top < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - li_position.top, 'left':li_position.left + li_width + 15});
}
if(li_position.top > tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top -((li_position.top + tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});
}
}
// $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault();
});
$( "ul" ).bind('mouseleave', function() {
$('.tooltip').animate({'left':'56px','opacity':'0'},60);
});
});

Keep dropdown open on hover jQuery

I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/

Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.

jQuery rearrange DOM elements

I'm a little confused why this is not working how it's supposed to.
I have a list of <div>s that wrap around based on the size of the page. But clicking the div it .animate() the width of the clicked div and animates the divs after it closer together and stacks them.
This all works except the last stacked div, despite having plenty of room still gets knocked down to the next row.
please see my code on jsfiddle:
http://jsfiddle.net/ZHYRq/2/
$.each($('.employee-box'), function(i, el) {
$(el).addClass("top-" + (Math.round($(el).offset().top)));
return $(el).css('position', 'relative').attr('data-left', Math.round($(el).offset().left));
});
$('.employee-image').hover(function(e) {
var $employee;
$employee = $(e.target).parents('.employee-box');
if (e.type === 'mouseenter') {
return $($employee.find('a.bio')).addClass('highlight');
} else {
return $($employee.find('a.bio')).removeClass('highlight');
}
});
$('.employee-image, a.bio').click(function(e) {
var $employee, is_expanded, speed;
speed = 150;
$employee = $(e.target).parents('.employee-box');
is_expanded = $employee.hasClass('bio-expanded');
if ($('.bio-expanded').length > 0) {
$.when(collapse_previous_bio(speed)).then(function() {
if (!is_expanded) {
return expand_bio_box($employee, speed);
}
});
} else {
expand_bio_box($employee, speed);
}
return false;
});
var collapse_previous_bio = function(speed) {
var klass;
klass = "." + $('.bio-expanded').attr('class').match(/top-\d{1,5}/)[0];
$('.bio-expanded .bio-block').fadeOut(speed, function() {
$('.bio-expanded').animate({
width: "185px"
}, speed);
$(klass).animate({
left: '0px'
}, speed);
$('.bio-expanded').removeClass('bio-expanded');
});
};
var expand_bio_box = function($employee, speed) {
var curr_left, klass;
klass = "." + $employee.attr('class').match(/top-\d{1,5}/)[0];
curr_left = parseInt($employee.data('left'));
// comment out the $.when block and un-comment out the collapse_others() to see the other elements collapse as they should
$.when(collapse_others(klass, curr_left)).then(function() {
$employee.animate({
width: "392px"
}, speed, function() {
$employee.find('.bio-block').fadeIn(speed);
$employee.addClass('bio-expanded');
});
});
// collapse_others(klass, curr_left)
};
var collapse_others = function(klass, curr_left) {
var left_pos;
left_pos = 0;
$.each($(klass), function(i, el) {
var el_left;
el_left = parseInt($(el).data('left'));
$(el).css({
zIndex: 100 - i
});
if (el_left > curr_left) {
$(el).animate({
left: "-" + left_pos + "px"
}, 100);
left_pos += 100;
}
});
};
I'm not sure what is wrong here. Any thoughts?