Dear All.
I have a login and singup application where it works not using JQuery + Java script to change form look and feel (UI). I have downloaded a JQuery form and i just added it to my application but when i press the login button nothing happens. Here is my code.
@model SimpleLogInSystem.Models.UserModel
@{
ViewBag.Title = "LogIn";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animated Form Switching with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
<meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
<link rel="shortcut icon" href="../../Images/bg.gif" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="../../Content/style.css" />
<script src="../../Scripts/cufon-yui.js" type="text/javascript"></script>
<script src="../../Scripts/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { textShadow: '1px 1px #fff' });
Cufon.replace('h2', { textShadow: '1px 1px #fff' });
Cufon.replace('h3', { textShadow: '1px 1px #000' });
Cufon.replace('.back');
</script>
</head>
<body>
<div class="wrapper">
<h1>Animated Form Switching</h1>
<h2>Demo: click the <span>orange links</span> to see the form animating and switching</h2>
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form id="myForm" class="login active">
<h3>Login</h3>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true, "Login Failed, Check your login details.")
<div>
@Html.LabelFor(u => u.Email)</div>
<div>@Html.TextBoxFor(u => u.Email)
@Html.ValidationMessageFor(u => u.Email)</div>
<div>@Html.LabelFor(u => u.Password)</div>
<div>@Html.PasswordFor(u => u.Password)
@Html.ValidationMessageFor(u => u.Password)</div>
<input type="submit" id="Login" value="Log In" />
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<div class="clear"></div>
</div>
}
</form>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
$(function () {
var $form_wrapper = $('#form_wrapper'),
$currentForm = $form_wrapper.children('form.active'),
$linkform = $form_wrapper.find('.linkform');
$form_wrapper.children('form').each(function (i) {
var $theForm = $(this);
if (!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width: $theForm.width(),
height: $theForm.height()
});
});
setWrapperWidth();
$linkform.bind('click', function (e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function () {
$currentForm.removeClass('active');
$currentForm = $form_wrapper.children('form.' + target);
$form_wrapper.stop()
.animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
}, 500, function () {
$currentForm.addClass('active');
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth() {
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
});
</script>