I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)
I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.
Related
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I am tasked with implementing d-pad navigation for an existing web application for GoogleTV (and I'm testing in Google Chrome, and so far they seem to operate similarly. In their notes for implementing d-pad navigation they have basic handlers for up, right, left, down and select.
At present I have a scheme to initialize a virtual cursor, and then for the various dpad strokes. I rely on using document.elementFromPoint() and looping through until I find a new element that was not previously selected. I'm using outline: css to indicate current position and I only show it when one of the dpad controls has been selected.
I have a step on initialization which adds the class dpadClickable to all the items which are clickable, and then as the cursor moves I have dpadHighlighted added to the new one and removed from all other elements. It looks right.
This all fails if I have an element which is scrollable, or if the orientation is such that moving my point downward finds nothing.
What I would like is a data structure to keep all my dpadClickable items in, and then on d-pad clicks, be able to iterate it to find the best closest top, down, left, and right elements. Like, should I do it based on the top and left properties? Or based on a calculated center point?
I found a jQuery library which sort of implements this, and am reverse-engineering it to some extent. But what I'd really like is a primer on this class of programming problem: should I be looking for graphics programming algorithms? games? Something else?
UPDATE: Question over on the User Experience StackExchange site: Adding D-pad navigation to an existing web application: Resources?
Have you looked at http://code.google.com/tv/web/lib/ where the official Google TV Java Script extensions / libraries are? They might help you with this.
I want to enable the user to drag a bar up/down to reveal/hide content in two contiguous panes. I also need to create some buttons that move the bar to some preset locations. I know this is all possible, but am not sure where to start.
I'm creating a prototype whose purpose is to figure out the right user experience, so it's OK if it's not going to scale to 300 million simultaneous users on IE6/Windows Millenium. ;-)
That's a rather complicated thing to do from scratch, so consider using a plugin. Wijmo is based on jQuery UI and has an open-source splitter widget. The documentation is decent as well.
While I don't see any methods to resize it, you may be able to add one and contribute it back to the project.
I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these
elements in order to reconstruct the whole mockup website later.
Maybe a grid system would be the best?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?
Regards,
Stefan
YUI has lots of widgets for this sorta thing with lots of examples.
Drag & Drop: Examples
Especially this example
Drag & Drop: Using Interaction Groups
All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.
ALSO, if you want to do resizing as well
Resize Utility: Examples
They have a few really neat examples, including this image cropper
ImageCropper Control: Real Time Crop Feedback
The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)
EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.
Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):
DP_PanelManager
"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).
Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).
In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.