Member Avatar for abby.delacruz.927

Guys help me with this code. I don't know what to do. I have 2 div the 1st is in the left and it has a button and on the other div is to show/display when I click the button on the 1st div.

<html>// this is my index.html
<head><title> Student Book Reservation | Book </title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="container" style="width:1250px;height:500px;">
<div id="header" style="font-size:32;font-style:italic">Student Book Reservation</div>
<div id="menu" style="background-color:#FFFFFF;height:780px;width:250px;float:left;border-style:solid;">
<input id="ma" type="Button" value="Manage Account" onclick="location.href = 'index2.html'";></br>
<br>
<input type="Button" value="Add New Book" onclick=""></br>
<br>
<input type="Button" value="Browse Book" onclick=""></br>
<br>
<input type="Button" value="View Request" onclick=""></br>
<br>

</div>
<div id="content" target="top1" name="top2" style="background-color:#EEEEEE;height:780px;width:985px;float:left;border-style:solid;">

</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Online Book Reservation ©</div>
</div>
</body>
</html>



<html> // this is my index2.html
<head><title>Manage Account | Book </title>
<style type="text/css">
#wrapper {
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    background-color:#f9f9f9;
    overflow:hidden;
</style>
</head>
<body>
<div id="header" style="font-size:32;font-style:italic">Manage Account</div>
<div id="wrapper" style="width:300px !important;">
<h2 align="left" style="padding-left:5px;">Student Account</h2>
<hr color="#e1dada" style="margin-top:3px;">
<form id="formElem" name="formElem" action="login.php" method="post">
   <table cellpadding="0" cellspacing="7" border="0" align="left" style="text-align:left;">
    <tbody><tr>
     <td><strong>Username:</strong></td>
     <td><input id="uname" style="width:70px" type="text"></td>
    </tr>
    <tr>
     <td><strong>Password:</strong></td>
    <td><input id="pword" style="width:70px" type="text"></td>
    </tr>
    <tr>
     <td></td>
     <td><button id="login" type="submit">Log-in</button></td>
    </tr>
   </tbody></table>
  </form>   
</div>
</body>
</html>

Thank you very much.

  • 2 Contributors
  • 3 Replies
  • 308 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

There are various ways to accomplish what you are doing. I am not necessarily encouraging you to continue on the design that you have chosen, but I looked at your code and slightly modified it to work with the direction you are going.

Try something like this for the index page. Dont forget to add a doctype at the top of each of your pages.

<!DOCTYPE html>
<html>
<head>
<title> Student Book Reservation | Book </title>
<style>
 #container {width:1250px;height:500px;}
 #header {font-size:32;font-style:italic}
 #menu {background-color:#FFFFFF;height:780px;width:250px;float:left;border-style:solid;}
 #content {background-color:#EEEEEE;height:780px;width:985px;float:left;border-style:solid;}
 #footer {background-color:#FFA500;clear:both;text-align:center;}
</style>
<script>
 function preview(param) {
   content.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src=" ' + param + ' " />';
 }
</script>
</head>

<body>
<div id="container">
<div id="header">Student Book Reservation</div>
<div id="menu">
<input id="ma" type="Button" value="Manage Account" onclick="preview('index2.html');"><br /><br />
<input type="button" value="Add New Book" onclick="preview('index3.html');"><br /><br />
<input type="button" value="Browse Book" onclick="preview('index4.html');"><br /><br />
<input type="button" value="View Request" onclick="preview('index5.html');"><br /><br />
</div>
<div id="content"></div>
<div id="footer">Online Book Reservation ©</div>
</div>
</body>
</html>
Member Avatar for abby.delacruz.927

thank you very much Sr.JorgeM my problem is when I click the button it display the url content into div content.

Member Avatar for JorgeM

Ok, no problem. So, do you need additional help? The example I provided above does allow you to click on a button on the right side and displays the content in the "content" div. That is what I understood you needed help with.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.