Change table/div contents on click

**ian_batten** · 08-26-2009, 01:09 PM

Hi guys,

I'm looking for something just like this: http://consoles.freebiejeebies.co.uk/

In this case - when you click on one of the different prizes, the image of the prize and description will change accordingly in the table near the top of the page.

I am assuming this is Javascript, and if anyone could give me some points on how I can achieve this, I'd be greatly appreciative!

Thanks in advance,
Ian

**thenajsays** · 08-26-2009, 01:56 PM

do you have any code written already?

**ian_batten** · 08-26-2009, 02:08 PM

Well, it's a little bit complex at the moment. Basically, at the moment I'm using radio buttons. (For example, see http://tinyurl.com/krgyte)

I've found a script that converts radio buttons into clickable fields, http://lipidity.com/fancy-form/

So what I aim to do, is convert the radio buttons already on my site into clickable fields - and then when each of the prizes are clicked on, the description and photo will appear in a table/div nearer to the top of the page, just like that of http://consoles.freebiejeebies.co.uk/

If what I'm trying to do is not really viable, then do let me know

**thenajsays** · 08-26-2009, 02:35 PM

what you wanna do is absolutely viable and doable... i just wanted to know if i had somewhere to start or if i should write something from scratch

**ian_batten** · 08-26-2009, 03:18 PM

Sure, the piece of code I'm working with is:

Code:

<table width="750" height="230" border="0">
              {assign var="counter" value=0} {assign var="first" value="true"} 
              {foreach from=$prizes item="prize"} {if $prize->active} {if $counter 
              == 0}  {/if} 
              <tr>
                <td align="center">
  <div class='leftcol'><table width="400" border="0" cellspacing="0" cellpadding="0" height="5">
                    <tr>
                      <td></td>
                    </tr>
                  </table>
                  {assign var="prizedesc" value=$prize->description|nl2br} {assign 
                  var="prizedesc" value=$prizedesc|escape:"javascript"} 
                  <div style="float: left; margin-left: 15px;"><img src="{$prize->imgurl}"></div><div style="margin-right: 15px; float: right; width: 330px; height: 130px; padding: 5px; padding-right: 20px; padding-top: 12px;"></div>
  </div><br> 
                  <b>{$prize->name}</b><br>
                  {if $for_points} ({if $prize->points_required != 0}{$prize->points_required}{else}?{/if} 
                  Point{if $prize->points_required != 1}s{/if})<br>
                  {elseif $is_cash} ${$prize->cash_required} Minimum<br>
                  {else} ({if $prize->referrals_required != 0}{$prize->referrals_required}{else}?{/if} 
                  Referral{if $prize->referrals_required != 1}s{/if})<br>
                  {/if} {if $first == "true"} 
                  <input type="radio" name="prizeid" value="{$prize->id}"  checked>
                  {assign var="first" value="false"} {else} {if $selected_prize 
                  == $prize->id} 
                  <input type="radio" name="prizeid" value="{$prize->id}"  checked>
                  {else} 
                  <input type="radio" name="prizeid" value="{$prize->id}">
                  {/if} {/if} </td>
                {assign var="counter" value=$counter+1} {if $counter == $prizes_per_row} 
              </tr>
              {assign var="counter" value=0} {/if} {/if} {foreachelse} 
              <tr> 
                <td colspan="{$prizes_per_row}">No prizes found.</td>
              </tr>
              {/foreach} 
            </table>

Thanks again!

**thenajsays** · 08-26-2009, 04:46 PM

too late! lol i wrote a nice little template for you to use and change, including some very basic styling. if you have other questions, feel free to let me know!

Code:

<html>
<head>
<style type="text/css">
<!--
body {
	text-align: center;
}
#fullDescrip {
	width: 450px;
	height: 200px;
	border: solid #000000 2px;
	margin: 0 auto;
	text-align: justify;
	padding: 20px;
}
#fullDescrip img {
	float: left;
	border: none;
	margin-right: 20px;
}
#prodContainer {
	width: 900px;
	margin: 10px auto;
	border: none;
	text-align: center;
}
#prodContainer .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;
}
-->
</style>
<script>
	var rand = Math.floor(Math.random() * 6);//the number here must be the total number of products you have listed
	var prod = new Array();
	prod[0] = "<img src=\'\' width=\'100\' height=\'100\'>Product 1 Info";
	prod[1] = "<img src=\'\' width=\'100\' height=\'100\'>Product 2 Info";
	prod[2] = "<img src=\'\' width=\'100\' height=\'100\'>Product 3 Info";
	prod[3] = "<img src=\'\' width=\'100\' height=\'100\'>Product 4 Info";
	prod[4] = "<img src=\'\' width=\'100\' height=\'100\'>Product 5 Info";
	prod[5] = "<img src=\'\' width=\'100\' height=\'100\'>Product 6 Info";
	function loadProd(content){
		document.getElementById('fullDescrip').innerHTML = content;
	}
