Solved

JQuery animate partially working

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

808 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