I am currently developing a wordpress plugin. This plugin requires to drag certain items onto an image. The layout is like this:
And i need to save the points that are dragged onto the picture into the database. I also need the ability to edit the points or remove the points.
Does anybody knows a good method of achieving this?
Kind regards,
Jack
Edit:
Maybe i'm being a little bit vague about this, but all i need is suggestions.. I do not need people to write code for me.
A google search gave me:
http://www.codingforums.com/showthread.php?t=160798
http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
jQuery get mouse position within an element
http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position
My suggestion is that onmouseup() you get the co-ordinates and store them.
A bit more googling and I found this answer:
Alternatives to trigger('mouseup') to stop dragging programmatically
Maybe this will help you.
Good luck :)
That's a lot you are asking eh, you can't expect us to write it for you but we can point your nose in the right direction :)
I suggest you start looking at the jQuery UI draggable plugin (and of course droppable too), it offers quite a flexible drag and drop implementation.
Manipulate the jquery ui draggable plugin
http://jqueryui.com/demos/draggable/
Related
I'm doing some research before I start a project, and I want to know what the best method of going about this project is before I begin. Any help I can get would be much appreciated, and I'd be happy to provide more information if necessary.
Basically, I'll be given a number of extremely high resolution images to display to users. I want to create an interface whereby the user can scroll around the image and zoom in, as well as hover over parts of the picture and receive some information about that specific location. Also, I would really, really like it if I could do it without using Flash in any way, both because I don't like Flash and because it wouldn't work on i-devices.
Here's an example of the zooming capability that I'm looking for, and here's an example of the hover capability that I'm looking for (sorry they're both biblical manuscripts, don't mean to get religious on y'all, these were the best examples I could find!)
Anyway, so far I've found this spiffy script for zooming, but I haven't found anything for hovering yet (another example of what I'm looking for is something like when you tag someone in a picture on Facebook - if you hover over their face, their name pops up). And to make things all the more difficult, I have to figure out how to make them play nice, so zooming in doesn't break the hovering capabilities.
So my questions are...does anyone have any experience with anything like this? Do you have any suggestions for projects (open source is far preferred) that allow for this kind of thing? I'd really appreciate any help you fine people can give me! I'll be publishing my findings and code afterwards.
I think the technology behind Google Maps (and other such technology) would be the way to go. With Google Maps API you can use your own custom tiles instead of the map tiles. You could then set boundaries on the map to stop the user navigating away from your available imagery. Lastly, you can use the API to specify the coordinates for polygons on the "map". These polygons are great as the allow you to have hover/click events which should provide you the functionality you're after.
A good article I found on something similar to what you're after can be found here: http://forevermore.net/articles/photo-zoom/
Hope this provides some direction and sounds like a fun project that you're about to embark on :)
So essentially I have blocks of text on a page, essentially just about 10 same sizes boxes of text using CSS. I want to be able to order these though - and so drag and drop one. I can code the backend ordering myself - can anyone recommend where to go for the fronnt-end drag and drop? I'm aware that jquery would probably be my best bet, yet I've never used javascript so if there's any sort of code already created for this then that'd be incredibly helpful.
Thanks!
You mean this? http://jqueryui.com/draggable/
Here's jQueryUI's draggable and droppable:
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
They're kind kind of cute but might well not do what you want.
Here's a pretty straightforward explanation of how to implement drag and drop the HTML5 way:
http://www.w3schools.com/html/html5_draganddrop.asp
(It mostly convinced me to implement my own rather than wait for better HTML5 drag and drop support.)
Here's an example for older browsers:
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
There's also draggable.js (and its jQuery port) neither of which I recommend.
Stuff these examples don't really do includes pretty much anything useful. E.g. what if you want to target PARTS of an object or the spaces BETWEEN objects? How can you make targets dynamics based on what's going on in the page. It all gets very ugly very fast.
Sorry not to have a simpler answer.
Long story short is. I created this http://jsfiddle.net/paDmg/368/ and I would like to add it to www.avueduesgins.com/new on the right hand side underneath the banner next to latest works.
The reason why I do not use a widget is because I do not the transparent background. I would like if I could replicate the style divs in a 3x3 fashion but they need to be rollovers...
Our php guy is out of town for 2 weeks, and I would like to get this project finished. I have very limited skills in php, but with the right direction I am sure I can achieve my goal, I just need help finding which way to go.
If there is another way to achieve what I am trying to do I would like to take any advice. Thanks and hope someone can help a fellow out.
Why not add it as a widget, but then use CSS to remove the background? If that's the only thing preventing you from using a widget, CSS is easier than changing your sidebar template.
#yourwidgetsid {background:none}
I'm looking for a location that can show me how to do this.
I have two text fields, one is a name. The other is a zip. I'm searching businesses that might have more then one office in a state and wanted to use the zip to further narrow down the result. I want to use a Jquery auto complete that is also querying the Mysql DB with 3000 rows.
I'm not a big developer. Are there any URLS that someone could point me to or someone I could pay to do this for me over a few hours for the right person?
Thanks,
I'm sure you could find a developer to do it for you, but this isn't the place to look.
MySQL allows you to do full text search on databases (3,000 lines is a small db, so efficiency definitely won't be a problem). What is your server technology? That'll make a big difference upon how you actually set the whole thing up.
As far as the autocomplete in jQuery, jQueryUI has an excellent autocomplete widget.
This example may help point you in the right direction. Like others have suggested, it uses the jquery ui autocomplete:
Using jQuery Autocomplete to Populate Another Autocomplete
Or, if that's overkill, try this one:
jQuery UI Autocomplete Widget with PHP and MySQL
Oh, I think the other answers are great, but I also want to recommend Better Autocomplete, a customizable jQuery plugin (still under active development) that I am currently maintaining.
I want to add those little buttons many webpages have that are simply a circle with a ? on the middle and that on click show a little dialog with information. Is there a simple way to do it?
The title HTML attribute for a rollover message? Otherwise, I'm sure there are easy ways to make those with jQuery.
jQuery is probably what you're looking for. It's a JavaScript framework that has many plugins available, some of which do what you want.
One is http://flowplayer.org/tools/tooltip/index.html. You can search for others at http://plugins.jquery.com/ or by searching google for "jquery tooltip".
Can be done with jquery & css. Lot of example out there.
jQuery Tooltip
CSS Tooltip
I suggest to use Simpletip :)
Do you mean something like this?
This could be done with jQuery, an example here. (see demo)
And many more with google here.
Good luck!!
You said javascirpt not Query so here it goes. See demo here.