Hi!
I have a problem with a small effect.
The idea is to dynamicly change the pages in a single box, and the header and the footer of the main page to hide or show the box with the information.
That's the idea..
<?php
session_start();
require "config.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="javascript/jquery-1.5.1.js"></script>
</head>
<body>
<div class="manga_header"></div>
<div id="header">
<div style="background-image:url(body/header/bg.png); width:880px; height:290px; position:relative; left: 17%;">
<img src="body/header/mermaid.gif" width="232px" height="232px" align="center" style="position:relative; left:34%;" />
<div class="left_m">
<a href="index.php?page=home" class="lol"><img src="menu/home.png" style="margin-top:10px; margin-left: 10px;" width="100px" height="50px" border="none" /></a><br />
<a href="index.php?page=next" class="lol"><img src="menu/forum.png" width="100px" height="50px" border="none" /></a><br />
<a href="index.php?page=deinost" class="lol"><img src="menu/deinost.png" width="100px" height="50px" border="none" /></a><br />
<a href="index.php?page=sybitiq" class="lol"><img src="menu/sybitiq.png" style="margin-top:-5px; margin-left: 10px;" width="100px" height="50px" border="none" /></a><br />
</div>
<div class="right_m">
<a href="index.php?page=gallery" class="lol"><img src="menu/gallery.png" style="margin-top:10px; margin-left: -15px;" width="100px" height="50px" border="none" /></a><br />
<a href="index.php?page=works" class="lol"><img src="menu/works.png" width="100px" height="50px" border="none"/></a><br />
<a href="index.php?page=porychai" class="lol"><img src="menu/porychai.png" width="100px" height="50px" border="none" /></a><br />
<a href="index.php?page=join" class="lol"><img src="menu/join.png" style="margin-top:-5px; margin-left: -15px;" width="100px" height="50px" border="none" /></a><br />
</div>
</div>
</div>
<hr />
<div id="drop_down">
<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : 0; // identifies the variable
switch($page){
case "home":
include "home.php"; break;
case "next":
include "next.php"; break;
case "news":
include "news.php"; break;
case "register":
include "register.php"; break;
case "more_info":
include "more_info.php"; break;
case "join":
include "join.php"; break;
case "gallery":
include "gallery.php"; break;
case "works":
include "works.php"; break;
case "porychai":
include "porychai.php"; break;
default:
include "home.php"; break;
}
?>
</div>
<hr />
<div id="footer">
<div class="friends">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(".lol").click(function(){
if($("#drop_down").is(":hidden")){
$("#drop_down").slideDown("slow");
return false;
}
})
});
</script>I want to click on a link and then the slide effect to be shown, and after that the information from the current page that is called from the link.
(Sorry for the bad english..)