www.webdeveloper.com
Results 1 to 11 of 11

Thread: How can I easily make a "custom product" application?

  1. #1
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372

    How can I easily make a "custom product" application?

    Take a look at sites like Zazzle - http://www.zazzle.com/cr/design/pt-mousepad. Business card companies have them too.

    You can lay out elements on a screen and upload images to make a custom product.

    I am interested in creating an application like this. Is there a way I can do it with relative ease? Will it require thousands of programming hours, or is there an app or prebuilt script out there I can use to create similar applications? I am very interested in doing this.

    Thanks,
    Multimediocrity

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    946
    This is pretty advanced, so it depends on your level. Something like this will likely involve something server-side (e.g. PHP) too to store the product, cookie, etc.

    You're likely to get replies on here if you ask something specific or at least show you've put the effort in to start. People very rarely hand you ready-made examples on a plate. Just a tip

  3. #3
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    I'm proficient. I can handle coding. Give me a long time and I could make one of these... but it would take me a long time.

    How about just adding images and text? Would this be possible? The user should be able to move the position of the text and uploaded images. No saving necessary.

  4. #4
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    946
    Yeah, no reason that couldn't work, it's just a question of how you code the drag functionality. Personally I'd write a **** load of events to listen for mousedown and mouseup, see where it landed, etc. But if you want to ensure items don't overlap, etc etc, JQuery is far better at this sort of thing.

    How's your events?

  5. #5
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    No events yet. I haven't started. I want to make sure I can handle this before I take on such a project.

  6. #6
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    946
    I would strongly suggest reading up on events, then.

    A few weeks ago I was in a similar position; I needed to build a sort of iGoogle thing, with moving panels and the like. I learned a lot about event handling, in different browsers, etc.

    You would set up your events to listen for onmousedowns on the various objects that you want to be draggable. When it spots an omousedown on one those objects, the object's style.left and style.top are modified to move with the mouse (using a mouse position detection script). Equally, when onmouseup is detected, the object stops snapping to the mouse and stays where you left it.

  7. #7
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Yes, I understand. I did a similar thing a couple years ago.

    Any example scripts or prebuilt apps to get this started?

  8. #8
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    946
    Sure - I'll dig them out in the morning and post back. 1am nearly here, work in the morning, bed calls ))

  9. #9
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Wow, thanks!

  10. #10
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    946
    Sorry this is later than I said. I've just written the attached file. It's heavily commented. See how you get on. Its principles are this:

    1) tell the doc to listen for mouse events. the mouse position is constantly tracked as the mouse moves.

    2) when a mousedown is detected, find out if it was on an element that we allow to be dragged and dropped (these elements have the classname 'draggable' - see bottom)

    3) if it's a draggable element, start the drag procedure: we're tracking the mouse position anyway, so just set the top and left properties of the dragged element equal to those of the mouse position, so it looks like it's being dragged.

    4) when mouseup is detected, stop dragging

    Buzz me if you have questions.
    Attached Files Attached Files

  11. #11
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Thanks!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles