Ok, Im a lot further now, but I'm having a couple problems still. The buttons isn't in the right place, if you look at the picture in my last post, and I'd like the arrow to switch directions within the button. Thanks
http://www.nintendovation.com/index.php
index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Nintendovation</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<script language="JavaScript" src="library/motionpack.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.png">
</div> <!--logo-->
<div id="search">
<label for="search">Search</label><input type="text" name="search" />
</div> <!--search-->
<div id="navigation">
<div id="mydiv" style="display:none; overflow:hidden; height:19px;"><a href="index.php">home</a></div>
<a href="javascript:;" onmousedown="toggleSlide('mydiv');"><div id="click"><img src="images/buttton.png" /></div></a>
</div> <!--navigation-->
</div> <!--header-->
<div id="content">
<?php
include 'library/config.php';
include 'library/opendb.php';
$query = "SELECT title, date, body FROM articles";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<h2>{$row['title']}</h2>" .
"<span >{$row['date']}</span>" .
"{$row['body']}";
}
include 'library/closedb.php';
?>
</div> <!--content-->
<div id="footer">
</div> <!--footer-->
</div> <!--wrapper-->
</body>
</html>
style1.css
Code:
* {
padding: 0;
margin: 0;
border: 0;
}
body {
font: 12px 'Century Gothic';
text-align: center;
}
a {
text-decoration: none;
}
a:link {
color: #D7DFE2;
}
a:visited {
color: #D7DFE2;
}
a:active {
color: #D7DFE2;
}
a:hover {
color: #ADB6C3;
}
div#wrapper {
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
border-left: solid #2E2E2E 1px;
border-right: solid #2E2E2E 1px;
}
#header {
background: url('images/header.png') repeat-x;
width: 100%;
height: 63px;
}
#logo {
height: 63px;
margin-left: 30px;
float: left;
}
#search {
float: right;
height: 63px;
font-size: 14px;
background: url('images/search.png') no-repeat right;
margin-right: 30px;
}
#search input {
width: 100px;
height 20px;
margin-top: 23px;
font-size: 14px;
margin-right: 15px;
}
#search label {
padding-right: 12px;
margin-top: 23px;
color: #6E6E6E;
}
#navigation {
clear: both;
}
#mydiv {
background-color: #61B6D3;
border-top: solid #416589 1px;
padding: 0 20px 0 20px;
font: 12px 'Century Gothic';
font-weight: 500;
color: #D7DFE2;
}
#click {
width: 100%;
background-color: #DBDDE0;
height: 6px;
text-align: center;
border-top: solid #416589 1px;
border-bottom: solid #979EA8 1px;
}
#content {
padding: 20px;
padding-top: 40px;
}
#content input {
border: solid #6AB0D2 1px;
margin-bottom: 5px;
padding: 2px;
}
.date {
font-style: italic;
}
motionpack.js
Code:
var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}
function startslide(objname){
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == "down"){
obj[objname].style.height = "1px";
}
obj[objname].style.display = "block";
timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;
obj[objname].style.height = d + "px";
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == "up")
obj[objname].style.display = "none";
obj[objname].style.height = endHeight[objname] + "px";
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
function toggleSlide(objname){
if(document.getElementById(objname).style.display == "none"){
// div is hidden, so let's slide down
slidedown(objname);
}else{
// div is not hidden, so slide up
slideup(objname);
}
}
Bookmarks