iframe replacement with <div> tag

I'm creating a product page and I'd like to display a description of the product in the above header with an image when a user clicks on a product name and would like to do this with out reloading the whole page.  I'd basically like to use a product description page I have and display that in the top section.  Is there any way to do this with a div tag?  I'd rather not use iframe if possible.  So the page would have a list of products, the user would click on the product and refresh the description area above with out refreshing the whole page.
cmolletAsked:
Who is Participating?
 
amit_gCommented:
Here is how you do it using some unique ID for each product (say ProductID)...

<div id="ProductDescription_1001" style="display:none">
Product 1 Description with image
</div>
<div id="ProductDescription_1002" style="display:none">
Product 2 Description with image
</div>
and so on

<a href="#" onclick="ShowDescription(1001);return false;">Product Name 1</a><br>
<a href="#" onclick="ShowDescription(1002);return false;">Product Name 2</a><br>

and so on...

<script>
function ShowDescription(ProductID)
{
alert(ProductID);
     var oDivs = document.getElementsByTagName("DIV");

     for (i = 0 ; i < oDivs.length ; i++)
     {
          if (oDivs[i].id.indexOf("ProductDescription_") != -1)
          {
              oDivs[i].style.display = "none";
          }
     }

     document.getElementById("ProductDescription_" + ProductID).style.display = "block";
}

ShowDescription(1001);
</script>
0
 
VincentPugliaCommented:
if you want to use the product description page as is, the answer is no.   If you are willing to edit your page so that each product description is a cell within an array, the answer is yes.

<script type='text/javascript' src='prodDescription.js'></script>
<script type='text/javascript'>
function getDescription(ndx)
{
     document.getElementById('theDiv').innerHTML = descriptions[ndx];
}
</script>
<div id='theDiv'></div>
<a href="#" onclick="getDescription(0);return false;"><img .....></a>
<a href="#" onclick="getDescription(1);return false;"><img .....></a>
<a href="#" onclick="getDescription(2);return false;"><img .....></a>

tjhe prodDescription.js file should only contain the array:

var descriptions = new Array("Product 1 is extremely cheap", "product 2 is durable",.......):


Alternate method would be to use an associative array:

var descriptions = new Array();
descriptions["Compaq Presario"] = "blah, blah, blah";
descriptions["Atari 2600"] = "bleep, bleep, bleep"
....etc....
the benefit of using such an array is that you could delete & add products without worrying about whether the array's sequence  has been messed up

<a href="#" onclick="getDescription('Atari 2600');return false;"><img .....></a>

the function would be same
0
 
VincentPugliaCommented:
The only problem in both cases is quotes.   If your description includes them, remember to escape them appropriately
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.