• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3357
  • Last Modified:

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.
  • 2
2 Solutions
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 id="ProductDescription_1002" style="display:none">
Product 2 Description with image
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...

function ShowDescription(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";

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];
<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"
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
The only problem in both cases is quotes.   If your description includes them, remember to escape them appropriately

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now