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.
Related
How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals
I am developing a website where diagrams can be dragged around the screen, using raphael js.
An well-known limitation of Raphael js is that it there is no built in method for grouping and dragging elements around.
In order to deal with this, I was thinking of creating an individual div element for each diagram. Each div would then have its own raphael canvas and I would use jquery ui to drag these mini raphael canvases around.
I tried this with a a few elements and it works perfectly, but before I implement this into a fully functional prototype I was wondering if anyone has used similar solutions and if there are any known issues with this approach.
Thanks.
If it works for you it is great, still there is one limitation I am aware of. When you want to handle mouse click events of the elements on different svg canvases, there might be a problem when these canvases overlap. When clicking on the element which is overlapped by the other canvas, even if the canvas does not contain any elements, you will not be able to intercept the click. This issue is broadly explained here.
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers.
Any help would be appreciated!
First, forget about old browsers, it's 2012 after all. You won't be able to draw circle without having such css properties as "border-radius".
Second, no matter what, you'll have to use javascript in order to do the "drawing". jQuery + jQuery UI would be great for that. It appears like you'd need at least following plugins:
Draggable - to drag your shapes around
Resizable - to resize shapes
Dialog - to put text into the shape (there must be a textarea within the dialog. After you fill textarea and click Ok text will be put into the shape).
There's another way to put text into shapes, but that'll require some serious development efforts.
Now, how to create shapes. There are couple of ways:
Button which you'll have to click and which will create a box with set parameters
Use boxer plugin
That's the gist of it.
Rendering of the saved shapes is quite a different thing and i believe it shouldn't be problematic. Just fetch data from DB and based on it's properties render shapes.
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.