Member Avatar for jwmollman

I'm trying to create a simple gallery for comics I have created. I have a main divider, which contains two tables. The first table is for navigation, which contains a drop-down menu with a button. The second table is for content.

When the user chooses on option in the drop-down menu and clicks the button, I want the second table to appear. Then when he chooses another option and clicks the button, I want the table to change to the next comic and appear.

I hope I'm making sense here. Here's the code I currently have. Am I going to need Javascript for this?

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Webcomics by John Mollman</title>
		<link rel="icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
		<link rel="shortcut icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.png" />
		<link rel="stylesheet" type="text/css" href="styles/webcomics.css" />
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Webcomics by John Mollman" />
		<meta name="keywords" content="mrmollman, mollman, mr, artwork, art, john,
				comics, webcomics, cartoons, john mollman" lang="en-us" />
		
		<!--
			Website written and designed by John Mollman
			All graphics/images created by John Mollman
			email: jw.mollman@gmail.com
			http://www.mrmollman.com/
		-->
	</head>

	<body>
		<br />
		<div id="wrapper">
			<center>
				<table width="650px" cellspacing="0" cellpadding="0" class="selector">
					<tr>
						<td style="color: #fff; background-color: #ff9a00; text-align: center;">
							<strong>Webcomics by John Mollman</strong>
						</td>
					</tr>
					<tr>
						<td style="padding: 5px; border: 1px solid #ff9a00;">
							<center>
								<table>
									<tr>
										<td>
											<center>
												<br />
												<form action="" method="get" name="frmComics">
													<select name="selComics">
														<option value="choose">choose one...</option>
														<option disabled="disabled" value=""></option>
														<option value="Condo">Condo Mints</option>
														<option value="Craigslist">The Craigslist Deal</option>
														<option value="Zombie">The Zombie & The Human</option>
														<option value="Beauty">Beauty Cuts Deep</option>
														<option value="Dumb">The Dumb Neighbor</option>
													</select>
													<input type="submit" value="view" /><br />
												</form>
												<br />
											</center>
										</td>
									</tr>
								</table>
							</center>
						</td>
					</tr>
				</table><br />
				
				<table width="650px" cellspacing="0" cellpadding="0">
					<tr>
						<td style="color: #fff; background-color: #ff9a00; text-align: center;">
							<b>Beauty Cuts Deep by John Mollman</b>
						</td>
					</tr>
					<tr>
						<td style="padding: 5px; border: 1px solid #ff9a00;">
							<center>
								<table>
									<tr>
										<td>
											<center>
												<img src="../images/webcomics/beauty_cuts_deep.jpg" alt="" />
												<br />
											</center>
										</td>
									</tr>
								</table>
							</center>
						</td>
					</tr>
				</table>
			</center>
		</div>
		<br />
	</body>
</html>

CSS:

/* stylesheet for the webcomics page */

body {
	font: 12pt Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #000;
}
a {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:link {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:hover {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:active {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
p.comics {
	text-align: center;
}
select {
	width: 215px;
}
Edited by jwmollman because: n/a
  • 4 Contributors
  • 5 Replies
  • 583 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for jwmollman

I can't seem to edit this post, but I guess what I'm actually trying to do is display a table on button click.

Member Avatar for Bandwidth Media

JAVASCRIPT

function toggle(layer) {
    var d = document.getElementById(layer);
    d.style.display = (d.style.display == 'none') ? '' : 'none';
    }

HTML - Link Code

<a href="javascript:toggle('tableID')" title="Click to toggle the table">image code here</a>

HTML - Table Style

<table id="tableID" style="display: none;">

Try that, see how you go :)

Member Avatar for jwmollman

Thanks for the response.

I just copied the Javascript and placed it within the <script> tags. Then I just gave the bottom table which I already had, an ID of "tableID" which matches that in the Javascript. Then I placed the anchor tag in the top table. I also noticed there were bold tags in the anchor tag. I didn't know what those were for, so I removed them, and I can toggle the bottom table.

I managed to place the code into a button so the Javascript executes when the user clicks a button. How can I make this toggle between different tables depending on the option selected in the drop-down menu?

Edited by jwmollman because: n/a
Member Avatar for Lusiphur

If you have any knowledge of ASP.Net coding at all you might look into having different tables in different <asp:panel> and simply making the appropriate panel(s) visible/invisible as needed based on combination of drop-down and button click.

However, this does require a bit of coding knowledge in ASP.Net and a web-server capable of supporting .Net applications.

Member Avatar for diafol

You can have static data displayed / not displayed via vanilla js (as above) OR
You can have dynamic data populate the same container (div) via Ajax.

The simplest method (hiding/showing) is usually the best, unless your data is dynamic (db updates etc).

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.