need html help

[Verdandi]

How does one make html lists expandable? I handwrite my html because I'm a stickler that way and haven't been able to work this out for myself. An example of what I mean: Halas Heaters. Down under the Full Recipe List you can click on the + next to Vodka to expand the list under it to be viewable.

I tried doing it with Frontpage and studying what it did but that's getting into java and stuff and I don't want to mess with that. In the example above EQTC appears to be using style sheets, which is more my speed. I've done a very tiny bit of dabbling with style sheets (copying code that did what I wanted and plugging it into my page - this actually worked) and have learned more in poring through the books at hand right now. But none of them address expanding lists; I think our books might be too old.

So I understand the most elementary fundamentals and just want to know what bits of code to put where in order to make my lists expandable. Anyone able to help?

[Sanna]

Gogo HTML-by-Hand! Precious few of us left. ^_^

As for code... straight HTML won't do it, too static. My regurgitable css is limited, but I generally understand what I read, and... I'm not thinking you can achieve the exact mirror-like same effect without JS.

not to be completely pessimistic... There is probably another displayable way of having a click-open-click-shut menu, it just might not look /exactly/ like the one you've got right now. Are you just wanting to lift the JS straight out of the system? (JS scares me too ^_^) Or end up with a system that achieves the same effect, even if it looks/acts a little different?

I've got half a dozen tabs open, but they're still not quite giving me a nice answer, either way. I think it /can/ be done without JS... it just might not be close to what you have now...

-- Sanna

[Dunthor Warsmith]

Looking over the source html from the EQTraders pages, and the associated style sheets and javascript, EQTC seems to do it entirely with Javascript. It makes sense, since html is basically static content, and most of css is to more efficiently & compatibly mark up that static content, whereas Javascript's purpose is, in part, to provide client-side dynamic content.

If you're looking to do a client-side dynamic content like that, such as rerendering parts of the page when you click something, I'm pretty sure you're going to have to use *some* type of scripting or embedded program. You could, of course, reload the whole page on every expansion/contraction, but that seems like it would be a hastle to program, difficult to maintain, frustrating for the user, and extra load on the webserver.


As far as the EQTC version, poking around with the page source, it is pretty easy to get it working. Need to include this line anywhere in the body,

<script type="text/javascript" src="http://www.eqtraders.com/library/aqtree.js"></script>

(creating a local copy of the file and linking to that really should be done, for development, private, and production uses - but this tells you were to download it from to make that copy ).

After that, its basically just nesting unordered lists. The outermost list must be declared with <ul class="aqtree">, and any lists you want pre-(and permanantely-)expanded should have their parent list item be declared with <li class="expand"> (for example, this is done so that when you click on vodka, the header "To make vodka, do stuff" is revealed and its child list of the 4 ingredients is auto-expanded.

The icons for the + and - signs have their (relative) locations coded into the aqtree.js. You can either supply them at those locations, or you can edit the Javascript file for locations that work for you.

Attached is a html page that is simply the recipe tree for the Halas heater you linked to (zipped to make the upload happy). I've removed the rest of the page, and redone the indentation to try and make the relevant structure clearer.

And agreed, html-by-hand is the way to go

[Verdandi]

Wow, you guys are awesome!! I won't get to dink with this again till tomorrow (trainer at the gym changed my routine today and now I'm ) but I will definitely explore more tomorrow. Thanks to you both, for the time to investigate and the suggestions. Can't wait to dig my paws into that zip file tomorrow!

[Dunthor Warsmith]

This is probably actually more useful than the zip, as its basically self-commentary - although I'm a bit tired as a write it If when you try to mess around with these lists, you find anything unclear, I can try and explain it (when I'm more awake ).