</script>
</head>

<body>
<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];
</script>
</div>
<table id="prodContainer">
	<tr>
    	<td>
        <div id="prod1" class="products" onClick="loadProd(prod[0])">
        Product 1
        </div>
        </td>
        <td>
		<div id="prod2" class="products" onClick="loadProd(prod[1])">
        Product 2
        </div>
        </td>
        <td>
		<div id="prod3" class="products" onClick="loadProd(prod[2])">
        Product 3
        </div>
        </td>
        <td>
		<div id="prod4" class="products" onClick="loadProd(prod[3])">
        Product 4
        </div>
        </td>
        <td>
		<div id="prod5" class="products" onClick="loadProd(prod[4])">
        Product 5
        </div>
        </td>
        <td>
		<div id="prod6" class="products" onClick="loadProd(prod[5])">
        Product 6
        </div>
        </td>
    </tr>
</table> 
</body>
</html>

**ian_batten** · 08-26-2009, 05:19 PM

Thanks so much mate - that's great. Now I gotta look at trying to integrate it into the radio button inputs!

Regards,
Ian

**thenajsays** · 08-26-2009, 05:41 PM

where and how?

**thenajsays** · 08-26-2009, 05:43 PM

wait a tick... are you using mootools? why didnt ya say so! idve used different code! mootools is fantastic!

**ian_batten** · 08-26-2009, 05:53 PM

Oh I didn't realise Mootools was anything that relevant?

I've got as far as this:

Code:

	<style>
label{margin-bottom:2px;margin-right:3px;padding-left:0.5em}

/* fancyform styles */
.demo label{display:block;padding:0.5em;padding-left:32px;background-position:8px center;background-repeat:no-repeat;border:1px solid #252525;clear:both;cursor:pointer}
.selected{background-color: #cccccc; background-image:url(111bg.png); color: #000000;}
.unselected{background-color:#1c1c1c;}
.leftcol{margin:auto;}
<!--
body {
	text-align: center;
}
#fullDescrip {
	width: 450px;
	height: 200px;
	border: solid #000000 2px;
	margin: 0 auto;
	text-align: justify;
	padding: 20px;
}
#fullDescrip img {
	float: left;
	border: none;
	margin-right: 20px;
}
#prodContainer {
	width: 900px;
	margin: auto;
	border: none;
	text-align: center;
}
#prodContainer .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;
}
-->
</style>
	<script>
	var rand = Math.floor(Math.random() * 6);//the number here must be the total number of products you have listed
	var prod = new Array();
	prod[0] = "<img src=\'../../../111.gif\' width=\'100\' height=\'100\'>Product 1 Info";
	prod[1] = "<img src=\'../../../112.gif\' width=\'100\' height=\'100\'>Product 2 Info";
	prod[2] = "<img src=\'../../../113.gif\' width=\'100\' height=\'100\'>Product 3 Info";
	prod[3] = "<img src=\'../../../114.gif\' width=\'100\' height=\'100\'>Product 4 Info";
	prod[4] = "<img src=\'\' width=\'100\' height=\'100\'>Product 5 Info";
	prod[5] = "<img src=\'\' width=\'100\' height=\'100\'>Product 6 Info";
	function loadProd(content){
		document.getElementById('fullDescrip').innerHTML = content;
	}
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moocheck.js"></script>


<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];
</script>
</div>
<form action='' onsubmit='void(0)'><div class='leftcol'><table align="center" id="prodContainer">
	<tr>
    	<td>
        
        <label><img src="../../../111.gif" name="prod1" width="175" height="160" class="products" id="prod1" onClick="loadProd(prod[0])" />
		<input type="radio">
		
		</label>
        
        </td>
        <td>
		
      <label><img src="../../../112.gif" width="175" height="160" id="prod2" class="products" onClick="loadProd(prod[1])"/>
		<input type="radio">
		</label>
        
        </td>
        <td>
		
       <label><img src="../../../113.gif" width="175" height="160" id="prod3" class="products" onClick="loadProd(prod[2])"/>
		<input type="radio">
		</label>
     
        </td>
        <td>
		
       <label><img src="../../../114.gif" width="175" height="160" id="prod4" class="products" onClick="loadProd(prod[3])"/>
		<input type="radio">
		</label>
    
        </td>
        <td>
        </td>
    </tr>
</table> </div></form>

Lemme know what you can do with Le Moo!

Thread: Change table/div contents on click

Thread Tools

Search Thread

Change table/div contents on click

Bookmarks

Bookmarks

Posting Permissions