We Keep Coding

What is the essential part of code to make draggable function to work well using Jquery UI?

I was trying to create draggable function from jquery ui but its not working. I think its have something wrong with my jquery coding. Can you guys check it out for me?
todo.init = function (options) {
options = options || {};
options = $.extend({}, defaults, options);
$.each(data, function (index, params) {
generateElement(params);
});
$.each(codes, function (index, value) {
$(value).droppable({
drop: function (event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Changing object code
object.code = index;
// Generating new element
generateElement(object);
// Updating Local Storage
data[id] = object;
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
});
});
$("#" + options.deleteDiv).droppable({
drop: function(event, ui) {
var element = ui.helper,
css_id = element.attr("id"),
id = css_id.replace(options.taskId, ""),
object = data[id];
// Removing old element
removeElement(object);
// Updating local storage
delete data[id];
localStorage.setItem("todoData", JSON.stringify(data));
// Hiding Delete Area
$("#" + defaults.deleteDiv).hide();
}
})
};
var generateElement = function(params){
var parent = $(codes[params.code]),
wrapper;
if (!parent) {
return;
}
wrapper = $("<div />", {
"class" : defaults.todoTask,
"id" : defaults.taskId + params.id,
"data" : params.id
}).appendTo(parent);
$("<div />", {
"class" : defaults.todoHeader,
"text": params.title
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDate,
"text": params.date
}).appendTo(wrapper);
$("<div />", {
"class" : defaults.todoDescription,
"text": params.description
}).appendTo(wrapper);
$("." + defaults.todoTask).draggable();
wrapper.draggable({
start: function() {
$("#" + defaults.deleteDiv).show();
},
stop: function() {
$("#" + defaults.deleteDiv).hide();
},
revert: "invalid",
revertDuration : 200
});
};
This is a Todo Application, like on the pic provided. I want the notes on Pending to be draggable to In Progress.
JsFiddle link
note: the code seems can't be process here while in my localhost it works well except that dragging function.

My problem is solved. I did search for jquery ui not working and i found out that because of compatibility. So they told me to use touch point to make it work. and it did :) Therefore it's not about my coding for it matters.. here's the link for my solution touchpunch.furf.com

jQuery .map() Issue

I have basically no experience with jQuery, just enough to get by most of the time. However, I recently have been changing some templates around and came across a piece of jQuery that I didn't write, but is throwing an error (Uncaught Error: Syntax error, unrecognized expression: /). I'm not really sure where to start. All I know so far is that I'm fairly certain this piece of code is causing it, and it's choking right at the scrollItems line:
// Cache selectors
var lastId,
topMenu = $(".nav"),
topMenuHeight = topMenu.outerHeight() + 50,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
///////////////FANCYBOX
$(".fancybox-media").fancybox({
arrows: true,
padding: 0,
closeBtn: true,
openEffect: 'fade',
closeEffect: 'fade',
prevEffect: 'fade',
nextEffect: 'fade',
helpers: {
media: {},
overlay: {
locked: false
},
buttons: false,
title: {
type: 'inside'
}
},
beforeLoad: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
}
});
});
I have tested the fancybox code separately, and it works, but I thought I'd leave it in to be thorough. There was also some commented out code that I took out. Any help would be very much appreciated!

It's likely that it is this line that is causing the error:
var item = $($(this).attr("href"));
You seem to have a link with href="/" (a link to the start page), so the code will do the same as:
var item = $("/");
jQuery will try to parse the URL as a selector, and you get that exact error message.
Check that the href attribute contains a bookmark and not an URL before you try to use it as a selector:
var href = $(this).attr("href");
if (href.substr(0, 1) == "#") {
var item = $(href);
if (item.length) {
return item;
}
}

jQuery Isoptope Setting Default Sorting Filter Through URL

I am wondering what is the issue with this fiddle: http://jsfiddle.net/GwBa8/150/
I want to change which category loads by default using different links without having to add extra pages to my site. The last working state is this fiddle http://jsfiddle.net/GwBa8/128/. The only difference is the following code added to the start of the jQuery.
//e.g. website.com/index/filter/games
var $criteria = '*';
var str = window.location.pathname;
//games
if (str.substring(str.lastIndexOf('#'))) {
var $criteria='.'+str.substring(str.lastIndexOf('#'));
} else {
var $criteria = '*';
}
Why does this code stop it working?
I would like to have something like www.website/index#games to load games by default.
Thanks!

You could do something like (untested!)
$(window).load(function(){
//e.g. website.com/index/filter/games
var str = window.location.pathname;
//games
var criteria=str.substring(str.lastIndexOf('/'));
var $container = $('.creations-container');
$container.isotope({
filter: '.' + 'criteria',
}
});

Based on #nchaud comment...
$(window).load(function(){
//e.g. website.com/index/filter#games
var str = document.URL;
//games
if ((str.lastIndexOf('#'))!== -1) {
var $criteria=str.substring(str.lastIndexOf('#'));
} else {
var $criteria = '#all';
}
This sets the variable $criteria to the matching id of the link for the category in the navigation.
var $container = $('.creations-container');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.creations-filter a').click(function(){
$('.creations-filter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
$($criteria).trigger("click");
this clicks on the element with the id in the url

Zozo tabs and ajax request

I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.

function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}

I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}

jQuery plugin with extend doesn't take user params

I'm writing a jQuery plugin that makes containers (e.g. a div) of a hyperlink clickable.
I would like it for the user to be able to change some basic parameters.
However I must be doing something wrong, because it always uses the default param and not the user defined one.
I try the overrule the cursor.
The fiddle.
The code:
(function($){
$.fn.clickablecontainer = function() {
return this.each(function(options) {
var defaults = {
cursor: 'pointer',
hoverclass: 'hover',
activeclass: 'active'
//ellipsisText: "..."
};
var options = $.extend(defaults, options);
var elem = $(this);
elem.css('cursor', options.cursor);
$('a', elem).css('cursor', options.cursor);
elem.hover(function() {
elem.addClass(options.hoverclass);
}, function() {
elem.removeClass(options.hoverclass);
});
elem.mousedown(function() {
elem.addClass(options.activeclass);
});
$('body').mouseup(function() {
elem.removeClass(options.activeclass);
});
elem.click(function() {
var target = $('a', elem).attr('target');
var href = $('a', elem).attr('href');
switch(target) {
case '':
case '_self':
location.href = href;
break;
case '_blank':
window.open(href);
break;
case '_parent':
parent.location.href = href;
break;
case '_top':
top.location.href = href;
break;
default:
alert('frame');
top.frames[target].location = href;
}
});
});
};
})(jQuery);
$('document').ready(function() {
$('.container div').clickablecontainer({
cursor: 'help'
});
});
Finished product (special thanks to tvanfosson :) ):
fiddle

You have two definitions of options, since you use var to redeclare it. I suspect this results in the options on the right-hand side being an empty object. It would be better to simply use:
options = $.extend({},defaults,options);
This will keep defaults intact, yet allow the values in options to override them, then reassign to the original options variable.
You also need to move the definition of the options to the outer function, otherwise you aren't actually getting any values.
$.fn.clickablecontainer = function(options) {
var defaults = {
cursor: 'pointer',
hoverclass: 'hover',
activeclass: 'active'
//ellipsisText: "..."
};
options = $.extend({},defaults, options);
return this.each(function() {
var elem = $(this);
...