CODEWITHSUNDEEP
javascriptjqueryhtml
anonymous
anonymous

Reputation: 75

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/

Upvotes: 1

Views: 121

Answers (3)

kizisoft
kizisoft

Reputation: 386

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.
            })
    });
});

Upvotes: 1

Felix A J
Felix A J

Reputation: 6480

Can you try adding position: relative; also

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

        });

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

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;
                    });
                });

Upvotes: 2

Related Questions