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).

Switch between two pages with toggleClass

I've got a page with 2 buttons and 2 divs which are hidden.
When you click the first button the first div should appear, and if you click the second button the second div should appear.
I've managed to get that to work, but what I can't get to work is, that if I have the first div open, and click the second button, I would like it to show the second div and close the first div.
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("vis");
$(".hg_facebook").toggleClass("skjul");
});
});
$(document).ready(function() {
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("vis");
$(".hh_facebook").toggleClass("skjul");
});
});
Here is my fiddle:
http://jsfiddle.net/4mWLk/4/
Best regards
Martin

your js code is a bit incorrect.
You call twice $(document).ready(function() { ... Is enough once time.
try this:
$(function(){
$("button.hh").on("click", function(){
$(".hh_facebook").show();
$(".hg_facebook").hide();
});
$("button.hg").on("click", function(){
$(".hh_facebook").hide();
$(".hg_facebook").show();
});
});
see the updated fiddle: http://jsfiddle.net/4mWLk/5/
update if you want to hide div after clicking on same button: http://jsfiddle.net/4mWLk/8/
Use toggle instead of show (for your comment at my answer)
PS: I updated CSS because there was not neccessary.

If you want it with classes so you can have more control over the effect in case you decide to change it later, you should do it like this:
http://jsfiddle.net/4mWLk/7/
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("skjul vis");
$(".hg_facebook").removeClass("vis").addClass("skjul");
});
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("skjul vis");
$(".hh_facebook").removeClass("vis").addClass("skjul");
});
});
Html:
<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>
What it does is like this:
first the divs start with skjul class so they are in hidden state.
when a button is pressed, toggle both the skjul and vis classes (one is removed, the other is added)
make sure the second div is hidden.

Prevent default function using only child pseudo selectors

I am using jQuery to dynamically add elements every time a user clicks a link (".add-event"). Also included in this element is a icon to remove the entire element if the user chooses. I want to hide or disable this remove icon if the element is the last left on the page. This is what I have tried so far:
$(document).on('click','.close_box2:only-child',function(){
event.preventDefault();
});
AND
if( $('.event').length===1) {
$('.close_box2').hide()
}
HTML:
<div class="event">
<span class="close_box2"><i class="icon-remove"></i></span>
<span class="add-event">Add Event</span>
</div>
What am I doing wrong!? Thanks

JSFiddle: http://jsfiddle.net/TrueBlueAussie/KPY9r/6/
You just want to check for the "last one" inside the delete handler:
// initial hide of sole close button
$('.close_box2').hide();
// On add, clone the template and show all close buttons
$(document).on('click', '.add-event', function () {
// Create a new event based on the template
$('#events').append($('#template').html());
// Show all close buttons (as we must now have > 1 event)
$('.close_box2').show();
});
$(document).on('click', '.close_box2', function (e) {
$(this).closest('.event').remove();
// Is there only one left?
if ($('.event').length === 1) {
// Hide the close box on the last event
$('.close_box2').hide()
}
});
Notes:
I use a dummy <script> element to hold you HTML template. This is better than cloning an element on the page and much better than inline HTML strings in your code.

The following looks better regarding performance:
$('.close_box2:only-child').on('click', function(event){
event.preventDefault();
});

jQuery FadeOut function

I'm trying to add a fadeOut function which links to another. CLICK HERE At present I have a flashing logo. When the user clicks on the logo, the flashing stops, has a slight delay then slowly fades Out. Is there anyone out there that is able to correct me on the code I have pasted below?
<script>
$(document).ready(function(){
$("#center-gif").click(function(){
$('#center-gif').hide();
$('#center-img').show();
});
$('#center-img').click(function(){
$('#center-img').hide();
$('#center-img-gif').show();
});
$('flash-link').click(function(){
$('center-img').fadeOut(5000);
});
});
</script>

If you want to access element with class/id; you must always define . and # these at the begining, like css.
Some Examples:
$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true
Here is working jQuery for your question with less code:
$(document).ready(function(){
$("img").click(function(){
var takeId = $(this).attr('id');//takes clicked element's id
$('img').hide();//hides all content
$('#'+takeId).show();
//matches clicked element's id with element and shows that
});
$('#flash-link').click(function(){//define '#' id declaration here
$('#center-img').fadeOut(5000,//new function after fadeOut complete
function() {
window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
return false;
});
);
});
});

