www.webdeveloper.com
Results 1 to 2 of 2

Thread: animation troubles

  1. #1
    Join Date
    Apr 2008
    Posts
    20

    animation troubles

    hello people. im working on a ****tail mixing application. so far, the application has a list of ****tails, and the ingrediants needed. u click what u need to make the ****tail and then click "mix these ingrediants" if the user made a recognised ****tail an alert appears saying "you have made a ******" otherwise it will advise the user to try again. what i want from here is after the user has made a recognised ****tail, and clicks okay to the confirmation image i want a the prefixed image of a ****tail maker to move rapidly for 10 seconds, then stop. once stopped another image will appear next to it. for sake 0of argument lets call the shaker image1.jpg and the ****tail image2.jpg

    is this even possable? if anyone can help me on this id be greatly appreciative.

    this is the code i have so far (minus the php)

    HTML
    Code:
    <head>
    
        <link rel="stylesheet" href="style.css" type="text/css" />
    
        <title>The Virtual ****tail Bar</title>
    </head>
    <body>
    
     <script type = "text/javascript" src = "ajax.js">
         </script>  
    
    <script type = "text/javascript" src = "makeit.js">
         </script>
    
    
    <center><h1>The Virtual ****tail Bar</h1></center>
    
    
       
       
          <select name="mySelectList" id="mySelectList" onchange="ajaxFunction('TargetDiv', this.value, 'processIt.php');">
              <option value="Appletini">Appletini</option>
              <option value="Mojito">Mojito</option>
              <option value="Caipirinha">Caipirinha</option>
              <option value="Fruit Caipirinha">Fruit Caipirinha</option>
              <option value="Seabreeze">Seabreeze</option>
              <option value="Espresso Martini">Espresso Martini</option>
              <option value="Cosmopolitan">Cosmopolitan</option>
              <option value="Bellini">Bellini</option>
              <option value="Key West Cooler">Key West Cooler</option>
              <option value="Long Island Iced Tea">Long Island Iced Tea</option>
          
          </select>
       </div>
       
       <div style="width:65%; float:left" id="TargetDiv" name="TargetDiv" >
      Your recipe will be placed here when u make a choice of ****tail.</div>
    
    <br />
    <br />
    
    <table border="5" cellspacing="5" cellpadding="5">
      <tr>
        <td width=100px, height=80px> <input type="image" src="images/apple schnapps.jpg" width="60px" height="80px" onClick="addIngredient('Apple Schnapps');" <br /> Apple Schnapps</td>
        <td width=100px, height=80px><input type="image" src="images/cachaca.jpg"  width="80px" height="80px" onClick="addIngredient('Cachaca');" <br /> Cachaca</td>
        <td width=100px, height=80px><input type="image" src="images/champagne.jpg" width="40px" height="80px" onClick="addIngredient('Champagne');" <br /> Champagne</td>
        <td width=100px, height=80px><input type="image" src="images/Coca Cola.jpg" width="25px" height="80px" onClick="addIngredient('Coca Cola');" <br /> Coca Cola</td>
        <td width=100px, height=80px><input type="image" src="images/cranberry juice.jpg"  width="45px" height="80px" onClick="addIngredient('Cranberry Juice');" <br /> Cranberry Juice</td>
      </tr
      <tr>
        <td width=100px, height=80px><input type="image" src="images/espresso.jpg" width="60px" height="80px" onClick="addIngredient('Espresso');" <br /> Espresso</td>
        <td width=100px, height=80px><input type="image" src="images/grapefruit juice.jpg"  width="100px" height="80px" onClick="addIngredient('Grapefruit Juice');" <br /> Grapefruit Juice</td>
        <td width=100px, height=80px><input type="image" src="images/lime juice.jpg" width="100px" height="80px" onClick="addIngredient('Lime Juice');" <br /> Lime Juice</td>
        <td width=100px, height=80px><input type="image" src="images/passion fruit juice.jpg" width="50    px" height="80px" onClick="addIngredient('Passion Fruit Juice');" <br /> Passion Fruit Juice</td>
      <td width=100px, height=80px><input type="image" src="images/peach juice.jpg" width="75px" height="80px" onClick="addIngredient('Peach Juice');" <br /> Peach Juice</td>
      </tr>
      <tr>
        <td width=100px, height=80px><input type="image" src="images/rum.jpg" width="40px" height="80px" onClick="addIngredient('Rum');" <br /> Rum</td>
        <td width=100px, height=80px><input type="image" src="images/sodawater.JPG" width="30px" height="80px" onClick="addIngredient('Soda Water');" <br /> Soda Water</td>
        <td width=100px, height=80px><input type="image" src="images/sugar.jpg" width="60px" height="80px" onClick="addIngredient('Sugar');" <br /> Sugar</td>
        <td width=100px, height=80px><input type="image" src="images/Vodka.jpg"  width="90px" height="80px" onClick="addIngredient('Vodka');" <br /> Vodka</td>
       <td width=100px, height=80px><input type="image" src="images/banana liqueur.jpg"  width="90px" height="80px" onClick="addIngredient('Banana Liquer');" <br /> Banana Liqueur</td>
      </tr>
        <tr>
        <td width=100px, height=80px><input type="image" src="images/lemonade.jpg" width="40px" height="80px" onClick="addIngredient('Lemonade');" <br /> Lemonade</td>
        <td width=100px, height=80px><input type="image" src="images/cream liqueur.gif" width="30px" height="80px" onClick="addIngredient('Cream Liqueur');" <br /> Cream Liqueur</td>
        <td width=100px, height=80px><input type="image" src="images/gin.jpg" width="60px" height="80px" onClick="addIngredient('Gin');" <br /> Gin</td>
        <td width=100px, height=80px><input type="image" src="images/peach schnapps.jpg"  width="90px" height="80px" onClick="addIngredient('Peach Schnapps');" <br /> Peach Schnapps</td>
       <td width=100px, height=80px><input type="image" src="images/whiskey.jpg"  width="90px" height="80px" onClick="addIngredient('Whiskey');" <br /> Whiskey</td>
      </tr>
    
    
    </table>
    
    <br />
    <b>Ingredients:</b><br>
    <span id="ingredients"></span>
    <br><br>
    <button onclick="mixIngredients();">Mix Ingredients</button>
    
    
    
    
    <img src="images/image1.jpg" width="180px" height="160px" id ="shaker" </img>
    
    
    </body>
    </html>

    and the JS
    Code:
    var ingredientNames  = Array('Apple Schnapps', 'Cachaca', 'Champagne', 'Coca Cola', 'Cranberry Juice', 'Espresso', 'Grapefruit Juice', 'Lime Juice', 'Passion Fruit Juice', 'Peach Juice', 'Rum', 'Soda Water', 'Sugar', 'Vodka', 'Banana Liqueur', 'Lemonade', 'Cream Liqueur', 'Gin', 'Peach Schnapps', 'Whiskey');
    
    var recipies = new Array();
    
    recipies[0] = '1.0.0.0.0.0.0.0.0.0.0.0.0.1.0.0.0.0.0.0-Appletini';
    recipies[1] = '0.0.0.0.0.0.0.3.0.0.2.1.2.0.0.0.0.0.0.0-Mojito';
    recipies[2] = '0.2.0.0.0.0.0.1.0.0.0.0.3.0.0.0.0.0.0.0-Caipirinha';
    recipies[3] = '0.2.0.0.0.0.0.1.2.0.0.0.1.0.0.0.0.0.0.0-Fruit Caipirinha';
    recipies[4] = '0.0.0.0.1.0.1.0.0.0.0.0.0.1.0.0.0.0.0.0-Seabreeze';
    recipies[5] = '0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.4.0.0.0.2-Lynchburg';
    recipies[6] = '0.0.0.0.0.1.0.0.0.0.0.0.0.2.0.0.0.0.0.0-Espresso Martini';
    recipies[7] = '0.0.0.0.1.0.0.1.0.0.0.0.0.2.0.0.0.0.0.0-Cosmopolitan';
    recipies[8] = '0.0.4.0.0.0.0.0.0.1.0.0.0.0.0.0.0.0.0.0-Bellini';
    recipies[9] = '0.0.0.0.1.0.0.0.0.0.1.0.0.2.0.0.0.0.1.0-Key West Cooler';
    recipies[10] = '0.0.0.1.0.0.0.0.0.0.1.0.0.1.0.0.0.0.0.0-Long Island Iced Tea';
    
    
    var ingredientCount = new Array();
    for (i=0; i<ingredientNames.length; i++)
    {
        ingredientCount[i] = 0;
    }
    
    function addIngredient(itemName)
    {
        for (i=0; i<ingredientNames.length; i++)
        {
            if (itemName==ingredientNames[i])
            {
                ingredientCount[i]++;
                break;
            }
        }
    
        var ingredientsHTML = '';
    
        for (i=0; i<ingredientNames.length; i++)
        {
            if (ingredientCount[i])
            {
                ingredientsHTML += ingredientNames[i] + ': ' + ingredientCount[i]  + '<br>';
            }
        }
    
        document.getElementById('ingredients').innerHTML = ingredientsHTML;
    }
    
    function mixIngredients()
    {
        var userIngredients = ingredientCount.join('.');
        var recipieFound = false;
    
        for (i=0; i<recipies.length; i++)
        {
            index = recipies[i].indexOf('-')
            recipieIngredients = recipies[i].substr(0, index);
            recipieName       =  recipies[i].substr(index+1);
            if(userIngredients==recipieIngredients)
            {
                recipieFound = true;
                break;
            }
        }
    
        if (recipieFound)
        {
            alert('You have chosen to make ' + recipieName);
            return true;
        
        }
        else
        {
            alert('we suggest you dont make that, it won\'t be nice...try again');
            for (i=0; i<ingredientCount.length; i++)
            {
                ingredientCount[i] = 0;
            }
            addIngredient(false)
            return false;
        }
    }

    again, would really appreciate some help how to acchieve this.

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    This will shake your position:relative; image up:
    Code:
    function ShakeItUp(obj, duration, delay)
    {
    	delay = delay || 50;
    	if (!obj.ShakeStart) obj.ShakeStart = obj.offsetTop;
    	if (obj.ShakeItUp && obj.ShakeItUp < 0)
    	{
    		obj.ShakeItUp = obj.ShakeStart;
    		obj.style.top = obj.ShakeItUp + "px";
    	} else {
    		obj.ShakeItUp = -20;
    		obj.style.top = obj.offsetTop + obj.ShakeItUp + "px";
    	}
    	if (duration > delay || obj.ShakeItUp < 0)
    		window.setTimeout(function() { ShakeItUp(obj, duration-delay, delay) }, delay);
    }
    and you call it like this:
    Code:
    ShakeItUp(document.images['shaker'], 10000);

Thread Information

Users Browsing this Thread

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

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