我想将页面上的Flash元素转换为javascript / jquery ...？

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 );
     });

Answer 2

Personally, I wouldn't use javascript or jquery for this.

I would go with CSS3 transitions. When you hover over a div, the tile-image should shrink, with css3 transitions, we can do that in an animated fashion.

HTML

<div class="tile">
  <span>sometext</span>
  <img src="tile-1.jpg">
</div>

CSS

.tile {
  width: 100px;
  height: 100px;
}

.tile img {
  width: 100px;
  height: 100px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.tile:hover img {
  width: 80px;
  height: 80px;
}

NOTE: I haven't tested this, but I think it should be fine.

NOTE 2: this doesn't work in IE 9 and lower. In this example, I personally wouldn't mind that IE doesn't have the nice transition. If you really must, test for css3 transitions with Modernizr , and provide a jquery fallback.