Hello,

 

I am wanting to making something similar to the case builder (I'll link at the end). I believe it's done with Javascript I have limited experience when it comes to coding in JS. Would anyone please be able to point me in the right direction on what specifically I need to learn in order to make this as it would be a valuable resource to users for my website.

 

http://giftsforgeeks.org.uk/shop/figure-cases-foam|figure-cases-and-accessories|tabletop-tyrant-foam-and-cases/product/908254837/build-your-own-tyrant-army-figure-case/

 

I would really appreciate any and all help.

 

Thanks

This is made by making loads of different pictures of the fill and over top of that another image showing the shape. (see attached images)

 

But now adays it would be better to draw this with canvas or SVG.

This is made by making loads of different pictures of the fill and over top of that another image showing the shape. (see attached images)

 

But now adays it would be better to draw this with canvas or SVG.

 

Hello,

 

I was thinking about the canvas idea and using html5canvastutorials to help with the shapes.

 

But when it comes to filling in the case:

 

Which code for the case being filled up?

Which code for the status bar?

Which code for information overlay when you hover over the different trays?

 

Thanks again

I'd personally lean more toward the SVG option if you are new to this.

 

The overlay or tooltip. when you hover has nothing to do with the canvas element, this is just done using absolute positioning and making the element visible on the css hover event, which is quite trivial when compared to the complexities of the rest of the case builder.

 

If you're struggling to understand how to make a css tooltip I'd have to say that recreating this case builder will require further study on css fundamentals as the svg stuff is more advanced than this and you'll need to know a little JavaScript too to swap out the svg images and ajax new ones in -- it's not really something suited to beginners.

Edited July 26, 201412 yr by rbrtsmith

I am not an advanced html/css coder but I am always learning.

 

What I am really after (using the link as an example) would be to have different pictures of trays with dimensions coded in them so when they click on them it fills up a certain % of the case depending on the tray. Then there is a list below which shows which items they have selected and a % bar showing how much room is taken and how much is left.

 

If someone could give me a list of how it can be done and which code I need to learn I'd be happy to go off and learn it. I looked for a tutorial but couldn't find anything.

 

Thanks

I didn't intend to put you off learning buddy, were all at different levels and even the top guys are still learning!

 

I'm not aware of a tutorial for this exactly but to do the effect you're gonna have to improve your abilities in CSS, JavaScript as what you are wanting to do is pretty complex, but certainly doable. I'd recommend you follow the courses on Code School for CSS and JavaScript then you might have a good base from which to start building this. Note - It's taken me hundreds of hours of practice in CSS and JavaScript with good tutorials and I think I'd still find this pretty challenging. Don't expect to learn everything in an afternoon

Edited July 27, 201412 yr by rbrtsmith