I have requirements to make a image map of seats in a amphitheatre selectable, much like a check box, with 3 states: selected, unselected, and disabled. I wish to know if there is a way to do this so that selected images would become serialised for database submission?
I have it working with just checkboxes, but I can not use them for the client (they like pretty things :p)
Check out my jquery plugin ImageMapster. It does exactly this: allows you to identify areas of an image map that should be highlighted and can maintain state. There are a lot of options for rendering the highlights, including using a second image as the source for the highlighted areas, as well as for identifying areas that should be ignored or fixed in a certain state. In the USA map example on that link:
Washington State is permanently selected & does not respond to
mouseover events
Oregon is permanently deselected & does not respond
to mouseover events (this is just as if it was not part of the map -
but options can be changed on the fly so there might be reasons to
include areas in the map but turn them off).
Alaska is unselectable
(but does respond to mouseover events)
You can also assign options that determine how each area highlight should appear on a per-area basis.
The full documentation is on github.
You only need a single alternate image if you use the "alternate image" option for the highlights, the plug-in draws the content from the same area of a 2nd image to create each highlight.
It works with any HTML image map as the data source.
Why don't you just use the jquery UI buttons?
http://jqueryui.com/demos/button/#icons
That probably should help and you don't have to recode anything.
Related
As title. Because of the requests of my GIS project, I need to make the buttons of mapbox.com draw tools shown in a DIV, to make the DIV look like one of my created toolboxes. I've searched on Google using "mapbox.com draw tool in another div " or "mapbox.com draw tool show in a div" , but the results aren't suitable for my needs. If it is possible, may someone guide me to reach it?
I've thought to copy the outerHTML of the buttons in the generated draw tool and append to the target DIV....
$(".mapbox-gl-draw_ctrl-draw-btn").each(function(){
$("#myTargetDIV")[0].innerHTML+=$(this)[0].outerHTML;
});
The buttons are shown in the target DIV but nothing happens when I pressed them.
Please refer to the image.
The three big black coloured rectangles are my 3 different forms. They belong to 3 different contexts in my application.
The red coloured box is control placed on all 3 forms.
However, the visibility (& permissible values, validation rules etc) of the red box depends on some other controls' visibility and/or the value user is entering on the form it's put on. E.g. In first form, visibility would change according to the green controls' visibility. On the other form, allowed value in the red box would be dependent on the value selected in the blue list control and so on.
How should I handle the values/state/validation of the red control?
One option is to have a logic embedded in each form. But that would lead to duplication of code everywhere.
Is state pattern an option? If yes, then the red control's server side logic would have to handle all contexts? And how would that piece of logic know when values in the green or blue controls are changed?
I want to have a reusable red text box which would behave in the desired way in every context it's being used.
Which pattern should I use in such cases? If I call server side logic on change of every control (gree, blue etc) on the forms just to calculate visibility/values of the red box, is that a good option considering performance?
I have a ASP.NET application.
(Red control is illustrative. This could be more complex control or set of controls.)
Best solution is to use one of existing frameworks which support this design.
For example
Angular 2/4
Backbone
Vue
Is many many other but with this I have experience and works perfect for me.
My educational website displays single medical images (such as chest X-rays) as a JPEG in a div. I'd like to add the ability for the user to dynamically change the contrast, zoom and pan within the div containing the JPEG. I've been searching for days for a Javascript library that could do this but I'm come up empty. Does anybody have any suggestions that might help?
http://www.netzgesta.de/shiftzoom/ perhaps? It allows you to add zoom and pan functionality.
also http://camanjs.com/ lets you change contrast.
I'm using OpenLayers to display a map and to provide some drawing features. I also added two SelectFeatures to the vector layer I want to draw on. One for highlighting a drawn feature by hover it and one for selecting a feature by clicking on it.
I used this example to realize this.
The problem is, that this solution doesn't really work (even in the given example).
If I draw a new feature I can highlight it by putting the cursor on it but can't select it with a click. (Same in the example, the given features work fine, but after drawing a new one the select-by-click function doesn't react anymore)
Is there any alternative solution to realize this except the official example?
This example was modified 4 months ago, editing toolbar was excluded due to described confusion.
I was able to get something like this working. You need to activate the controls in a specific order:
highlightControl.activate();
selectControl.activate();
dragControl.activate();
Hover events aren't handled by the Drag and Pan Controller, so they try the select controller, which doesn't use them either, passing them up to the highlight controller. Similarly, click events aren't handled by the drag controller, but are handled by the select controller. Finally, drag events are dealt with by the drag controller. The last to be activated is the first to be "consulted".
I am looking to create a grid structure using javascript or one of its libraries. My idea is as follows: I am a merchandise manager for a retailer and want to create an application to tie into the django project I have been working on to track item sales based on display location. The javascript piece would involve drawing a grid on the screen and allowing the user to draw 'areas' over the grid. Each area would contain a set number of gridboxes, each representing a pallet of goods. At the time the grid is drawn, each box is a DOM object that can be assigned to event handlers etc. When an area is drawn over a a series of these boxes, they become active and each box can be assigned different characteristics. In the end, each box would effectively represent an empty pallet that could then be assigned an item. It's position could then be correlated with sales data via my django app. I just need a way to broadcast/manage the location data using javascript.
Is there a jquery plugin or some other js library that would facilitate such a project? I have checked into Raphael and it will work, but will take more time to create. I am wondering if there is already some kind of grid based drawing tool that would facilitate the process.
Everytime I think of a javascript Grid, I always thing about the fantastic TableSorter
And if you append an editable version to it, I would would say you will have the best AWESOME project!
:o)
JQuery UI's Selectable would probably be a good place to start. It makes it easy to create a grid whose areas are selectable by dragging a box over it.
The extJS javascript framework has an editable grid, refer to http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html for a sample demo and source code