Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JQuery animate partially working

Posted on 2012-03-10
2
Medium Priority
?
509 Views
Last Modified: 2012-03-10
Hello,

I am trying to do a simple rip of  Windows 8 metro style from a web page i am working with, I am very new to asp.net and only started using jquery today.

What happens is when i click the right button, all my divs animate happily to the right, but when i click my left button the dont do anything.

posted below is the html and my css.

Any help is kindly appreciated.

Thanks

Andy


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Metro.aspx.cs" Inherits="BowleyWeb.Metro" %>

<!DOCTYPE HTML />
<html>
<head runat="server">
    <title></title>
    <link href="Styles/Metro.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!--<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>-->
    <script type="text/javascript">
        $(document).ready(function () {
           
            $("#btnAnimateRight").click(function () {
                $(".itemContainer").animate({ "left": "+=400px" }, "slow");
            });

            $("#btnAnimateLeft").click(function () {
                $(".itemContainer").animate({ "left": "-=400px" }, "slow");
            });

        });      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="all">
        <div class="header">
            <h3>
                Testing some stuff!!!!!</h3>
        </div>
        <div class="middle">
            <div class="itemContainer">
                <ul>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                </ul>
            </div>
            <div class="itemContainer">
                <ul>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                    <li><a href="Metro.aspx">
                        <div class="item">
                            <p>
                                Home</p>
                        </div>
                    </a></li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <input id="btnAnimagteLeft" type="button" value="Left" />
            <input id="btnAnimateRight" type="button" value="Right" />
        </div>
    </div>
    </form>
</body>
</html>


CSS ----------------------------------------------------------------------


body
{
    width : 100%;
    background-color: black;
}

.item
{
    background-color: Orange;
    width: 200px;
    height : 175px;
    margin : 30px;
}

.itemContainer
{
    position : relative;
    width : 225px;
    height : 100%;
    margin : 5px;
    float : left;
}

.itemcontainer li
{
    list-style: none;
}

.header
{
    width: 100%;
    height : 75px;
    top : 0;  
    color : Orange;
}

.footer
{
    height: 75px;
    width : 100%;
    position : absolute;
    bottom: 0;  
}

.middle
{
    width: 100%;
    height: 100%;
}
0
Comment
Question by:SniperX1
2 Comments
 
LVL 1

Accepted Solution

by:
coogsirc earned 2000 total points
ID: 37705618
Here's your problem
  <input id="]btnAnimagteLeft" type="button" value="Left" />
0
 
LVL 1

Author Closing Comment

by:SniperX1
ID: 37705640
Thanks, couldnt see it for looking..doh!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question