<html>
<body>
<script type="text/javascript" src="http://www.eqtraders.com/library/aqtree.js"></script>
<ul class="aqtree">
	<li>A) First list item</li>
	<li>B) Expandable list item
		<ul>
			<li>B1) B's child list</li>
			<li>B2) Has three</li>
			<li>B3) Elements</li>
		</ul>
	</li>
	<li>C) Another plain item</li>
	<li class="expand">D) auto-expanded child list
		<ul>
			<li>D1) D's children</li>
			<li>D2) Are always out</li>
		</ul>
	</li>
	<li>E has a child
		<ul>
			<li>E1) I'm a regular child of E</li>
			<li class=expand>
				E2) I am E's child, with an auto-expanding list
				<ul>
					<li>E2a) This line is displayed by openning E, but it is actually E's grandchild</li>
					<li>E2b) Family tree's have wonderful complications ;)</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>F) And one last item for the base list.</li>
</ul>
</body>
</html>

(feels silly zipping up these tiny text documents... wonder which is ultimately easier on the messageboard server)

[Ngreth Thergn]

first... we can thank Shariin for the modified code. THe original aqtree code can be found on the net with a search.

then I have background PHP script decide WHEN the expand should be there or not (basically first time there is a "new" recipe... put in an expand... )

the "expand" basically tells it whether that list item has the potential to expand... (so it gets the +/-) it does not say if it is expanded or not (which is why every time you come back to the page it is collapsed)

my php code (sorry db calls removed, even though they are handled by a wraper class)

		static $loop_list = array();
		global $MAINDB;
		$recdb = new mysql($MAINDB,'r'); 
		$loop_list[$recipe_id]=true;
		if ($recipe_result = $recdb->query(<db call>)) { 
			$recipe_row = mysql_fetch_array($recipe_result, MYSQL_ASSOC); 
		} else { 
			return "Invalid Recipe ID<br>\n".$pass_string; 
		} 
		if ($recipe_row['restriction']) {
			$in_restricted = "<a class=\"teal\" href=\"$HTTP_ROOT/items/show_item.php?item=".$recipe_row['item_id']."\">(Restricted)</a> ";
		} else {
			$in_restricted = "";
		}
		///////////////////////////////////////////
		//find Containers
		//
		//
		$container_results = $recdb->query(<dbcall-here>);
		if ($container_results) {
			$cur_container = mysql_fetch_array($container_results, MYSQL_ASSOC);
			$next_container = mysql_fetch_array($container_results, MYSQL_ASSOC);
			$containers = "<a href=\"$HTTP_ROOT/items/show_item.php?item=".$cur_container['item_id']."\">".stripslashes($cur_container['item_name'])."</a>";
			if ($next_container) {
				$cur_container = $next_container;
				while ($next_container = mysql_fetch_array($container_results, MYSQL_ASSOC)) {
					$containers .= ", " . "<a href=\"$HTTP_ROOT/items/show_item.php?item=".$cur_container['item_id']."\">".stripslashes($cur_container['item_name'])."</a>";
					$cur_container = $next_container;
				}
				$containers .= ", or " . "<a href=\"$HTTP_ROOT/items/show_item.php?item=".$cur_container['item_id']."\">".stripslashes($cur_container['item_name'])."</a>";
			}
		} else { 
			$containers="<font color=\"#FF0000\"><b>****INVALID CONTAINERS****</b></font>"; 
		} 
		$pass_string .= $insert."To make ".stripslashes($recipe_row['item_name'])." (".$recipe_row['tradeskill'].": Yield ".$recipe_row['yield'].", trivial ".$recipe_row['triv_display']."), ".$in_restricted."Combine the following in a ".$containers."\n"; 
		///////////////////////////////////////////
		//find components and loop (recursive)
		//
		//
		$pass_string .= "<ul>\n";
		$component_result = $recdb->query(<dbcall-here>); 
		if (!$component_result) return "No such recipe_id mapped"; 
		while ($component_row = mysql_fetch_array($component_result, MYSQL_ASSOC)){ 
			if ($component_row['amount']>1) { 
				$amount = "(".$component_row['amount'].")"; 
			} else { 
				$amount = ""; 
			} 
			$pass_string .= "<li><b><a href=\"$HTTP_ROOT/items/show_item.php?item=".$component_row['item_id']."\">".stripslashes($component_row['item_name'])."</a></b>".$amount." "; 
			if ($recipe_result = $recdb->query('recipes','recipe_id,nr',"WHERE item_id = ".$component_row['item_id']." ORDER BY yield",$dbg)) { 
				$recipe_row = mysql_fetch_array($recipe_result, MYSQL_ASSOC);
				if (!$loop_list[$recipe_row['recipe_id']]) {
					$pass_string .= "<ul><li class=\"expand\">\n";
					$pass_string = $this->recursive_recipe($recipe_row['recipe_id'], $pass_string, $dbg, ""); 

					$loop_list[$recipe_row['recipe_id']]=true;
					while ($recipe_row = mysql_fetch_array($recipe_result, MYSQL_ASSOC)) {
						if (!$loop_list[$recipe_row['recipe_id']]) {
							$pass_string = $this->recursive_recipe($recipe_row['recipe_id'], $pass_string, $dbg, "\n</li><li class=\"expand\">Alternatively: "); 
							$loop_list[$recipe_row['recipe_id']]=true;
						}
					}
					$pass_string .= "</li></ul>";
				}
			} 
		$pass_string .= "\n</li>\n"; 
		} 
	$recdb->close; 
	return $pass_string . "</ul>\n"; 
	}

