Form doesn't move up on submit

I'm trying to move the form up a few pixels and this doesn't work. I don't know why.

The function is being called when I submit (I have tested it with an alert()), but the css part doesn't work.

This is the code:

<!DOCTYPE>    
<html>

<head>
    <title> Pagina de Luis </title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: -50 px;
                });

            });

        });
    </script>

    <style type="text/css">
        body,
        p {
            font-family: 'Source Sans Pro';
            font-size: 30px;
            line-height: 15px;
            letter-spacing: 0px;
            font-weight: bold;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #contenido {
            width: 50%;
            min-width: 300px;
            margin-left: 60px;
            letter-spacing: -1px;
            padding: 20px 0 0px 0;
        }

        #texto {
            padding: 20px;
            margin-top: 30px;
        }

        #texto p {
            margin: 0px;
            padding-bottom: 20px;
        }

        #nombre {
            font-family: 'Special Elite';
            font-size: 30px;
            padding-top: 15px;
            border: 0px;
        }

        #imagen {
            vertical-align: text-top;
            width: 50%;
            float: right;
        }

        input:focus {
            outline: 0 !important;
        }
    </style>

</head>

<body>
    <div id="container">
        <div id="contenido">
            <form method="POST" id="formulario">
                <div id="texto">
                    <p>Hola, soy Luis.</p>
                    <p>Bienvenido a mi web personal.</p>
                    <p>Antes de nada,</p>
                    <p>&iquest;podr&iacute;as indicarme tu nombre?</p>
                    <input type="text" id="nombre" autofocus autocomplete="off" />
                </div>
           </form>
        </div>
    </div>
</body>

A live version of the code:

http://www.luisalmerich.com/

Answers:

Answer

You are using css top without any position properties. Try using position absolute or relative

$(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: '-50px',
                    position: 'relative'
                });
            });
        });

If you do not wish to change the position property, you can modify the margin-top property like

$(document).ready(function () {
                $("#formulario").submit(function (event) {
                    $(this).css({
                        marginTop: '-50px'
                    });
                });
            });

Finally, note that when a form submits, the page reloads so you will most likely only see this change temporarily. If you return false, the page will not reload(although this may not be what you want)

$(document).ready(function () {
                    $("#formulario").submit(function (event) {
                        $(this).css({
                            marginTop: '-50px'
                        });
                        return false;
                    });
                });
Answer

Can you try adding position: relative; also

        $("#formulario").submit(function (event) {
            $(this).css({
                position: "relative",
                top: "-50px"
            });

        });
Answer

If you want it to work with .animate() try this:

$(document).ready(function () {
    $("#formulario").submit(function (event) {
        event.preventDefault();
        $(this).css('position', 'relative')
            .animate({top: '-50px'}, 5000, function () {
                // Animation complete.
            })
    });
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.