So I assume your problem is that that image does not fade out, right?
This could solve it:
First of all change your .click()-functions to that:
$().click( function(event) {
// cour code
event.preventDefault();
}
And than change the last one like that:
$('#flash-link').click( function(event) {
$('#center-img').fadeOut( 5000, function() {
window.location.href = 'jukebox/dancers.php';
});
event.preventDefault();
});
I didn't test that, but it should work. What it does is: It fades out the image and calls a function when ready. This functions then redirects to your next page.
The event.preventDefault(); will tell the browser not to delegate the click-event. If you don't put it there, the browser opens the anchor without waiting for any JavaScript to execute.
Note
When you want to select an element with an ID use this selector: $('#[id]')as this selector $('html')works only with HTML-elements.

Hide all links except for one in javascript?

What is the best way to hide all links except for one in javascript? (jquery is okay)
Say I have the following:
<div id="choices">
<div><a href="#">A<></div>
<div>B</div>
<div>C</div>
</div>
I want to make it such that if a user clicks link A, B, or C, the div's that do not contain the one that was selected disappear and the choice selected pops up in an alert box. Upon clicking on a reset button, all the divs appear again as normal.
Example: User clicks A, results in B and C divs hiding. User kicks Reset button and all show up again.
How do I accomplish this?
NOTE: I have been assigning IDs to each of the A, B, C divs respectively and made a function where when the user clicks B, it calls a $(divnotclicked).hide() for the ones I want to hide. And for the reset button I just do .show() for each of them $(A).show(), $(b) $.show()(C).show().... but theres gotta be a way to do with without me assigning IDs to each of them. Im looking for the best way to do it.
Im looking for the best way to do this, preferably without manually calling functions for each of them or assigning IDs to each div within the "choices" div. Or having to call on each individual div to ".show" upon clicking the Reset button.

With jQuery, it's quite simple:
$('#choices div').click(function() { $(this).siblings().hide(); });
$('#resetButton').click(function() { $('#choices div').show(); });
Also, here is a jsFiddle with this code in action. In general, jsFiddle is an excelent tool when you need to play with jQuery (or other frameworks, for that matter).

Just get all links and remove the one that was clicked using the not method:
$('#choices a').click(function(e){
e.preventDefault(); // stop the click from activating the link
$('#choises a').not(this).parents().hide();
// do something with the chosen link
});
$('#reset').click(function(){
$('#choices a').parents().show();
});

give each link its individual id. and add the same class to all of them For example:
<a class="mylinks" id="link01" href="someURL">friendly text</a>
then, when someone clicks on one of your buttons, set the css-visibility of the class to hidden, and then set the visibility of the id that belongs to the button to visible again.

Here's how I would do it:
$('#choices a').click(function() {
$(this).parent().siblings().hide();
});
And for the reset:
$('#resetButton').click(function() {
$('#choices div').show();
});
Here's a working example: http://jsfiddle.net/W9Sym/

with:
<div id="choices">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button>Reset</button>
to hide the containing divs of those not selected and have the reset show them, here's a demo
$(function() {
$('#choices').on('click', 'a', function() { //bind click handler to choices, for links
$(this).parent().siblings().hide(); //find the others and hide them
});
$('button').on('click', function() { //bind click to button
$('#choices > *').show(); //show all children of choices
});
});​

You can try doing this:
HTML
<div id='A'>Hi, I'm A</div>
<div id='B'>Hello</div>
<div id='C'>Aaargh!</div>
<a href='#A'>A</a>
<a href='#B'>B</a>
<a href='#C'>C</a>
<button type='reset'>Reset</button>
jQuery
$('a').click( function() {
var show = $(this).attr('href');
$('div').each( function(e) {
$(this).not(show).hide();
});
e.preventDefault();
});
$('button').click( function() {
$('div').show();
});
Kind of verbose, but it should get the job done.