iframe replacement with <div> tag

Posted on 2007-08-04
Last Modified: 2013-11-19
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.
Question by:cmollet
    LVL 58

    Accepted Solution

    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";

    LVL 15

    Assisted Solution

    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
    LVL 15

    Expert Comment

    The only problem in both cases is quotes.   If your description includes them, remember to escape them appropriately

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now