i have been trying to tinker with the callback function of my gridster. all i want it to do is call back the location of my grid, then using jquerys load function , pass it to another page to store and save the information. However i either return an error or nothing upon using this method. current code is as follows
var gridster = $(".gridster").gridster({
widget_margins: [1, 1],
widget_base_dimensions: [318, 184],
serialize_params: function ($w, wgd) {
return {
id: wgd.el[0].id,
col: wgd.col,
row: wgd.row,
size_y: wgd.size_y,
size_x: wgd.size_x
}
},
widget_selector: ".draggable",
draggable: {
stop: function(e, ui, $widget) {
alert('hello world');
}
}
,
draggable: {
handle: ".headertitle"
}
}).data('gridster');
gridster.enable();
any help would be appreciated
solved the problem, was using the defining variable draggable twice, which was canceling out the stop function, moved them into one setup, solved problem
draggable: {
stop: function(e, ui, $widget) {
alert('hello world');
}
}
,
draggable: {
handle: ".headertitle"
}
edited to
draggable: {
handle: ".headertitle"
stop: function(e, ui, $widget) {
alert('hello world');
}
}
Related
I have a problem with a jquery plugin.
I just add a plugin like this :
$.ui.plugin.add("draggable", "smartguides", {
//
start: function(event, ui) {
console.log('TOTO');
}
//
}
I set my options there :
function draggableElementParameters(hash_id, is_smartguides)
{
var datas = {
containment:"#container_page",
scroll: false,
cursor:"pointer",
opacity: 0.35,
tolerance: 5,
cancel: "#cr-stage",
smartguides: '.element-container',
stop: function (event, ui) {
//
});
}, drag: function (event, ui) {
//
}
};
return datas;
}
Then I call it like this :
$("#element-edit").draggable(window.parent.draggableElementParameters({{ json_encode($element->hash_id) }}, Helpers.Utils.Cookie.isTrue('backend-contest-editor-is-draggable-help')));
And to finish, element-container is ok in my view.
The fact is the plugin is never triggered, the console.log never appear.
Any ideas about this bug ?
thank you !
I'm using sortable ui jquery in my page, where i sort collapsed panels that expand on click
the problem is on mobile browser, click event is fired twice so on click it expands then collapses again
any ideas ?
Sortable UI
$( ".sortable" ).sortable({
handle: '.portlet-header',
sort: function(event, ui) {
$(ui.item).find(".processHeader").addClass("dragging");
},
axis: 'y',
revert: true,
scroll: false,
cursor: 'move',
helper : 'clone',
update: function(event, ui) {
ui.item.unbind("click");
ui.item.on("click",function (e) {
e.preventDefault();
return false;
});
},
placeholder: 'sortable-placeholder',
start: function(event, ui) {
// $(ui.item).find(".processHeader").addClass("dragging");
ui.placeholder.html(ui.item.html());
ui.item.css("transform", "rotate(1deg)");
},
stop:function (event,ui) {
ui.item.css("transform", "rotate(0deg)");
},
// forcePlaceholderSize: true,
delay: 350
});
Binding click event for headers
$('.processHeader').off().on('click', fireExpand);
expand function
fireExpand=function () {
// e.preventdefault();
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}
I know it's not optimal but did you try using setTimeout() in order to "ignore" the second click?
fireExpand=function () {
setTimeout(function() { } , 1000)
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}
Kind regards,
Charalampos
currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});
You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});
I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete normally works.
It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.
To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.
Any ideas!?
Working Code - http://jsbin.com/aFeceTe/1/edit?html,js,output
$(document).ready(function(){
var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];
$("input").autocomplete({
source: test,
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Broken Code - http://jsbin.com/uyOGUVU/6/edit?html,js,output
$(document).ready(function(){
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Try this
$(document).ready(function(){
var temp = true;
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
temp = true;
return false;
}
}).focus(function () {
if(temp) {
$(this).autocomplete("search");
temp = false;
}
});
});
SEE DEMO
This is my imgSelectArea code:
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
handles: true,
autoHide: false,
minChars: 0,
autoFill: true,
selectOnly: true,
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onSelectEnd: function (img, selection) {
$("#tagBox").show();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = selection.x2;
var y2 = selection.y2;
var position = $('#<%=imgMain.ClientID%>').position();
}
});
This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn't find this in documentation.
This is the documentation link:
http://odyniec.net/projects/imgareaselect/usage.html#callback-functions
Has anybody got around this issue?
Ok, I haven't got a working dev environment where I am so I can't test this but...
In jquery.imgareaselect.js (I'm using v0.9.8) around line 421:
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}
/*ADD THIS LINE*/
options.onCancelSelection(img);
}
Also, around line 461, add a default, empty function:
...
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
onCancelSelection: function () {}, /* Add This line */
onSelectEnd: function () {}
}, options));
You should then be able to register an event handler as usual...
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
...
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onCancelSelection: function (img) {
/*Do something*/
},
...
});
That's about the best I can do in notepad/ie. If it's still an issue tomorrow, I'll have a go with a dev env.