1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Links that affects only a part of a page.

Discussion in 'Web Design & Development' started by remaja, Sep 27, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. remaja

    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.
     

    Attached Files:

  2. namenotfound

    namenotfound

    Joined:
    Apr 30, 2005
    Messages:
    3,012
    So you want something like the way pictures are handled on eBay?

    That requires JavaScript
     
  3. remaja

    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.
     
  4. TheRobatron

    TheRobatron

    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
     
  5. remaja

    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.
     
  6. TheRobatron

    TheRobatron

    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 :)
     
  7. Sponsor

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 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/753839

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice