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);
...
Related
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
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;
}
}
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
I'm trying to implement something very close to what the 'Sortable Widget' would do, though I can't use it because of other things that doesn't work with the premade widget.
So I'm trying to recreate it's functionality with draggable and droppable elements:
$(".Element").draggable({
helper: 'original',
drag: function(event, ui) {
ElementWidth = $(this).outerWidth(true);
if($(this).prev().length){
LeftElementWidth = $(this).prev().outerWidth(true);
LeftElementLeftOffset = $(this).prev().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) < parseFloat(LeftElementLeftOffset+(LeftElementWidth/2))){
$(this).prev().before($(this));
}
}
if($(this).next().length){
RightElementWidth = $(this).next().outerWidth(true);
RightElementLeftOffset = $(this).next().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) > parseFloat(RightElementLeftOffset+(RightElementWidth/2))){
$(this).next().after($(this));
}
}
}
});
$("#Container").droppable({ accept: '.Element' });
It works fine, except for that the draggable-helper doesn't stay underneath the mouse-cursor when I move it's element to the next position.
Check out this fiddle:
http://jsfiddle.net/5qFhg/15/
You'll see what happens when you try to sort the green boxes. How can I keep the helper in position?
http://jsfiddle.net/margaret_/XM6f8/1/
Is this what you are looking for? Are you okay with using knockout? I can't add comments 'cause I don't have 50 reputation.
<input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />
Use parent and previous location to mimic the function.
ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).data("sortList", valueAccessor()); //attach meta-data
$(element).sortable({
start: function(event, ui) {
//track the original position of the element
var parent = ui.item.parent();
var prev = ui.item.prev();
//create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning)
ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); };
},
update: function(event, ui) {
var item = ui.item.data("sortItem");
if (item) {
//identify parents
var originalParent = ui.item.data("parentList");
var newParent = ui.item.parent().data("sortList");
//figure out its new position
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
//move the element back to its original position and let KO handle adding it to the new parent
if (originalParent !== newParent) {
ui.item.moveItemBack();
}
//place item in the proper position
newParent.remove(item);
newParent.splice(position, 0, item);
}
}
},
connectWith: '.container'
});
}
Do you want the divs to appear side by side?
I'm trying to code a function that let me toggle in and out all thumbnails in a list depending on their classes.
e.g., if I click "print" on my menu bar, I need all thumbs with the "print" class to be hidden. If I click it a second time, the hidden thumbs are showing up.
Here is what I came up with :
window.addEvent('domready', function(){
$$('.menu_button').toggle(
function() {
this.fade(0.5);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','0');
});
},
function() {
this.fade(1);
var buttonId = this.id;
$('slider_list').getElements('.'+buttonId).each(function(li) {
li.tween('width','100');
});
}
);
});
//toggle (emulate JQuery's toggle)
(function() {
var toggled = 0;
Element.implement({
toggle: function(fn1, fn2) {
var fns = [fn1, fn2];
return this.addEvent('click', function(){
fns[toggled].apply(this, arguments);
toggled = toggled == 0 ? 1 : 0;
});
}
});
})();
I've found the toggle function here
Now I experience some issues.
First no matter what I do there will always be a thumb left at the end of the list.
Then some clicks on the menu won't do anything. Generally when I click on a button in a different state (hidden/shown) than the previous one, there will always be a null click...
Anybody ?
I implemented it in a way that allows multiple functions, although not at all MooTools like, it will work. The problem with the code you are using is that each element which uses toggle is toggling the same toggled variable
Element.implement({
toggle: function() {
this.store('toggle_options', {
fn: arguments,
cur: 0
});
this.addEvent('click', function(e) {
e.stop();
var opts = this.retrieve('toggle_options');
console.log(opts.fn.length, opts.cur);
opts.fn[opts.cur++].apply(this);
if(opts.cur >= opts.fn.length) opts.cur = 0;
});
}
});
$('button').toggle(
function() {
this.set('text', 'foo 1');
},
function() {
this.set('text', 'bar 2');
}
);
fiddle here: http://jsfiddle.net/94FFj/
Although I would recommend you implemented your code as this:
$$('.menu_button').each(function(button) {
button.store('toggle_active', 0);
button.addEvent('click', function(e) {
e.stop();
var active = this.retrieve('toggle_active');
var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
this.fade(opts[active].opacity);
$$('slider_list .' + this.get('id')).tween('width', opts[active].width);
this.store('toggle_active', active ? 0 : 1);
});
})