Hi all.
I am working on a school project, and creating a website. Right now I am making the navigation bar and I want to have one of the buttons to have an expandable div, which reveals more information in a box, pushing the rest of the website below. It is similar to an iOS Folder animation for ease of understanding.
Here is all of the code in the document, which basically makes up for that button and its function. Currently, if I put the code in my website, it would work smoothly. However it only acts like a drop down navigation instead of pushing the rest of the site down with it. Is there a solution to this? Thanks a lot.
<html>
<head>
<title>Hello</title>
<script type="text/javascript">
/*<![CDATA[*/
function Toggle(id,close,open,ms){
var obj=document.getElementById(id),o=Toggle['zxc'+id],to;
if (!o&&obj){
Toggle['zxc'+id]=o={
obj:obj,
now:0,
ms:500,
ud:true
}
}
if (o){
ms=typeof(ms)=='number'?ms:o.ms;
obj.style.display='block';
to=o.ud?open:close;
clearTimeout(o.dly);
animate(o,o.now,to,new Date(),ms*Math.abs((to-o.now)/open));
o.ud=!o.ud;
}
}
function animate(o,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=Math.max(now,0);
o.obj.style.height=o.now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.now=t;
o.obj.style.height=o.now+'px';
if (t==0){
o.obj.style.display='none';
}
}
}
/*]]>*/
</script>
<style>
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;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color: #CCC;
}
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;
}
/* Page-Specifics */
p.inside {
color: #f1f1f1;
text-shadow: 0px 1px 0px #000000;
}
h1.inside {
color: #f1f1f1;
text-shadow: 0px 1px 0px #000000;
font-weight: bold;
font-size: 1.6em;
padding-bottom: 10px;
}
p {
font-size: 0.9em;
color: #545454;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.2em;
}
h1 {
font-size: 1.6em;
color: #545454;
font-weight: bold;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
padding-bottom: 2px;
}
h1 a:visited, h1 a:link, h1 a:active {
text-decoration: none;
color: #545454;
}
h1 a:hover {
text-decoration: none;
color: #565656;
border-bottom: 1px dotted #fe57a1;
}
h2 {
font-size: 0.8em;
text-transform: uppercase;
color: #FE57A1;
font-weight: bold;
letter-spacing: 0.1em;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
margin-bottom: 5px;
}
hr {
height: 1px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
background-color: #fff;
border-top: 1px solid #000;
margin-bottom: 10px;
margin-top: 10px;
}
.button {
position: relative;
display: block;
background-color: #fe57a1;
border-radius: 8px;
width: 70px;
height: 20px;
padding: 4px;
margin-left:50px;
border: 1px solid #4d4d4d;
}
.button p {
color: #f1f1f1;
text-shadow: 0px 1px 1px #4d4d4d;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.7em;
position: relative;
display: block;
text-align: center;
}
.button a {
text-decoration: none;
}
#page-wrapper {
width: 100%;
padding-top: 15px;
}
.content {
background-color: #E8E8E8;
padding: 10px;
position: relative;
width: 960px;
margin: 0 auto;
}
#page-split-wrap {
display: none;
position: relative;
width: 100%;
height: 0px;
background-color: #333;
position:relative;
overflow:hidden;height:0px;
}
.page-split-head {
display: block;
background-color: #333;
height: 35px;
border-top: 1px solid #f1f1f1;
}
.page-split-footer {
display: block;
position: absolute;
bottom: 0;
background-color: #333;
height: 35px;
}
.page-split-content {
width: 960px;
margin: 0 auto;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 20px;
padding-right: 20px;
background-color: #333;
}
</style>
<script type="text/javascript">
animatedcollapse.addDiv('jason', 'optional_attribute_string')
//additional addDiv() call...
//additional addDiv() call...
animatedcollapse.init()
</script>
</head>
<body>
<div class="button open-button" onMouseUp="Toggle('page-split-wrap',0,250,500);" ><p>Toggle</p></div>
<div id="page-split-wrap">
<div class="page-split-head"> </div>
<div class="page-split-content">
<p class="inside">Content in here</p>
<p class="inside">Content in here</p>
</div>
</div>
</body>
</html>
Also, I found a solution before which works like I wanted it to be. However, instead of a single button, it needs two buttons to be able to open/close the div, which is troublesome. The code is here fyi:
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
jQuery(document).ready(function() {
$('.open-button').click(function() {
$('.page-split-wrap').css({'display': 'block'})
$('.page-split-wrap').animate({height: '250px'}, 500);
});
$('.close-button').click(function() {
$('.page-split-wrap').animate({height: '0px'}, 500, function() {
$('.page-split-wrap').css({'display': 'none'});
});
});
})
</script>
<style>
/* 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;
background-image:url('images/bg-repeat.png');
}
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;
}
/* Page-Specifics */
p.inside {
color: #f1f1f1;
text-shadow: 0px 1px 0px #000000;
}
h1.inside {
color: #f1f1f1;
text-shadow: 0px 1px 0px #000000;
font-weight: bold;
font-size: 1.6em;
padding-bottom: 10px;
}
p {
font-size: 0.9em;
color: #545454;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.2em;
}
h1 {
font-size: 1.6em;
color: #545454;
font-weight: bold;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
padding-bottom: 2px;
}
h1 a:visited, h1 a:link, h1 a:active {
text-decoration: none;
color: #545454;
}
h1 a:hover {
text-decoration: none;
color: #565656;
border-bottom: 1px dotted #fe57a1;
}
h2 {
font-size: 0.8em;
text-transform: uppercase;
color: #FE57A1;
font-weight: bold;
letter-spacing: 0.1em;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
text-shadow: 0px 1px 1px #f1f1f1;
margin-bottom: 5px;
}
hr {
height: 1px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
background-color: #fff;
border-top: 1px solid #000;
margin-bottom: 10px;
margin-top: 10px;
}
.button {
position: relative;
display: block;
background-color: #fe57a1;
border-radius: 10px;
width: 70px;
height: 20px;
padding: 4px;
border: 1px solid #4d4d4d;
}
.button p {
color: #f1f1f1;
text-shadow: 0px 1px 1px #4d4d4d;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.7em;
position: relative;
display: block;
text-align: center;
}
.button a {
text-decoration: none;
}
#page-wrapper {
width: 100%;
padding-top: 15px;
}
.content {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
padding: 10px;
position: relative;
width: 960px;
margin: 0 auto;
}
.page-split-wrap {
display: none;
position: relative;
background-image:url('images/fabric-repeat.png');
width: 100%;
height: 0px;
background-color: #000000;
}
.page-split-head {
display: block;
background-image:url('images/fabric-top-repeat.png');
background-color: #ffffff;
height: 35px;
border-top: 1px solid #f1f1f1;
}
.page-split-footer {
display: block;
position: absolute;
bottom: 0;
background-image:url('images/fabric-bottom-repeat.png');
background-color: #ffffff;
height: 35px;
}
.page-split-content {
width: 960px;
margin: 0 auto;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div class="content">
<h1><a href="http://www.redesigntheweb.net">RedesignTheWeb.net</a></h1>
<h2>jQuery Apple-style page split demo.</h2>
<hr />
<p>Here's where you'd put surrounding content. You could put anything from text, to images to any markup your imagination can possibly stretch to. Then, say for example, you wanted to elaborate with an image of some sort, but you didn't want the user to go to ANOTHER page, you could quite easily use this little technique to show information in the hidden content below. Give the button a click to get it going!</p>
<div class="button open-button"><a href="#"><p>Open me!</p></a></div>
</p>
</div> <!-- .content -->
<div class="page-split-wrap">
<div class="page-split-head"> </div>
<div class="page-split-content">
<h1 class="inside">Holy swanky-animation, Batman!</h1>
<p class="inside">Here's some content, hidden in the depths of the page split. Click here to close this gaping hole back up again.</p>
<div class="button close-button"><a href="#"><p>Close me!</p></a></div>
</div> <!-- .page-split-content -->
<div class="page-split-footer"> </div>
</div> <!-- page-split-wrap -->
<div class="content"><p>Check this out - this is just a bit of text which comes after the split.</p></div>
</div> <!-- #page-wrapper -->
</body>
</html>
Sorry for such long codes. I am merely desperate to get the project working.
