Solved

JQuery animate partially working

Posted on 2012-03-10
2
487 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

733 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