Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Thanked 0 Times in 0 Posts

    Moving an object by the help of visitor input

    Hi, to start of.. I'm new to this and have only learned the basics of html/css/php over a couple of weeks.

    Any how, I am currently trying to build a website where an object is going to be moving from point A to point B, with help from vistors (colleagues) that inputs a number (distance). (The basic thought is that they put in the distance of a bike tour and togheter we will reach to the moon.)

    So it's basically a progressbar in form of a small picture moving across the screen.

    I need help in coding this, is it possible to code it such that everytime someone types in a distance it automatically sends this input to my website code so that the picture moves?

    I am currently learning about php & mysql, this is probably what i need right?

    This is how i have coded the img for now:

    <IMG STYLE="position:absolute; TOP:830px; LEFT:310px; WIDTH: 80px; HEIGHT: 70px;" SRC="Randompic.jpg">

    So i basically need to put in a formula with a constant and a variable (the input) into the "TOP" and "LEFT". I have the calculations in order but I have no idea how to connect their input to my code.

  2. #2
    Supreme Master coder!
    Join Date
    Jun 2003
    Cottage Grove, Minnesota
    Thanked 1,168 Times in 1,159 Posts
    The problem with doing it the way you are, is that everyone has different sized monitors (browser windows). Some are desktops, laptops, tablets, smartphones, etc. A position of 830 pixels on a smartphone is going to be a layout problem.

    PHP, using the PHP GD library, can render (or create) it's own images (JPG, PNG, GIF). So you can take a background image and put another image (such as a bike) over the top of it at any position, merge the two images ... then serve the image.

    Using JQuery, that image is displayed on the browser 'full-size' no matter what the user has. If they are using a smartphone, the image will be tiny, but it will still be the entire image. JQuery sizes the image automatically to fit any browser window.

    That being said, you first have to deal with saving the accumulated distance using MySQLi or whatever type of database you use. It could be a simple .txt file you are using for a database? It doesn't sound like security is a big issue for your project?

    If the users (or members) need to log-in, that creates a whole new aspect to your project. I mention this because someone could put in 5000 miles for their bike trip. You have issues like, can a person remove some miles to correct a typo? Does it need to keep track of miles for each user individually? Are there any date constraints? Is there any other charting or graphing requirements? Is there any GPS usage involved?

    PM me with your email (if you want). I'll have you send me the images you wish to use and give you an example of using PHP to render it. Do this with PM (private message), not showing here in public.

    Here is a working example of drawing a white line on a background image using PHP GD. The line length/color can be changed to whatever.
    Also uses JQuery to resize image for smaller screens. Change your screen size to see it.

    FYI: And yes, the image is not to scale. There are about 30 Earth diameters between Earth and Moon.
    Instead of a line, you could stack tiny little bicycle images, until the stack reaches the moon.

    Last edited by mlseim; 09-17-2013 at 07:45 PM.


Posting Permissions

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