1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Javascript, HTML, CSS help. :P

Discussion in 'Web Design & Development' started by lumentec, Sep 20, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. lumentec

    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;
    }
     
  2. lumentec

    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
     
  3. lumentec

    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. ):
     
  4. lumentec

    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;
    }
     
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 733,556 other people just like you!

Loading...
Similar Threads - Solved Javascript HTML
  1. Ravikumar112
    Replies:
    1
    Views:
    83
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/751855

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice