Member Avatar for niimenz

Am a newbie with jquery implementations I currently want to implement an overlay and a dialog the same way its used for this sites login can anybody help me implement this stuff

  • 2 Contributors
  • 1 Reply
  • 90 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by codewall
Member Avatar for codewall

maybe this help, this is my login script using jquery

<?php session_start();	
	require_once("includes/includes.db.php");

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link type="text/css" href="jquery/css/south-street/jquery-ui-1.8.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		username = $("#username"),
		password = $("#password"),
		allFields = $([]).add(username).add(password),

		// Dialog			
		$('#login').dialog({
			autoOpen: true,
			width: 330,
			height: 170,
			hide: 'explode',
			buttons: {
				"Login": function() { 
					
					allFields.removeClass('ui-state-error');
					var f1 = document.getElementById('username').value.replace(/^\s+|\s+$/g, '');
					var f2 = document.getElementById('password').value.replace(/^\s+|\s+$/g, '');
					
					if(f1 == '') username.addClass('ui-state-error');
					else if(f2 == '') password.addClass('ui-state-error');
					else document.location.href='login.process.php?username=' + f1 + '&password=' + f2;
				}			
			},
			close: function() {
				$('#login').dialog('open');

			}

		});
		
		
	});
</script>
<style type="text/css">
	/*demo page css*/
	body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
	

</style>	
</head>

<body>
	<!-- ui-dialog -->
	<div id="login" title="User Authentication">
		<form style="padding:0px; margin:0px;">	
		<table style="width:100%">
			<tr>
				<td>Username</td><td><input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" style="padding:5px;" /></td>
                <td rowspan="2" style="vertical-align:top; text-align:right;" ><img src="images/user_info_64.png" /></td>
			</tr>
			<tr>
				<td>Password</td><td><input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all" style="padding:5px;" /></td>
			</tr>
		</table>
		</form>
	</div>
</body>
</html>
Edited by codewall because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.