Develop Reference

Else Condition not working java script / jquery

I'm new here, can someone please help me...
i have 2 div's #main and #side.
In my #main div i have few check boxes ,
on checked event, i apend my check box label into #side div and add/remove some classes and it's working perfectly
but when i unchecked my input, it's not working not add/remove classes or apend to #main div
here is my code
$('input[type="checkbox"]').change(function() {
if (this.checked) {
$(this).next('label').removeClass("icon");
$(this).next('label').addClass("icon-active");
$(this).next('label').detach().appendTo('#side');
}
else
{ // This condition not working //
$(this).next('label').addClass("icon");
$(this).next('label').removeClass("icon-active");
$(this).next('label').appendTo('#main');
}
});
Thanks in Advance
Here is a full code.
http://jsfiddle.net/o8n1b8z1/4/

First, since you're using jQuery, I suggest you do not use this.checked, but $(this).is(':checked').
However, the reason your code is not working in reverse is because you're moving the .next('label') in DOM on checking the checkbox. So, on unchecking, .next('label') won't exactly return the label, as it is has been moved.
This is how I'd write your function:
$('input[type="checkbox"]').on('change', function(){
var label = $('label[for="'+$(this).attr('id')+'"]'),
checked = $(this).is(':checked');
label.toggleClass("icon icon-active").appendTo(checked?'#side':'#main')
})
Now, another problem with your script is that, on return, it appends the labels to the end of the div, instead of after the checkboxes. To fix that, here's what you should use:
$('input[type="checkbox"]').on('change', function() {
var label = $('label[for="' + $(this).attr('id') + '"]'),
checked = $(this).is(':checked');
label.toggleClass("icon icon-active")[
checked ? 'appendTo' : 'insertAfter'
]($(checked ? '#side' : this));
})
Updated your fiddle

Did some changes to your else statement and it works. The issue is the Label gets shifted out and the else part no longer identifies the Labels anymore.
Here is the fiddle http://jsfiddle.net/o8n1b8z1/5/
else
{ // This condition working //
var id=$(this).attr('id');
var label = $('label[for="' + id + '"]');
label.addClass("icon");
label.removeClass("icon-active");
$( "#"+id ).after(label);
}

How to copy elements into a div after an on click action?

Using JavaScript and JQuery and underscore
Currently I have the following
<div id="select"></div>
which is populated by the following code
$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function (e) {
$(this).width(100).height(100).appendTo('#select');
So at the moment only the img is taken and placed inside #select, but I would also like for it to include item.A item.C and item.C
But I'm not sure how to change the $(document).ready(function () { code block to achieve this?
I thought I might need to give the div an id and reference that?
I've been able to take the whole lot by concatenating the code block, but thats not how I want it to work, I'd like each element seperate so that I can target it with CSS.
_.each(Badges, function (item) {
var wrapper = $('<div class="wrapper"></div>');
wrapper.append('<img class="images BadgeImgOutline responsive-image" src="' + item.imageURL + '" />');
wrapper.append('<div>' + item.A + '</div>');
wrapper.append('<div>' + item.B + '</div>');
wrapper.append('<div>' + item.C + '</div>');
$('#container').append(wrapper);
});

You could use jQuerys ".parent()" method to get the parent of the img tag - in this case your wrapper div and add this to your select.
The code could look like so:
$(this).width(100).height(100);
$(this).parent().appendTo('#select');
for shrinking the image and appending the whole wrapper including img and items to your select.
Hope this helps

Clear title property while JQuery tooltip shows

I am using some very simple JQuery to create a hovering tool tip using text stored in elements' title attribute. It's working okay, but I need to stop the browser's default title behaviour occurring at the same time (or after the slight delay on hover).
I think JQuery's .on() functionality may not be the best way, although I am trying to use the latest functionality (that I am aware of!).
Currently if I clear the existing title value, the actual tooltip appears but is empty. I think that is because the code runs continuously while the mouse is over the element.
Can anyone offer a way to stop the browser's title text appearing, but restore the original value of title onmouseout? I need the code to work with JQuery 1.10.1+ with XHTML1.1 compatibility.
Thanks.
$(document).ready(function () {
$('<div/>', { id: 'ttfloat', 'class': 'tooltip' }).appendTo('body');
BuildTipsV3();
});
function pageLoad() { // fired by ASP.NET after partial postback
BuildTipsV3();
}
//var temptt;
function BuildTipsV3() {
$("[title]").on({
mouseenter: function () {
var o = $(this).offset();
var y = o.top + 18;
var x = o.left;
temptt = $(this).attr("title"); // temp storage
$(this).data('title', temptt);
//$(this).attr('title', '');
var tooltip = temptt;
tooltip = tooltip.replace(/(\r\n|\n|\r)/gm, "<br/>");
$("#ttfloat").css({top:y, left:x})
.html(tooltip)
.show();
},
mouseleave: function () {
$("#ttfloat").hide();
$(this).attr('title', $(this).data('title')); // reset for accessibility
}
});
}

Try making these lines:
temptt = $(this).attr("title"); // temp storage
$(this).data('title', temptt);
//$(this).attr('title', '');
var tooltip = temptt;
do this instead:
var $this = $(this),
tooltip = $this.attr('title') || $this.data('title');
$this
.attr('title', '')
.data('title', tooltip);
What the code above does is that if the title attribute is empty, the or (||) operator will then look for the title within the data.

Use $(selector).removeAttr('title'); to achieve your desired results.

Add new item to bottom of scrollabe div

I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});​
Demo: http://jsfiddle.net/MrvcB/19/

Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);

Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/

How do I write .level+1 as a selector in JQuery or JavaScript?

A quick question. I have a series of DIVs with the following classes .level1 .level2 .level3
This is what I want to happen...When I hover over .level1 I would like the selector to select .level2. In other words .level+1 whatever I hover over.
How do I write this in JavaScript or JQuery ...The X in the code is where I need this to go
$(".no-submenu").hover(function() {
$.data(this, "timer", setTimeout($.proxy(function() {
$( X ).hide();
}, this), 700));
}, function() {
clearTimeout($.data(this, "timer"));
});
Any help is greatly appreciated, Thanks

If they're in order you can use .next() with a starts with attribute selector
$(this).next('[class^=level]').hide();
jsFiddle example
You can do a replacement with a function:
edit: added in the + to support multi digit levels
function replacer(num) {
return (parseInt(num, 10) + 1);
}
var selector = $(this).attr("class").replace(/([\d]+)$/,replacer);
$("." + selector).hide();
So, in the case above X = "." + selector
simplified jsFiddle example
.replace()
.parseInt()
The above will work based purely on class names.... so the order of the DIVs is not important. If you know the order of the divs, you could use the jQuery .eq() selector.

I didn't test it, but just what I thought of
var x = 1; // You are probably going to change this
$('.level'+x).hover(function() {
$('.level'+(x+1)).dosomething();
},function () {
$('.level'+(x+1)).dosomethingelse();
});