We Keep Coding

Toggling if a condition is met on table elements

I have a table. Each column has a button at the top. If the td elements below within the column have content in them, then hide the button. If not then display the button and onClick add class active too the td element.
$(document).ready(function (){
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
$(this).hide();
else
$(this).show();
});
<!-- Fill in the td -->
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
$(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
//});
});
});
http://jsfiddle.net/ujw0u6au/
I've created a jsfiddle. I don't know what i'm doing wrong? Thank you

Since you have bind the button toggle logic inside button click - you will always have the button in the starting. When you will click on the button only then it will first hide the button and then make the content active.
In case you want this behavior in the starting as soon as the page loads, you should change below line (the 2nd line in your code) from your code -
$('.button-fill').on("click", function() {
to
$('.button-fill').each( function(i,e) {
also, you should not use <!-- Fill in the td --> style of commenting in JavaScript.

I can see you are having two "click" event handler on same class. Instead of it, you can merge it as well.
Here is the optimized version of your code :
JavaScript :
$(document).ready(function (){
$('.button-fill').on("click", function() { //Only one click event handler
var $this = $(this);
var i=$this.parent().index();
var $trSibling = $this.closest("tr").siblings();
$this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.
})
$(".button-fill").trigger("click");
// explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});
JSFiddle link : http://jsfiddle.net/ujw0u6au/1/
Is this the same what you want?

#Vijay has the right answer, but as a side note, you need to change this:
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
to this
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")
if you want to hide the button when there is content, instead of the other way around (notice the != near the end).

Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar

I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE

Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.

Exclude a radiobutton from .click() of div

I am trying to make and area on my page selectable, but inside there is a radiobutton which i dont want to be part of the selectable area. I have it setup at the moment to allow the user select the area but this also includes the radiobutton:
$(document).ready(function () {
jQuery(document).on('click', 'label[title^="id_"]', function(e) {
$(this).addClass('hide');
var current = "s_" + $(this).attr('title');
$("label[title='" + current + "']").removeClass('hide');
});
});
This basic idea of the code at the moment is hide the selected div and show another. What i want is to exclude the radiobuttons inside this div from the click event.
I tried this: but it prevents clicking of the radiobuttons
if ($(e.target).is('input[type="radio"]')) {
e.preventDefault();
return;
}

As said by Jon in comments(and also my personal answer)
Your code should be:
if ($(e.target).is('input[type="radio"]')) {
return;
}
Put that in opening of the function body of the click event handler.
The return call, will terminate the function so it wont progress further.

jQuery toggle a button value using .prop()

i am trying to make the value of a button change when hovering, but then change back on mouse off.
To change the value this does work:
$(".followbuttony").hover(function () {
$(".followbuttony").toggle('value', 'Unfollow');
});
But of course it stays that value. The problem is that the button value is dynamically loaded in the first place so i cant just set another value on mouse off.
Any help on making this a toggle style action?
I have this jsfiddle to show:
http://jsfiddle.net/T5Vm2/
Thanks!

That's not the way to do it, you have to use both handlers in hover()
$(".followbuttony").hover(function () {
$(".followbuttony").val('Unfollow');
},function() {
$(".followbuttony").val('Following');
});
FIDDLE
Personally, I like this better
$(".followbuttony").on('mouseenter mouseleave', function(e) {
$(".followbuttony").val(e.type=='mouseenter'?'Unfollow':'Following');
});
To store the initial value, change it, and then get it back, you can do :
$(".followbuttony").on('mouseenter mouseleave', function(e) {
if (e.type=='mouseenter') {
$(this).data('val', this.value).val('Unfollow');
}else{
$(this).val($(this).data('val'));
}
});
FIDDLE

You can pass two functions to hover event like this :
$(".followbuttony").hover(function () {
$(".followbuttony").prop('value', 'Unfollow');
},function() {
$(".followbuttony").prop('value', 'Following');
});
Click here - Jsfiddle

jquery priority execution

Can anyone help me with this:
$('#n').click(function() {
$(this).parent().append(' delete');
$(this).next().click(function() {
alert('clicked'); //this not working
});
$(this).blur(function() {
$(this).next().remove();
});
});
JS Fiddle demo; the problem is that the blur() event is executed before click() event.

You can use a timeout to postpone the removal for some milliseconds.
example : http://jsfiddle.net/vkun9/7/
$(this).blur(function() {
var _this = this;
setTimeout(function(){$(_this).next().remove();},100);
});
I also moved the blur attaching to be outside of the click handler, as it was adding an additional one each time the element was clicked, and changed the click handler to the focus to avoid multiple remove buttons from repeated clicking on the input, as #dheerosaur noted.
so
$('#n')
.focus(function() {
$(this).parent().append(' delete');
$(this).next().click(function() {
alert('clicked'); //this not working
});
})
.blur(function() {
var _this = this;
setTimeout(function(){$(_this).next().remove();},100);
});
What you experience, though, is not a problem. It is the normal behaviour, as the element need to lose focus (fires the blur) before another element can have it.
You should also match the label for attribute with the id of the input element.

Use the outside events plugin and you can do something like this:
$('.input_field input').focus(function() {
var div = $(this).parent();
var link = $('delete').click(function(e) {
e.preventDefault();
alert('clicked');
}).appendTo(div);
$(this).data('delete', link);
}).bind('focusoutside clickoutside', function(e) {
var link = $(this).data('delete');
if (link && e.target != link[0]) {
link.remove();
}
});
First switch to using the focus event rather than the click event on your input field, some people actually use the keyboard to navigate through form fields ;-).
Then its creating the delete link, adding it to the page and storing a reference to it in on the input field.
Then with the outside event plugin we can bind focusoutside and clickoutside which get triggered when the user tabs or clicks outside the input field. By checking of the target of the event was the delete link or not we can tell if we should remove the link.
Example: http://jsfiddle.net/petersendidit/vkun9/6/

you can try setting a very short timeout in the blur event. this worked for me.
$(this).blur(function() {
setTimeout(function(){$(this).next().remove();}, 1);
});

Rather than using blur() I put together a hover()-based approach, though it does have a slightly clunky if/else statement:
$('.input_field').hover(
function(){
if ($(this).find('.delete').length) {
return false;
}
else {
$('delete')
.appendTo($(this));
}
},
function(){
if ($('#n').is(':focus')){
return false;
}
else {
$(this).find('.delete').remove();
}
}
);
JS Fiddle demo.
This approach does, however, ensure that there's only one delete link appended to the input_field (rather than the multiple links appended if the input is clicked multiple times in your original demo).