I have a fiddle at http://jsfiddle.net/k8XCP/1/ where I'm trying to create a helper that consists of the original thumb being dragged plus an image that shows the user a tip. It's trying to work, but it has two problems:
The combined helper being dragged (newHelper) starts off where the newHelper div was laid down, even though I try to set the newHelper offset to the e.clientX/e.clientY of the click. I'd like the helper to start where the thumb is.
After I drop the helper, the original thumb in the gallery div is gone, and dragging has broken so that I can't drag the second image.
I build the newHelper with
function buildHelper (){
$(this).prependTo('#newHelper'); // this keyword is the thumb
return $('#newHelper');
}
Does anyone see what I'm doing wrong?
Thanks
For the buildHelper function to work as expected, it has to return a clone of the original element that you want to drag + clone of #newHelper .
I think there are better solutions to this problem, but for your example this will work;
function buildHelper() {
return $("#newHelper").clone().append($(this).clone());
}
You can view an example of this: http://jsfiddle.net/Rusln/EXQhx/
Related
I'm making a game of connect 4 in delpi. I need to put the correct coloured circle in the correct place, according to where the user has clicked. How do you load an image (JPEG prefereably) into a specific cell?
I have no idea where to start with this (because my teachers are useless lol) so any help would be so appreciated.!!
on form create:
images:=timagelist.Create(self);
image1:=tjpegimage.Create;
image2:=tjpegimage.Create;
bimage1:=tbitmap.Create;
bimage2:=tbitmap.Create;
try
image1.loadfromfile('red.jpg') ;
bimage1.Assign(image1);
image2.loadfromfile('yellow.jpg') ;
bimage2.Assign(image2);
finally
image1.free;
image2.free;
end;
images.Add(bimage1,nil);
images.Add(bimage2,nil) ;
on drawcell:
row:=c4grid.Row;
col:=c4grid.Col;
images.Draw(c4grid.Canvas,row,col,0);
So far nothing happens, and there is no evidence that you can actually click the cell. Any help/advice/guidance would be much appreciated!
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
I have two Meteor.Collections in my app. One contains a bunch of "slider" objects, which define a title, max, min, base value, and step for each slider. Now, I have two problems. The first is making the sliders show up in the first place. I've tried to put the following code:
Sliders.find().forEach(function(slider) {
$("#"+slider._id).slider({
min:slider.min,
max:slider.max,
value:slider.base,
step:slider.step,
change:function(event,ui) {
Data.update({_id:Data.findOne({slider:event.target.id})._id}, {$set:{value:ui.value}});
}
});
});
in Meteor.startup, at the end of my client.js file, in a $(document).ready() block, and nothing seems to get it to work. When I paste it into the javascript console, however, it works. Anyways, that's my first problem.
My second problem is that whenever I slide the slider, the slider disappears. I can keep dragging the mouse around to change the value, but once I let go of the clicker, I can't change the value anymore. I've tried using the above way and calling a Meteor.method that changes it on the server side. It's the fact that I'm updating a collection that is published to the same client that makes the slider disappear. Anything short of that doesn't cause it to disappear. How should I deal with this?
Thanks!
Have you already tried using the Template.preserve method? http://docs.meteor.com/#template_preserve
I have to add istantly some items without reload the page. After adding these elements I call
$('#one').trigger('create');
But not everything changes as it should (screenshot: http://www.ianaz.com/9a7c50414.html )
The background stays grey, the icon at the right is not added and the text becomes link.
It does not transform everything in a list "button". The third component in the screenshot is as should be.
Do I have to call another method?
Thanks
Just before you call create,try to call listview("refresh") on the list.For eg. if list is the id of the listview,following code should be used:
$("#list").listview("refresh");
Is it possible to put a background image, and/or modify the close button (X) in the sidebar's titlebar?
I know I can set the text value of it by changing sidebartitle="" but is there any way to put an image in there?
Basically I'd like to put my logo up there instead of inside the sidebar where real-estate is already limited.
I'd also like to be able to do this without modifying my profile CSS so that I can deploy the changes with the extension.
Any ideas?
I ended up finding the element within sidebar-box with the ID of "sidebar-header" and setting that to a variable named "sbhead".
I was then able to sbhead.style.display="none";
Finally in my overlay.xul I added an hbox tag as a new header and set the height to 25 pixels so it would look about the same as the tabs.
Inside the hbox I added the content I wanted, to include a close button that calls toggleSidebar() so that the functionality of the header was the same.
I hope this is helpful to someone!