Solved

JQuery animate partially working

Posted on 2012-03-10
2
485 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 500 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

831 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