I need to write an web page where users can select a free seats in a different halls for an events. I prefer not to use flash and make it using only javascript. Is there any library or example that can help me do it?
Edit: I'm asking how to create a client-side UI
I don't know a library, but this actually might be a case of using image maps in a semantically-correct, compatible way. The <map> and area tags are valid even in HTML5, and provide you the convenience of the DOM.
I am actually after this too for interfacing to civiEvent, however, this seems to be nebulous 'roll your own' territory for some reason.
The following script + tutorial might give you some mileage:
http://dayg.wordpress.com/2008/04/17/php-101-a-simple-seat-reservation-system/
Please update this thread with whatever you find!
If you want to go fancier than an image map, you can create a table with one chair per each cell as the physical arrangement looks. You can change each chair's picture according to the state of the seat. You could get fancy and have the chairs image change to a highlighted color, say yellow, when they hover over it.
Image transitions are done very easily with JQuery, a Javscript library. Here's some resources for rollover images with JQuery : http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
The bad part about this is arranging the chairs, but JQuery is the easy part and it will make your page look fancier and more user friendly. Because with an image map, the actual image can't really change itself to show that seat 4321 has been taken (but you can certainly divulge this information via other means)
Related
I am making my website and I want to show some images on it in small area, say in a 300x300 <div>.
What I want is that the images can be previewed/enlarged when someone clicks on them, so that the user can have a better and bigger view of the image.
For ex.- when you click a product image on flipkart.com / jabong.com, you can see an enlarge view of the image. In flipkart, it magnifies the image, and in jabong, you can rollover the image(which is kind of a zoom).
I have searched a lot over google for some kind of API for this but I couldn't find anything. So, my question is - 'Is there an API which could do this kind of job? If not, then how is can this be implemented? Especially, what jabong does - rolling over the image'.
If there are no APIs, please guide me on how this can be implemented. I don't want any code for implementation. Just give me some good pointers to follow.
You're probably looking for something like this:
Magnifier.js
If this doesn't fit your needs.. a Google Search will reveal a few suggestions:
jquery-zoom-effect-plugins
It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright
I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.
http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....
I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.
Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)
I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer
I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.
This is also a nice once and its only $10.
http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.
Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image