Potterlands - Template

Losdivinos · Post by **Losdivinos** » Fri Mar 16, 2012 4:59 pm

Hi Devs!

I am in the making of a front-page Template for Potterlands.

Check the template out here: http://evaluategraphics.com/

Spam me with constructive critique.

Post by **Jackolantern** » Sat Mar 17, 2012 11:16 pm

Nice looking! The spinning cube is cool looking, and very impressive that it is not with Flash!

Losdivinos · Post by **Losdivinos** » Sun Mar 18, 2012 12:20 am

Thanks! The 3D slider is not my creation though, so I dont wanna take credit for that.

MikeD · Post by **MikeD** » Sun Mar 18, 2012 1:15 am

Looks amazing, wish I had the skill to create a page like that.. Very nice!

Losdivinos · Post by **Losdivinos** » Sun Mar 18, 2012 1:02 pm

Thank you very much.

Losdivinos · Post by **Losdivinos** » Thu Mar 22, 2012 5:50 am

Yeah I have some issues getting visibility to change at the register now onClick.
Yes, the slider works only poperly in Google Chrome, which is sad.

And thank you very much!

Chris · Post by **Chris** » Thu Mar 22, 2012 9:03 am

Losdivinos wrote:Yeah I have some issues getting visibility to change at the register now onClick.!

I had a quick look at your source and fixed it up. Don't use HTML5 with an XHTML 1.0 doctype.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Potterlands</title>

	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
	<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1" rel="stylesheet" type="text/css" />
	<link href="http://fonts.googleapis.com/css?family=Volkhov:400italic,700" rel="stylesheet" type="text/css" />
	<link rel="icon" type="image/png" href="img/potter-favicon.png" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/modernizr.custom.13303.js"></script>
	<script type="text/javascript" src="js/jquery.slicebox.min.js"></script>
	<script type="text/javascript">
	(function(window,document,$,undefined){

		$(document).ready( function()
		{
			$(function()
			{
				$('#sb-slider').slicebox();
				if( !Modernizr.csstransforms3d )
				{
					$('#sb-note').show();
					$('body').append(
						$('script').attr('type', 'text/javascript').attr('src', 'js/jquery.easing.1.3.js')
					);
				}
			});

			// hide register div on load
			$('#hideShow').hide();

			// add event listener to register button
			$('#topitems input[name="register"]').click( function()
			{
				// onclick event callback for register button
				$('#hideShow').fadeIn(); // fadein hideShow
			});
		});

	})(window,document,$)	
	</script>
</head>

<body>

	<img src="img/bg.jpg" style="z-index: -3; position: absolute; left:0; top:0; width:100%; height:100%;" />

	<div id="beta-reminder">
		Our site is currently in development.<br />
		Errors may occur.<br />
		Thanks for visiting Potterlands!
	</div>

	<div id="hideShow"> 
		<form method="post" autocomplete="off" action="auth/register.php">
			Username<br />
			<input type="text" class="userpass" required="required" name="username" /><br />
			Password<br />
			<input type="password" class="userpass" required="required" name="password" /><br />
			Password again<br />
			<input type="password" class="userpass" required="required" name="password2" /><br />
			Email<br />
			<input type="email" class="userpass" required="required" name="email" /><br />
			<input type="submit" class="login" style="cursor:pointer;" name="register" value="Register" />
		</form>
	</div>

	<div id="imgglow">
		<img src="img/glow/1.png" />
	</div>

	<div class="container">

		<div id="topitems">
			<span class="left">
				<input type="button" style="cursor:pointer;" class="register" name="register" value="" />
			</span>

			<span class="right">
				<form method="post" autocomplete="off" action="auth/login.php">
					<input type="text" class="userpass" required="required" name="username" placeholder="Username..." />
					<img src="img/chain1.png" alt="" />
					<input type="password" class="userpass" required="required" name="password" placeholder="Password..." />
					<img src="img/chain2.png" alt="" />
					<input type="submit" class="login"style="cursor:pointer;" name="login" value="Login" />
				</form>
			</span>
		</div>

		<div class="topbar">
		</div>

		<div class="header-img" style="text-align: center">
			<img src="img/welcome.png" id="welcome" alt="" />
			<h1 class="text">
				"Join Hogwarts School of Witchcraft and Wizardry today!
				<br />
				Save the world of magic or lead the dark to the throne..."
			</h1>
		</div>


		<div id="sb-slider" class="sb-slider">
			<img src="img/1.jpg" title="Creative Lifesaver" alt="Creative Lifesaver" />
			<img src="img/2.jpg" title="Honest Entertainer" alt="Honest Entertainer" />
			<img src="img/3.jpg" title="Brave Astronaut" alt="Brave Astronaut" />
		</div>
	</div>

</body>
</html>

You might notice I got rid of the onClick attribute on the register button in your html. Use JavaScript to define event handlers, not HTML.

I rewrote the JavaScript for you, use this as a guideline when writing other scripts.

Code: Select all

(function(window,document,$,undefined){

	$(document).ready( function()
	{
		// slider code
		$(function()
		{
			$('#sb-slider').slicebox();
			if( !Modernizr.csstransforms3d )
			{
				$('#sb-note').show();
				$('body').append(
					$('script').attr('type', 'text/javascript').attr('src', 'js/jquery.easing.1.3.js')
				);
			}
		});

		// hide #hideShow (register div) on load (can also use css)
		$('#hideShow').hide();

		// add event listener to register button
		$('#topitems input[name="register"]').click( function()
		{
			// onclick event callback for register button
			$('#hideShow').fadeIn(); // fadein hideShow
		});
	});

})(window,document,$)

Losdivinos · Post by **Losdivinos** » Thu Mar 22, 2012 9:45 am

Thanks alot! I am gonna change it.

Potterlands - Template

Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template

Re: Potterlands - Template