Solved: Javascript, HTML, CSS help. :P

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
I want the items including the small amount of info and picture to show up inside a small box and i want the boxes to be inline. Figure this one out. :p

Working example at http://www.frsdf.com/game/inventory.php


HTML file:
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
 ,html = "";
 
function display_items(){
	alert("the function was activated");
	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 + '<tr class="item"><td class="item"><center><img src="http://www.frsdf.com/game/img/item_1.png" alt="A very boring sword." id="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></td></tr><table class="description" id="1"><tr><td>Item: Sword.<br />Class: Weapon<br />Level required: 1<br/>Attack: +1<br/>Defence: N/A<br/>Description: This is just a regular old sword. Pretty boring, actually...</br><br/><img src="http://www.frsdf.com/game/img/close.png" alt="close window" align="right"></td></tr></table>';
		html = document.getElementById("item").innerHTML;
		number++;
		get_item_html();
	}
	else if (item[number] == 2){
		document.getElementById("item").innerHTML = html + 'The HTML for item 2 goes here.<br />';
		html = document.getElementById("item").innerHTML;
		number++;
		get_item_html();
	}
	//else
		// 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><center> <!-- 
Use PHP to get the value of the items in inventory (6,25,4,3,2,28,6).
--> 
<table border="10" width="800px" id="item">
<p id="items">
1,1,1
</p>
</table>

<form method="post" action="javascript:void(0)">
	<input type="button" value="Display Inventory" onClick="display_items()">
</form>
</center>
</body>
</html>



CSS File:
HTML:
td.item {
display: inline:
}

tr.item {
display: inline;
}

table.item{
border-thickness: 10px 10px 10px 10px;
}

img.item {
border-style: solid;
border-thickness: 0px 0px 0px 0px;
}

table.description {
visibility: hidden;
position: fixed;
z-index: 2;
top: -50;
left: -50;
width: 150px;
}
 

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
UPDATE:

The first one is exactly how I want the rest to look. but for some reason it doesn't want me to have more than one that look like that. :p
 

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
I fixed it by taking out the hidden tables. Although the items are still not inline. ):
 

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
UPDATE

Everything works fine... BUT the content of the item isn't displaying inside the <td> element. Instead it's creating a blank <td> inside of the <tr>. Check the example for a visual.

I need to content of the item INSIDE the <td> and I need to keep them inline. For some reason it works fine if get rid of the CSS inline definition but of course then they aren't inline.

Here's the new HTML followed by the new CSS:


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
 ,html = "";
 
function display_items(){
	alert("the function was activated");
	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"><center><img src="http://www.frsdf.com/game/img/item_1.png" alt="A very boring sword." id="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></td>';
		html = document.getElementById("item").innerHTML;
		number++;
		get_item_html();
	}
	else if (item[number] == 2){
		document.getElementById("item").innerHTML = html + 'The HTML for item 2 goes here.<br />';
		html = document.getElementById("item").innerHTML;
		number++;
		get_item_html();
	}
	//else
		// 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><center> <!-- 
Use PHP to get the value of the items in inventory (6,25,4,3,2,28,6).
--> 
<table border="10">
<tr id="item">
<p id="items">
1,1,1
</p>
</tr>
</table>

<form method="post" action="javascript:void(0)">
	<input type="button" value="Display Inventory" onClick="display_items()">
</form>
</center>
</body>
</html>


HTML:
td.item {
display: inline;
}

table.item{
border-thickness: 5px 5px 5px 5px;
}

img.item {
border-style: solid;
border-thickness: 0px 0px 0px 0px;
}

table.description {
visibility: hidden;
position: fixed;
z-index: 2;
top: -50;
left: -50;
width: 150px;
}
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top