We Keep Coding

Fade in and out when clicking on an anchor tag

I have a page which loads content with php when clicking on the anchor tags on my menu and it works fine.
I have been trying to find the answer for days now.
Which code do I have to use to fade from one content to another? and where exactly do I add this code?
Here is my code:
$(document).ready(function() {
// Set trigger and container variables
var trigger = $('#centerMenu div a'),
container = $('#content');
// Fire on click
trigger.on('click', function() {
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target + '.php');
// Stop normal link behavior
return false;
});
});

Also you can use this:
$(document).ready(function() {
// Set trigger and container variables
var trigger = $('#centerMenu div a'),
container = $('#content');
// Fire on click
trigger.on('click', function() {
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.fadeOut(250);
container.load(target + '.php').fadeIn(500);
// Stop normal link behavior
return false;
});
});

Give this a try:
$(document).ready(function(){
var trigger = $('#centerMenu div a'),
container = $('#content');
trigger.on('click', function(e){
e.preventDefault();
var $this = $(this),
target = $this.data('target');
container.fadeOut(500,function(){
container.load(target + '.php', function(){
container.fadeIn(500);
});
});
});
});
Note that 300ms is default fade time. I changed to 500 to show you where to make that change, if desired.

Auto clicking on page load quicksand jquery

I am using quicksand jquery and i have searched for solutions and none work. I am trying to auto-click a category when the page loads to filter what I want to filter.
Here is the links on the page that allow users to click and filter
<li>Everything</li>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
when the page loads, it show ALL items and then the user can select the category to filter by. i want to auto click one, and am looking for the function to generate the click.
here is what i have tried with no solution:
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script>
$(function() {
// It would be better to create a function for this, but
// to avoid code duplication the click() event is triggered/reused
$('.filteroptions li a cat2').click();
});
</script>
Here is the js file it operates from and why i chose to remove "filteroptions" and try "filter" as was suggested in other posts. as mine shows ".filter li a" not filteroptions li a
// DOMContentLoaded
$(function () {
// bind radiobuttons in the form
var $filterType = $('.filter li a');
// get the first collection
var $applications = $('#list');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$filterType.click(function (e) {
$('.filter li a').removeClass('selected');
$(this).addClass('selected');
if ($(this).attr('id') == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[class=' + $(this).attr('id') + ']');
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad',
attribute: 'id'
}, function () {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', social_tools: false, slideshow: 2000 });
});
});
});
And here are other posts that you may say are the same, but i tried them and they do not work. They are using an older type of quicksand.
JQuery Quicksand: Link directly to pre-filtered Quicksand from another page
First open limited item not all in jQuery Quicksand?

You are using id on not class so change your click tigger to
$(".filter li #cat2").trigger('click');

Jquery UI Selectable - Selecting multiple elements

I'm trying to implement a function to select multiple elements on my application here, but since I'm new to front end development I'm having some trouble controlling JavaScript's events and CSS. I found this post so I'm using It as my guide.
Before using the Selectable() function, I was adding a class (with some CSS) to give my element the appearance that It is selected (clicking one at time), and If I wanted It to be deselected, I just clicked the canvas (triggering a function to remove the class "selectedEffect").
But now I want to select multiple elements (in future I want to be able to group them), so I started using Selectable() and as I said, I found that post, that helped me partially. I was able to copy this piece of code to my project:
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#canvas > div" ).draggable({
start: function(ev, ui) {
editorContent.addClass("hidden");
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#canvas > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
$(currentElement).removeClass("selectedEffect");
$(currentArrow).removeClass("selectedArrow");
var dt = ui.style.top - offset.top, dl = ui.style.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#canvas" ).selectable();
// manually trigger the "select" of clicked elements
$( "#canvas > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#canvas > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#canvas" ).data("canvas")._mouseStop(null);
});
But, after implementing this function, I still having some bugs:
Not able to drag multiple selected objects at same time
If I click one element and then click the canvas(to deselect It), the "selectedEffect" don't disappear.

I just figured It out. The problem was that since I was adding dynamically elements to my canvas, I had to bind the following function to my draggable elements in the moment the where created:
$( "#myNewlyCreatedElement" ).draggable({
start: function (event, ui) {
if ($this.hasClass("ui-selected")) {
// if this is selected, attach current offset
// of each selected element to that element
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
} else {
// if this is not selected, clear current selection
selected = $([]);
$( "#canvas > div" ).removeClass("ui-selected");
}
offset = $this.offset();
},
drag: function (event, ui) {
// drag all selected elements simultaneously
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
selected.not(this).each(function() {
var $this = $(this);
var elOffset = $this.data("offset");
$this.css({top: elOffset.top + dt, left: elOffset.left + dl});
});
}
});

Button targeting 2 'li's in 2 different 'ul's in jquery

I am trying to get a close button to close 2 LIs but they're in 2 different ULs - LIs generated by jQuery dynamically.
When someone enters an item / qty and clicks add they are rendered into a new LI but when they include the pricing, it renders in a different LI
So pressing the "X" in the Item/Qty to close the specific LI wont affect the price corresponding to that item.
Also the "Clear" button works fine just the individual LIs
Any suggestions on fixing this issue without having to add the "X" on the price LI as well?
I hope my explanation makes sense, you can see the code here
$(document).ready(function () {
// Adds typed items and qty to the list
$('#add').on('click', function () {
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li>' + '<div class="delete"></div>' + qty + ' ' + item + '</li>');
var price = $('#price').val();
$('#list-b').append('<li>' + '$' + price + '</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function (event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Deletes/fades out 'li' when X is clicked
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li');
listItem.fadeOut(500, function () {
listItem.remove();
});
});
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function () {
var li = $('li');
li.fadeOut(500, function () {
$(li).remove('li');
});
$('#list').val('').focus();
});
});

You would need to remove the li with the same sibling index from the next ul:
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.fadeOut(500, function () {
$(this).remove();
});
});
Demo: http://codepen.io/anon/pen/emdyqX

$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li');
var ind = listItem.index();
listItem.fadeOut(500, function() {
listItem.remove();
});
$('#list-b').find('li').eq(ind).fadeOut(500, function() {
$(this).remove();
});
});
http://codepen.io/anon/pen/OPRzKx

Remove Select option after doing the action

I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});

Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.

You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO

Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});

one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.

You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();