[Verdandi]

Hmmm. After thinking on it more I am thinking what I really want most is for the tree to be expanded by default but to be, er, unexpandable.

So first I get that aqtree file and stick it somewhere and link to it with the code Dunthor provided. Then I would need a modified version of that php code from Ngreth to control the expandability? I find that snippet scary, although I know most of that is due to it drawing on the database. But I have no idea what to keep out of that.

My use for this is in a guide I am writing to the PoP Planar Progression. It is intended to cover pretty much everything except tactics for the raids. AAs, the PoP charm, layout of the zones, flags, the various forms of access, writeups for the stuff that doesn't require raids, every snippet of npc text I can get my paws on, etc. At the top of this guide I have an index to what it contains. That list is getting pretty lengthy, considering it has every zone listed with links to the general information for that zone and then a separate list of every major task involved. I want that index to be expanded by default but to be unexpandable for printing purposes or just to shorten the whole thing a bit. It is by no means critical, however, which means that if this is going to be a whole mess of work then it may not be worth it.

[Dunthor Warsmith]

Well, I fooled around with aqtree.js a bit and I *think* I've managed to create another class of list item, which defaults to open but is closable.

I know *zero* Javascript, but it seems to be functional, and the changes are relatively minor (basically creating a 3rd case in two places).

So, if you want an item's child list to be expanded by default, declare the list item containing it with <li class="open">, ie the same as for a permanently-expanded list, but using "open" instead of "expand".

Attached are the modified aqtree file and a modified exTree.html file, where the first item is an open list.

[Sanna]

wow, that's, um, a really tall order there ^_^ but it sounds like it will be cool in the end.

As far as the 'default to expanded, but shrink for printing'... is this to specifically restrict people from printing it out and being malicious with EQTC's data/wording? Or just to keep people from spending 36 pages to print dwarven cultural? ^_^

Are you also trying to allow just a web-viewer to shrink the parts they don't want to see (like npc text they aren't particularly interested in)? Or they just get what they get?


If:
you just want the data etc to be shown in a really really ordered format, and the 'no-print' thing is just to keep people from spending too much paper, I would say don't stress about it and just start applying CSS-formatting like crazy ^_^.

Else:
you want to prevent malicious printed use.... in which case I don't know what to do. >_< I have not seen a piece of code that will keep a printer from printing visible information. I'm not a be-all-end-all code dictionary (tho that would be fun ^_^), but I don't think you can out and out prevent printing.



I keep thinking I'm missing something in this question >_<.

-- Sanna
gomen....

[Verdandi]

Originally posted by Sanna
As far as the 'default to expanded, but shrink for printing'... is this to specifically restrict people from printing it out and being malicious with EQTC's data/wording? Or just to keep people from spending 36 pages to print dwarven cultural? ^_^

The guide I'm writing isn't tradeskill related in any way and won't be on EQTC. And the shrinkage option is just for the convenience of the users.

That's fantastic Dunthor, I'll let ya know as soon as I get to try it. Thank you!!