PDA

View Full Version : 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:


<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!

<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:


<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!

thenajsays
08-26-2009, 06:49 PM
i tweaked mine a bit... ill have a look at yours later and see what i can do... mootools is a very powerful javascript library that allows for a myriad of effects and transition

<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 src="mootools.js"></script>
<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";

var prodHov = function(){
this.set('morph', {duration: 250}).morph({'background-color': ['#FFFFFF' ,'#DDDDDD'], 'border-color': ['#AAAAAA','#F00']});
}
var prodLev = function(){
this.set('morph', {duration: 250}).morph({'background-color': ['#DDDDDD' ,'#FFFFFF'], 'border-color': ['#F00','#AAAAAA']});
}

window.addEvent('domready', function(){
$('fullDescrip').innerHTML = prod[rand];
$('prod0').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[0]});
$('prod0').addEvent('mouseenter', prodHov);
$('prod0').addEvent('mouseleave', prodLev);
$('prod1').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[1]});
$('prod1').addEvent('mouseenter', prodHov);
$('prod1').addEvent('mouseleave', prodLev);
$('prod2').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[2]});
$('prod2').addEvent('mouseenter', prodHov);
$('prod2').addEvent('mouseleave', prodLev);
$('prod3').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[3]});
$('prod3').addEvent('mouseenter', prodHov);
$('prod3').addEvent('mouseleave', prodLev);
$('prod4').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[4]});
$('prod4').addEvent('mouseenter', prodHov);
$('prod4').addEvent('mouseleave', prodLev);
$('prod5').addEvent('mouseup', function(){$('fullDescrip').innerHTML = prod[5]});
$('prod5').addEvent('mouseenter', prodHov);
$('prod5').addEvent('mouseleave', prodLev);
});
</script>
</head>

<body>
<div id="fullDescrip">
</div>
<table id="prodContainer">
<tr>
<td>
<div id="prod0" class="products">
Product 1
</div>
</td>
<td>
<div id="prod1" class="products">
Product 2
</div>
</td>
<td>
<div id="prod2" class="products">
Product 3
</div>
</td>
<td>
<div id="prod3" class="products">
Product 4
</div>
</td>
<td>
<div id="prod4" class="products">
Product 5
</div>
</td>
<td>
<div id="prod5" class="products">
Product 6
</div>
</td>
</tr>
</table>
</body>
</html>

ian_batten
08-26-2009, 07:03 PM
I've got this scraped together:

http://tinyurl.com/nqh6le

Incorporated both the moo radio buttons, and your script. It's okay (I think...) on a static page, but now is the question of how to incorporate it into my original script.

Thanks again for your input on this!

thenajsays
08-26-2009, 07:08 PM
that im unsure of my friend... the best person to decide that would be you... if that makes sense? you can really dissect it and decide what needs to stay and what needs to go

gregjordan38
09-10-2009, 08:13 PM
Hi folks, sorry to bother you. I have not touched Html etc in 5 years or so and am trying to get back into it. I am trying to do nearly the exact same as this but i am trying to change images in a div when you click on an ahref link that is also changing the content of an iframe. Any feedback would be greatly appreciated.

thenajsays
09-10-2009, 09:58 PM
lets see your code please

gregjordan38
09-11-2009, 05:00 PM
As i said, have not used anything in 5 years, barely used divs so im quite embarrased putting this code up. If you know any good books i could get to help relearn this stuff it would be helpful

<style type="text/css">

</head>
<body>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
<center>
<table width="801" height="9" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9"><div id="photo1"><img src="images/hometop.jpg" alt="Rite_logo" width="801" height="195" /></div></td>
</tr>
<tr>
<td width="14" height="49" background="Images/buttonback.jpg"></td>
<td width="66" background="Images/buttonback.jpg" class="style7"><div
align="center">

<a href="home.htm" target="iframe1">home</a></div></td>
<td width="114" background="Images/buttonback.jpg" class="style7"><div align="center">

<a href="dressmaking.htm" target="iframe1">dressmaking</a> </span></div></td>
<td width="99" background="Images/buttonback.jpg" class="style7"><div align="center" class="style1"><span class="style7">

<a href="alterations.htm" target="iframe1">alterations</a> </span></div></td>

Basically trying to load a new image into the photo1 div when i click on a link. Hope this is not an insult asking for help with this. Thanks in advance

thenajsays
09-11-2009, 06:41 PM
there are a number of ways to do it... first of you could add this to your iframe link:

<a href="alterations.htm" target="iframe1" onClick="document.getElementById('photo1').innerHTML = '<img src='images/newimage.jpg' alt='New_logo' />'">
or you could add an ID to the image youd like to change and then add this to the link:

