Simple Jquery header slider.
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.
