Member Avatar for CaptainColossal

Hi

I have an HTML document with a table that is 3 rows of 3 cells each, that presents 9 flash presentations in those cells.

I want to use a pair of radio buttons to toggle the presentations in those cells as follows.

The page will load with a "jpg" or "gif" image replicated in each table cell and the "Display OFF" radio button selected.

Toggling the "Display ON" radio button will activate the section of page "code" that activates all of the 9 flash presentations in place of the replications of the "jpg" or "gif" image in each of the table cells.

I use CSS and JavaScript but only informally so and much of what I have learned is self-taught or from experimentation. HELP! I want to stick with my table and avoid Form tags.

"Simple is Best" is probably the most useful approach. Thanks :-)

  • 3 Contributors
  • 5 Replies
  • 133 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Fest3er

Here's a 'simple' method that is 'close' to what you stated. It's very high level, lacking most detail, but will do what you said you wanted once implemented correctly. I taught myself all this by trying all manner of stuff and reading the Oreilly JS book; it's easier to learn if you have some clue where to start. :)

Prepare a <script> element that defines displayPresentation = 1; (see below), an associative array of the images to display, and an associative array of the SWF to display, and three functions.

Then write two functions: activateImage() and activateFlash(). The activateImage() function replaces the innerHTML content for each cell (getElementById("RC-*")) with <img...> elements. The activateFlash() function replaces the innerHTML for each cell with code to display the flash presentations.

Next write a third function: togglePresentation() which checks if (displayPresentation == 0) activateFlash() else activateImage(), and then sets displayPresentation = !displayPresentation. Finally return false to prevent the button from doing its default action. This function can optionally change the button's text or image to indicate which action it will take.

That's it for the <script> element; it should reside in the web page just before your table definition.

Now create your table cells with row-col ids, like:

<td id="RC-11"><img ...></td>

, so they display the default images. If you're on top of things, you'll define your image and swf arrays using indices that happen to be identical to your chosen IDs and happen to match the row and column numbers so you can use nested for loops to cycle through them. :) :)

Finally, you create a <button ...> element with no action but with an ONCLICK attribute. The ONCLICK script simply calls togglePresentation().

This will keep you busy for a week or three, since you have to learn ECMAScript (JavaScript), which isn't *too* hard to learn, and then learn to clearly separate that language from HTML and from PHP (or whatever server-side language you use), and clearly separate the three both in the code and in your head, which are much harder. They are three completely separate things running in completely separate environments. Here's a hint: be very careful to keep track of single- and double-quotes in your HTML, in your script code, and in the HTML you script code is generating; you will trip on this many times, and escaping them as needed can be a challenge.

Oh, you said you want to use radio buttons. These can work, too. I'll leave it as an exercise for you to figure out how to change the togglePresentation() function to switchPresentation(). :)

Oh, yeah. Written right, the page won't reload every time the display is toggled.

Member Avatar for Airshow

Cap'n Sir,

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style>
#myVideos {  }
#myVideos td { width:100px; height:100px; background-color:#818bf5; }
</style>
<style title="on_styles">
#myVideos td { background-color:#c743fb; }
</style>

<script>
function sw(state){
	var rule_sheet = getStyleSheet('on_styles');
	if(state) {
		rule_sheet.disabled = false;//replace this with code to switch videos on
	}
	else {
		rule_sheet.disabled = true;//replace this with code to switch videos off
	}
}
//This function is not germain to the problem. It just gives a visual effect.
function getStyleSheet(title) {
	for(var i=0; i<document.styleSheets.length; i++) {
		var sheet = document.styleSheets[i];
		if(sheet.title == title) {
			return sheet;
		}
	}
}
onload = function(){
	sw(0);//This ensures everything is initialised to the off state.
}
</script>
</head>

<body>
<table id="myVideos" callpadding="6" border>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<input id="R_off" type="radio" name="switch" value="off" onclick="sw(0);" checked><label for="R_off">Off</label>
<input id="R_on"  type="radio" name="switch" value="on"  onclick="sw(1);"><label for="R_on">On</label>

</body>
</html>

Airshow

Member Avatar for CaptainColossal

Thanks. Due to a nearly 4 day power outage, I haven't revisited the prob. But I will give this a good look and try it. Looks elegant.

Member Avatar for CaptainColossal

:icon_smile: I am new enough that I haven't figured out how to reply individually yet. Airshow.. Thanks for the specific code example and I really appreciate the help. I'll give it a try now that the power is back on in our area.

Member Avatar for Airshow

Ouch! Power outages. Reminds me of the 1970s. What joy!

Pleased to see you're back in business Capt'n and hope the code does something like what you want.

Airshow

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.