Links that affects only a part of a page.

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

remaja

Thread Starter
Joined
May 15, 2006
Messages
513
hello.

I'm not too sure How I could phrase this in it's correct terms, but here is my situation.

I'm doing a website for a dealer that deals with products for corporate gifts and goods. such as t shirts, Caps, Mugs, etc.

Here's what I have in mind...

As any user click on a product in the product panel as shown below, the Product details panel will immediately change with the given product information such as size, price etc etc.

Instead of linking it to a whole new page just like what HTML usually does.
This saves time and has a better user experience.

I'm using Joomla! to build the site btw. any methods of doing this will be much appreciated.
 

Attachments

remaja

Thread Starter
Joined
May 15, 2006
Messages
513
yes. true. is there a standard phrase or term for this? is very hard to do research and start goggling it since that I don't know what's the proper term for it.

or are there sites that may help me out?

thank you.
 
Joined
Oct 25, 2007
Messages
551
I simple way of doing this would be to create a div that is going to hold the product data and give it an ID of "product_info". Then store all the product data in an array (or variables). Then you can put a function in like this:
HTML:
<script type='text/javascript'>

function changeInfo(arrKey) {
document.getElementById("product_info").innerHTML = info_arr[arrKey];
return true;
}

</script>
On the link for each product make it point to '#' and insert an onclick event to point to changeInfo with the numeric key of the array that holds the description. This will basically swap the HTML inside the div for that of the individual products.

I haven't explained it particualarly well, but hopefully you'll understand what I mean :p
 

remaja

Thread Starter
Joined
May 15, 2006
Messages
513
I have a base understanding of what you mean. But I'm not too sure about the details as I have no java scripting knowledge at all. I only dealt with actionscript for Flash.

where do i insert the array or variables? I assume it's written it in a separate file, (like an Action Script Class file)
and somehow is directed from the Java script code in the page itself?

is there a website that you would recommend me for further details? would love to learn more.

thank you.
 
Joined
Oct 25, 2007
Messages
551
There's a useful looking site here about changing the inner HTML of a div. Unlike in the examples there, in my example I said to call a function in the onClick event, to make it much more efficient. The array could be stored directly in the HTML file (which would be useful because it could be generated as the output of the PHP/ASP file. You can read more about Javascipt arrays on the W3Schools site.

So your array decaration would look like this:
Code:
var products = new array();
products[0] = "Info about the first product. This can include HTML tags";
products[1] = "Info about the second product.";
I hope that explains it a bit more, but if you need any more help with code just ask :)
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top