Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 513
  • Last Modified:

JQuery animate partially working

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
SniperX1
Asked:
SniperX1
1 Solution
 
coogsircCommented:
Here's your problem
  <input id="]btnAnimagteLeft" type="button" value="Left" />
0
 
SniperX1Author Commented:
Thanks, couldnt see it for looking..doh!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now