Simple Jquery header slider.

**HTML** · 30 Oct. 2011 07:28pm

Nope, didn't write a function to handle it at all. trololol you can just use the Raw code and make the minor changes you need. All you need to do is what? Change the height? Don't complain.

HTML/Javascript

Code:

 <!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Cotent-Type" content ="text/html; charset = utf8">
		<title>Title of the document</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> 
		<script type="text/javascript">
			$(document).ready(function(){
				$('img').click(function(){
					if($('header').css("height") == "34px")
						$('header').animate({height:"120px"}, "slow");
					else 
						$('header').animate({height:"34px"}, "slow");
							
						});
			});
		</script>
	</head>

	<body>
		<header>
			<img src ="arrow.gif" />
			<h1>H1 content</h1>
			<h2>H1 content</h2>
			<p>The content of the document......</p>
			<p>I'm hidden</p>
			<p>I'm hidden</p>
			<p>I'm hidden</p>
			<p>I'm hidden</p>
		</header>
		</div>
	</body>

</html>

CSS

Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

header{
	color:white;
	background:#151515;
	height:34px;
	overflow: hidden;
}

img{
	float:right;
}

Example: click The header.
Concido

How to use:

Change the height of your header to whatever it;s going to be. IE:

Code:

header{
	color:white;
	background:#151515;
	height:34px;
	overflow: hidden;
}

Then go into the javascript and change the height to whatever you think will look good.

Code:

<script type="text/javascript">
			$(document).ready(function(){
				$('img').click(function(){
					if($('header').css("height") == "34px")
						$('header').animate({height:"120px"}, "slow");
					else 
						$('header').animate({height:"34px"}, "slow");
							
						});
			});
		</script>

So, if the height is currently equal to 34 (what we set) Then on click, change the height to 120 and you will see the height slowly change making it look as if the header is sliding down. Then, on another click, bring it back up. So if it slides too slow, change the 120 to something lower, if too high vice versa.

**Artificial** · 05 Dec. 2011 11:03pm

The height of the header is going to be changed every time you click an image? Never seen that before. :p

It's not really an image slider though. There's some awesome free image sliders out there. Nivo image slider is a good one.

Thread: Simple Jquery header slider.

LinkBack

Thread Tools

Search Thread

Rate This Thread

Display

Simple Jquery header slider.

Tags for this Thread

Posting Permissions