I'm interested in creating a web interface where a user can break up a "timeline" into various chunks.
Start|-----------------------------|End
^marker one ^marker two
They would be able to add a marker (and label it), and then move the marker around adjusting its position.
All the sliders I've looked at so far only support one slider between a range of values
Is there any existing jQuery plugins or any other javascript libraries (or even HTML5 /SVG ) that have a good starting point for this feature already?
Sounds like you're talking about something akin to a slider with multiple handles, rather than a timeline as such. The SIMILE timeline is probably the best out there, but it doesn't allow for dynamic band creation as far as I know, so I think sliders are your best bet. Here's a jQuery UI slider demo, with two "handles":
jQuery UI range slider demo
Related
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
Any recommendations on zooming a large image and panning around? ideally inline on the page.
I've been using PanoJS (aka GSV2), but now more people are using iPhone/iPad/Android type devices, this library is either too slow, or the older versions do not support dragging (the one I'm using at the moment).
http://code.google.com/p/panojs/
http://www.dimin.net/software/panojs/
My current thought is that using the tiled images approach is too much for these little processors (at maximum zoom trying to drag 144 individual images, from a 3000 x 3000px original image, where each tile is 250x250px).
So probably looking more at loading the original image in an with a set width/height... and either writing my own JS to zoom/drag, or using another library (which I can't seem to find at the moment)... then there is the question of using jQuery (with jQuery UI for draggable support), or just writing the raw JS myself to keep the amount of code down.
More so answering my own question, as the standard libraries don't seem to work as well as I needed, I ended up creating my own solution:
https://github.com/craigfrancis/zoomify
The intention is that you can copy this code and then customise it to your own particular requirements... so ideally you should be able to read/understand the code, rather than just dropping it into your project and hoping for the best.
I would suggest making a viewport for mobile devices of screen width.
set all the images that are outside the viewport for more than one tile to display:none.
Then when the user pans just update the display property.
That way the browser will mainly compute a large element moving with a few images, and then compute the on and off state of some images.
a lot less graphics intensive than to recalculate a graphics heavy div element.
After looking around for this too, I decided to use OpenSeadragon (New BSD licence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Image support and filtering capabilities (via one of a multitude of plugins)
Another strong contender was OpenLayers (2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.
I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.
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.
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.