Question

http://floorsofstone.com/sample-request/

^ The table with stone samples on is the element in question.

How would I even go about describing this so I can find a javascript/jquery alternative to make it easily editable.

If anybody has anything similar please pass on the link…

Thanks very much.

Answer 1

I could tell you it is possible to do something like that, I don’t think you would find an out-of-the-box plugin to handle everything for you.

You would have to have a grid of divs with all your tiles.

• Hook each of the div’s (per tile) to a mouseover, mouseout and click events.
• On click hide/remove the element from the main grid
• Show it in the selection.

I would think it would be better to do the whole thing without any animations first.

Then you can add animated effects to make it all look better. Look at JQuery’s animate and JQueryUI animation for the little mouse over effects.

Update:
Once you are done creating your client behavior (selection..et) and animations. You can then hook the whole thing up to your server with jquery.ajax()

I checked out how that page works. On submit, it loads up a form for some details and posts the data off to this url : http://floorsofstone.com/sample-request/post-data.aspx

The popup dialog also contains hidden fields with the selected TileID’s, something like this:

<input id="TileIDs" type="hidden" value="4005,4004,4003,4002," name="TileIDs">
<input id="Tile1" type="hidden" value="Adobe Quarry Tile" name="Tile1"> 
<input.....

So your jquery on submit would be something like:

$.ajax({
  type: "POST",
  url: "/sample-request/post-data.aspx",
  data:"TileIDs=" + $("#TileIDs").val() + "&ClientName=" + $("#ClientName").val()
  //the "TileIDs"= is the name your server expects and 
  //#TileID is the id of the html field that contains the value 
  }).done(function( msg ) 
     {
      alert( "Data Saved: " + msg );
     });