Jump to content

change content of div with menu located in another div


DJ Zen Masta K

Recommended Posts

i thought this would be pretty simple, but i guess not. 

 

i have a very simple page that simply has the header, footer, a side column, and the main content area.  in the side column, i want to have a menu that lists the names of some short stories, and when you click on one of them the main content div would change to include that particular story.

 

i'm not really concerned with the entire page refreshing when you do this since the page is very simple and small to begin with, although if i can achieve this easily without having the entire page refresh it would be great.

 

is there a way to do this easily in php?

Link to comment
Share on other sites

Well if you are getting data from a database you could make your links like:

 

index.php?storyid=5

index.php?storyid=6

index.php?storyid=7

index.php?storyid=8

 

etc...

 

then based off storyid, you load your content

 

Link to comment
Share on other sites

i was thinking along the lines of creating a file for each story and then including that particular page.

 

for example:

 

click on story1, it would tell the content div to clear out and include story1.php

click on story2, it would tell the content div to clear out and include story2.php, etc...

Link to comment
Share on other sites

you work the php into the div you want to load..here is a quick example i made

 

http://dopserv1.com/test.php

 

and my code:

<!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>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 800px;
height:600px;
margin:5px auto;
}
#header {
width:800px;
height:50px;
background-color:#009933;
}
#nav {
width:200px;
height:550px;
background-color:#FF0000;
float:left;
}
#content {
width:600px;
height:550px;
background-color:#0000FF;
float:right;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="nav">
    <ul>
      <li><a href="?page=story1.html">link 1</a></li>
      <li><a href="?page=story2.html">link 2</a></li>
      <li><a href="?page=story3.html">link 3</a></li>
      <li><a href="?page=story4.html">link 4</a></li>
    </ul>
  </div>
  <div id="content">
  <?php
  if (isset($_GET['page']))
  {
  	include($_GET['page']);
  }
  else
  {
  	echo "select a story";
  }
  ?>  
  </div>
</div>
</body>
</html>

Link to comment
Share on other sites

You really ought to validate here. If you implement that you're effectively giving an attacker full access to your server.

 

  if (isset($_GET['page']) && preg_match('!^story[0-9]+\.html$!', $_GET['page']))
  {
     include($_GET['page']);
  }
  else
  {
     echo "select a story";
  }

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.