Look at this example. Notice how wide the table is. If I added anymore items to the table, it would become so wide you'd have to scroll over.
If you'll look in the HTML for the page... you'll notice I tried to fix it by adding an if() statements similar to the following...
This SHOULD add a new row to the table. However, it doesn't. It does nothing at all.
Some help?
Here's the HTML:
And the CSS:
If you'll look in the HTML for the page... you'll notice I tried to fix it by adding an if() statements similar to the following...
Code:
temp = number+1;
if (temp%4==0){
document.getElementById("item").innerHTML= html + '</tr><tr>';
}Some help?
Here's the HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Inventory</title>
<link rel="StyleSheet" href="http://www.frsdf.com/game/css/inventory_style.css" type="text/css">
<script type="text/javascript">
var items = ""
,item = ""
,number = 0
,temp = 0
,html = "";
function display_items(){
items = document.getElementById("items").innerHTML;
if (items)
get_item_html()
else
document.getElementById("items").innerHTML = "You have no items in your inventory!";
// DISPLAY THE REST OF THE HTML PAGE HERE. IF YOU HAVE NO ITEMS THIS WILL FINISH BUILDING THE PAGE.
}
function show_description(num){
document.getElementById("num").style.visibility=visible;
}
function get_item_html(){
item = items.split(",");
if (item[number] == 1) {
document.getElementById("item").innerHTML = html + '<td class="item"><fieldset><legend>Boring sword.</legend><center><img src="http://www.frsdf.com/game/img/item_1.png" alt="A very boring sword." class="item"></center><br />Level Req: 1<br/>Att: +1<br/>Def: N/A<br /><center><a href="Javascript:void(0)" onClick="show_description(1)">Description</a></center></fieldset></td>';
html = document.getElementById("item").innerHTML;
temp=number+1;
if (temp%4==0){
document.getElementById("item").innerHTML = html + '</tr><tr>';
html = document.getElementById("item").innerHTML;
}
else{}
number++;
get_item_html();
}
else if (item[number] == 2){
document.getElementById("item").innerHTML = html + '<td class="item"><fieldset><legend>Boring Shield.</legend><center><img src="http://www.frsdf.com/game/img/item_2.png" alt="An incredibly boring shield." class="item"></center><br />Level Req: 1<br/>Att: N/A<br/>Def: +1<br /><center><a href="Javascript:void(0)" onClick="show_description(1)">Description</a></center></fieldset></td>';
html = document.getElementById("item").innerHTML;
temp=number+1;
if (temp%4==0){
document.getElementById("item").innerHTML = html + '</tr><tr>';
html = document.getElementById("item").innerHTML;
}
else{}
number++;
get_item_html();
}
else{
document.getElementById("items").innerHTML="";
// DISPLAY THE CODE FOR THE REST OF THE HTML PAGE HERE. ONCE ALL ITEMS ARE ADDED THE END OF THE PAGE WILL BE ADDED.
}
}
</script>
</head>
<body onLoad="display_items()"><center> <!--
Use PHP to get the value of the items in inventory (6,25,4,3,2,28,6).
-->
<table bgcolor="#D3D3D3" class="item">
<tr id="item">
</tr>
</table>
<p id="items">
1,2,2,1,1,1,2
</p>
</center>
</body>
</html>And the CSS:
HTML:
table.item{
border-style: solid;
border-thickness: 2px 2px 2px 2px;
border-color: blue;
}
img.item {
border-style: solid;
border-thickness: 1px 1px 1px 1px;
}
table.description {
visibility: hidden;
position: fixed;
z-index: 2;
top: -50;
left: -50;
width: 150px;
}