<a href="alterations.htm" target="iframe1" onClick="document.getElementById(photo id goes here).src= '<img src='images/newimage.jpg' alt='New_logo' />'">
as for a book, i have none i can recommend, but there are MANY free tutorials online that are very helpful. i would check out http://w3schools.com/. they have a little of everything... i would also check and see if your local community college offers a continuing education course on this stuff... those are usually pretty reasonable. thats actually how im learning PHP... check out http://www.ed2go.com/ and see if they offer something... its all online and the courses are around $99

gregjordan38
09-11-2009, 07:29 PM
Neither of them seems to work, Do i need more script code in the <head> tags. Thanks very much for your help

thenajsays
09-11-2009, 08:10 PM
nope... let me see the non working code

thenajsays
09-11-2009, 08:13 PM
wait... my appologies... theres some mistakes in my code... im at work trying to multitask! sorry!

thenajsays
09-11-2009, 08:15 PM
<a href="alterations.htm" target="iframe1" onClick="document.getElementById(photo id goes here).src= 'images/newimage.jpg'">
i dunno what i was thinking about the innerHTML example... that wont work... you need to follow the second example but with the code above... sorry!

gregjordan38
09-12-2009, 11:13 AM
Sorry to bother you but it still doesnt work. Am i using the wrong photo id in the brackets? Here is the code i put in

<a href="alterations.htm" target="iframe1" onClick="document.getElementById(photo1).src= 'images/alterationstop.jpg'">alterations</a>

and here is the original photo code

<div id="photo1"><img src="images/hometop.jpg" alt="Rite_logo" width="801" height="195" /></div>

again thanks very much for your time and help. Really appreciate it

thenajsays
09-12-2009, 04:34 PM
photo id is right, but it needs to be in quotes...


<a href="alterations.htm" target="iframe1" onClick="document.getElementById('photo1').src= 'images/alterationstop.jpg'">alterations</a>

i also figured out why the innerHTML solution wasnt working... when adding an event (such as an onclick) to an element with javascript you cant use double quotes... have to use single, which is all fine and good except in cases when you need to have "nested" quotes... then you have to use single and ESCAPE them, like this: \'
so if that code had been like this:


<a href="alterations.htm" target="iframe1" onClick="document.getElementById('photo1').innerHTML = '<img src=\'images/newimage.jpg\' alt=\'New_logo'\ />'">

it would have worked... sorry for all the confusion!

gregjordan38
09-12-2009, 05:36 PM
Still nothing? Putin the bottom line of code you gave me and still doesnt work

thenajsays
09-13-2009, 01:21 AM
hmmmm can i see your code again?

gregjordan38
09-14-2009, 12:18 PM
<style type="text/css">
<!--
.style7 {
color: #6b878b;
font-size: 16px;
font-style: normal;
font-weight: bold;
}

</style>
</head>
<body>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
<center>
<table width="801" height="9" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9"><div id="photo1"><img src="images/hometop.jpg" alt="Rite_logo" width="801" height="195" /></div></td>
</tr>
<tr>
<td width="14" height="49" background="Images/buttonback.jpg"></td>

<td width="66" background="Images/buttonback.jpg" class="style7"><div align="center"><span class="style1"><a href="home.htm" target="iframe1">home</a></span></div></td>

<td width="114" background="Images/buttonback.jpg" class="style7"><div align="center"><span class="style1"><a href="dressmaking.htm" target="iframe1">dressmaking</a> </span></div></td>

<td width="99" background="Images/buttonback.jpg" class="style7"><div align="center" class="style1"><span class="style7"><a href="alterations.htm" target="iframe1" onClick="document.getElementById('photo1').innerHTML = '<img src=\'Images/alterationstop.jpg\' alt=\'New_logo'\ />'">alterations</a>

Thanks again

thenajsays
09-14-2009, 01:29 PM
<style type="text/css">
<!--
.style7 {
color: #6b878b;
font-size: 16px;
font-style: normal;
font-weight: bold;
}

</style>
</head>
<body>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
<center>
<table width="801" height="9" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9"><div id="photo1"><img src="images/hometop.jpg" alt="Rite_logo" width="801" height="195" /></div></td>
</tr>
<tr>
<td width="14" height="49" background="Images/buttonback.jpg"></td>

<td width="66" background="Images/buttonback.jpg" class="style7"><div align="center"><span class="style1"><a href="home.htm" target="iframe1">home</a></span></div></td>

<td width="114" background="Images/buttonback.jpg" class="style7"><div align="center"><span class="style1"><a href="dressmaking.htm" target="iframe1">dressmaking</a> </span></div></td>

<td width="99" background="Images/buttonback.jpg" class="style7"><div align="center" class="style1"><span class="style7"><a href="alterations.htm" target="iframe1" onClick="document.getElementById('photo1').innerHTML = '<img src=\'Images/alterationstop.jpg\' alt=\'New_logo\' />'">alterations</a>

gregjordan38
09-14-2009, 03:16 PM
Mate, your an absolute star. Really cant thank you enough for your help. Thanks for percavering with it and not losing patience with me.

thenajsays
09-14-2009, 06:13 PM
no problem! cheers!