How to change table contents with Div ID?, Stuck with coding, help appreciated Options

[AshleySmith]

Thanks Christian. I don't have a clue what you mean unfortunately, and I don't want users to see everything on page load. One would expect all to be using javascript, or an alert to be read to install for operation. I think most if not all use JS as a primary extension/prerequisite for sites nowadays, though not a web developer (to comment for 100% of cases and sites in use).

I was trying this - http://codepen.io/anon/pen/WbZKZR

...but I couldn't again get things to close and return default text.



Again, not sure how to code those buttons, nor how to change their text, only HMTL I think by what I've done.

I'd like to get the workings first before I start writing all the tables etc. That'll confuse me more with added code. Needs to be simple for me to build on and around. And work...

[Christian J]

I don't want users to see everything on page load.

They wouldn't, normally it's to fast to notice. It's also good web authoring practice to separate different layers of technology like that: http://en.wikipedia.org/wiki/Progressive_enhancement (and it makes the page easier to understand and maintain for yourself).

[AshleySmith]

Thanks!

Still stuck on the process ("code") to get this all working unfortunately

[AshleySmith]

Any further help Christian? Or others... I haven't been able to figure this out…

Thanks!

[Christian J]

Try this then. The product descriptions are stored in each table cell, but will be invisible to users with javascript. Instead buttons are generated that will show the descriptions in the separate DIV#description when clicked.

CODE

<script type="text/javascript">
function product_descriptions()
{
    var product_table=document.getElementById('product_table');
    var td=product_table.getElementsByTagName('td');

    for(var i=0; i<td.length; i++)
    {
        if(td[i].className=='product')
        {
            var div=td[i].getElementsByTagName('div')[0]; // first DIV in each TD.product cell
            div.style.display='none';

            var input=document.createElement('input');
            input.type='button';
            input.value='Show more'; // button text
            td[i].insertBefore(input, div);
            input.onclick=function()
            {
                document.getElementById('description').innerHTML=this.nextSibling.innerHTML;
            }
        }
    }
}
if (window.addEventListener)
{
    window.addEventListener('load', product_descriptions, false);
}
else if(window.attachEvent) // IE8 and older
{
  window.attachEvent('onload', product_descriptions);
}
</script>

<table id="product_table">
<tr>
    <td class="product">
    Product1
    <div>description1</div>
    </td>
</tr>
<tr>
    <td class="product">
    Product2
    <div>description2</div>
    </td>
</tr>
</table>

<div id="description">
default text
</div>

[AshleySmith]

Sorry for the belated reply, I'm not getting e-mail notifications though checking button on the forum... Ugh!

I can't get this to work, it's just showing this when I view in browser...

Product1
description1
Product2
description2
default text

No buttons, and I don't follow what you have done, nor how to edit.

Can you kindly explain and show me an example?

Thanks!

Ash

[AshleySmith]

Edit;

Ok, tried another browser and can see buttons now, thanks, but this doesn't work as wished to changed button text too and return to show default text when hidden... i.e. when button clicked again.

Is it possible to edit to get that working, please?

This post has been edited by AshleySmith: Feb 19 2015, 10:23 PM

[Christian J]

I can't get this to work, it's just showing this when I view in browser...

Product1
description1
Product2
description2
default text

Which browser/version? Is javascript enabled?

[Christian J]

this doesn't work as wished to changed button text too and return to show default text when hidden... i.e. when button clicked again.

Sorry, forgot about that. Here's another one then:

CODE

<script type="text/javascript">

function product_descriptions()
{
    // button texts
    var button_show='Show more';
    var button_hide='Show less';

    var description=document.getElementById('description');
    var default_description=description.innerHTML;
    var product_table=document.getElementById('product_table');
    var td=product_table.getElementsByTagName('td');

    for(var i=0; i<td.length; i++)
    {
        if(td[i].className=='product')
        {
            var div=td[i].getElementsByTagName('div')[0]; // first DIV in each TD.product cell
            div.style.display='none';

            var button=document.createElement('button');
            button.setAttribute('type','button');
            button.innerHTML=button_show;
            td[i].insertBefore(button, div);
            button.onclick=function()
            {
                if(this.innerHTML==button_show)
                {
                    description.innerHTML=this.nextSibling.innerHTML;
                    this.innerHTML=button_hide;
                }
                else
                {
                    description.innerHTML=default_description;
                    this.innerHTML=button_show;
                }
                if(document.getElementById('clicked_button')) // some button has already been clicked
                {
                    var clicked_button=document.getElementById('clicked_button');
                    clicked_button.removeAttribute('id');
                    clicked_button.innerHTML=button_show;

                    if(this!=clicked_button)
                    {
                        this.id='clicked_button';
                    }
                }
                else // first button click
                {
                    this.id='clicked_button';
                }
            }
        }
    }
}
if (window.addEventListener)
{
    window.addEventListener('load', product_descriptions, false);
}
else if(window.attachEvent) // IE8 and older
{
  window.attachEvent('onload', product_descriptions);
}
</script>

<table id="product_table">
<tr>
    <td class="product">
    Product1
    <div>description1</div>
    </td>
</tr>
<tr>
    <td class="product">
    Product2
    <div>description2</div>
    </td>
</tr>
</table>


<div id="description">
default text
</div>

To configure, here's where the button text is specified (at the top of the script):

CODE

var button_show='Show more';
var button_hide='Show less';

Also, when a button is clicked it automatically gets the ID "clicked_button", in case you want to style the active button differently with CSS.

For the product texts, just add more rows like this in the table:

CODE

<tr>
    <td class="product">
    Product name
    <div>product description</div>
    </td>
</tr>

You might be able to add more HTML in the table cells, but the DIV with the product description must be the first DIV in each cell. The buttons are inserted right before this DIV.

The default text is specified here:

CODE

<div id="description">
default text
</div>

You can move that DIV element around on the page if you want (e.g. before the table instead of after).

[AshleySmith]

AWESOME!!! I'm going to delve into this over the weekend and see if I can get a model set for the store scripted and designed. Thank you so much, it's working as I'd like. YOU ROCK!!! Really appreciate your time and assistance.

[AshleySmith]

Ok, looking into this more I'm thinking of design ideas for the site.

If you recall, in post 5.. - http://forums.htmlhelp.com/index.php?showt...21340&st=0#

..I had some code to show/hide a faux menu consisting of links for All Products, Drums, Guitars. Can I somehow incorporate that to show the various products when clicked?

I having a little issue with having multiple products shown. If I open info for a product under a different heading, then open info for another and close it, it doesn't control the other to return both to the default text. The one you opened first still shows info for what product you chose.

Here's the code... Note I've duplicated it for layout of a second product. Now just to clarify when I say product, I mean this is what the product is called, there will be many variations of the product itself to purchase.

HTML

CODE

DRUMS
<br><br>
ROCK VOL 1
<br><br>
<table id="product_table" style="width:100%"; style="margin-left:auto;margin-right:auto";>
<tr>
    <td class="product">
  Product 1
      <br>
    <div>Description 1</div>
    </td>
</tr>
<tr>
    <td class="product">
    Product 2
      <br>
    <div>Description 2</div>
    </td>
</tr>
</table>

<br>
<div id="description" style="padding-left: 2px;">
Rock Vol 1 is born from a collection of 3000+ drum grooves and complementary fills expertly programmed by 'MIX IT IN THE BOX' (CEO) Ashley Smith.  Grooves are of tempos 100, 110, 120, 130, and 140; with double time and half time itterations for the latter two BPM tempo.  They have been conformed for compatability with FXpansion's BFD 2/3, Slate SSD4, Toontrack Superior Drummer, and General MIDI.  Also available, you'll see above - Plug-In Centric Mix Sessions (utilising: Waves, Sonnox, SSL, Slate VMR, McDSP and standard DAW inclusive components), Audio Loops and Engineered Audio Loops (RAW Stereo and Multi-Track; with the latter processed using premiere audio hardwares/gears by Engineers inc. Khaliq Glover, Mitch Malloy, David Bendeth...).
</div>

<br><br>

ROCK VOL 2
<br><br>
<table id="product_table1" style="width:100%"; style="margin-left:auto;margin-right:auto";>
<tr>
    <td class="product1">
  Product 1
      <br>
    <div>Description 1</div>
    </td>
</tr>
<tr>
    <td class="product1">
    Product 2
      <br>
    <div>Description 2</div>
    </td>
</tr>
</table>

<br>
<div id="description1" style="padding-left: 2px;">
Rock Vol 2 is born from a collection of 3000+ drum grooves and complementary fills expertly programmed by 'MIX IT IN THE BOX' (CEO) Ashley Smith.
</div>

JS

CODE

function product_descriptions()
{
    // button texts
    var button_show='Show Product Information';
    var button_hide='Hide Product Information';

    var description=document.getElementById('description');
    var default_description=description.innerHTML;
    var product_table=document.getElementById('product_table');
    var td=product_table.getElementsByTagName('td');

    for(var i=0; i<td.length; i++)
    {
        if(td[i].className=='product')
        {
            var div=td[i].getElementsByTagName('div')[0]; // first DIV in each TD.product cell
            div.style.display='none';

            var button=document.createElement('button');
            button.setAttribute('type','button');
            button.innerHTML=button_show;
            td[i].insertBefore(button, div);
            button.onclick=function()
            {
                if(this.innerHTML==button_show)
                {
                    description.innerHTML=this.nextSibling.innerHTML;
                    this.innerHTML=button_hide;
                }
                else
                {
                    description.innerHTML=default_description;
                    this.innerHTML=button_show;
                }
                if(document.getElementById('clicked_button')) // some button has already been clicked
                {
                    var clicked_button=document.getElementById('clicked_button');
                    clicked_button.removeAttribute('id');
                    clicked_button.innerHTML=button_show;

                    if(this!=clicked_button)
                    {
                        this.id='clicked_button';
                    }
                }
                else // first button click
                {
                    this.id='clicked_button';
                }
            }
        }
    }
}
if (window.addEventListener)
{
    window.addEventListener('load', product_descriptions, false);
}
else if(window.attachEvent) // IE8 and older
{
  window.attachEvent('onload', product_descriptions);
}


///////

function product_descriptions1()
{
    // button texts
    var button_show='Show Product Information';
    var button_hide='Hide Product Information';

    var description=document.getElementById('description1');
    var default_description=description.innerHTML;
    var product_table=document.getElementById('product_table1');
    var td=product_table.getElementsByTagName('td');

    for(var i=0; i<td.length; i++)
    {
        if(td[i].className=='product1')
        {
            var div=td[i].getElementsByTagName('div')[0]; // first DIV in each TD.product cell
            div.style.display='none';

            var button=document.createElement('button');
            button.setAttribute('type','button');
            button.innerHTML=button_show;
            td[i].insertBefore(button, div);
            button.onclick=function()
            {
                if(this.innerHTML==button_show)
                {
                    description1.innerHTML=this.nextSibling.innerHTML;
                    this.innerHTML=button_hide;
                }
                else
                {
                    description1.innerHTML=default_description;
                    this.innerHTML=button_show;
                }
                if(document.getElementById('clicked_button')) // some button has already been clicked
                {
                    var clicked_button=document.getElementById('clicked_button');
                    clicked_button.removeAttribute('id');
                    clicked_button.innerHTML=button_show;

                    if(this!=clicked_button)
                    {
                        this.id='clicked_button';
                    }
                }
                else // first button click
                {
                    this.id='clicked_button';
                }
            }
        }
    }
}
if (window.addEventListener)
{
    window.addEventListener('load', product_descriptions1, false);
}
else if(window.attachEvent) // IE8 and older
{
  window.attachEvent('onload', product_descriptions1);
}

I'd like to have the products horizontally aligned, the tables <td> I guess, but can't figure that out what they are not by default?

Thanks!

[AshleySmith]

For ref what I'm seeing...

http://codepen.io/anon/pen/JoLVWv

[AshleySmith]

So, maybe clearer, when Hide Product Information is clicked it should return all other products' information to the default text in their respective <div id=""> handles.

[Christian J]

If you recall, in post 5.. - http://forums.htmlhelp.com/index.php?showt...21340&st=0#

..I had some code to show/hide a faux menu consisting of links for All Products, Drums, Guitars. Can I somehow incorporate that to show the various products when clicked?

I don't know, I didn't understand that code example.

I having a little issue with having multiple products shown. If I open info for a product under a different heading, then open info for another and close it, it doesn't control the other to return both to the default text. The one you opened first still shows info for what product you chose.

Now the script starts to become a bit complex. I suspect it would be easier for everybody (you, me and your visitors) to simply create separate plain HTML pages for product categories, products in each category, and product descriptions. Javascript menus like these easily just increase complexity without really enhancing usability. For example:

* If a visitor arrives from a search engine, he may not find the content he was searching for since it's hidden by the script.

* If the user does find the content (after clicking on the buttons) he can't bookmark that section of the page for future revisits, instead he must click buttons again. Even worse if the user wants to send the URL of the page to a friend. (It's possible to write scripts where you can bookmark page states, but it's not worth the trouble in most cases.)

* The page's content may jump up or down when descriptions are shown/hidden, which might be annoying.

I'll post a crude example below anyway (doesn't work in IE8 or older). The descriptions are now placed in table cells to make the script simpler.

CODE

<script type="text/javascript">
// button texts
var button_show='Show more';
var button_hide='Show less';

var description_array=new Array();
function product_descriptions()
{
    // create array of default descriptions
    var display_description=document.getElementsByClassName('display_description');
    for(var i=0; i<display_description.length; i++)
    {
        description_array[i]=display_description[i].innerHTML;
    }

    // create buttons
    var product=document.getElementsByClassName('product');
    for(var i=0; i<product.length; i++)
    {
        var description_container=product[i].getElementsByTagName('div')[0]; // first DIV in each TD.product cell
        description_container.style.display='none';

        var button=document.createElement('button');
        button.setAttribute('type', 'button');
        button.className='product_button';
        button.innerHTML=button_show;
        product[i].insertBefore(button, description_container);
    }

    var product_button=document.getElementsByClassName('product_button');
    for(var i=0; i<product_button.length; i++)
    {
        product_button[i].onclick=function()
        {
            // reset button texts
            for(var j=0; j<product_button.length; j++)
            {
                product_button[j].innerHTML=button_show;
            }

            // reset default descriptions
            var display_description=document.getElementsByClassName('display_description');
            for(var j=0; j<display_description.length; j++)
            {
                display_description[j].innerHTML=description_array[j];
            }

            // find display_description in same table as the clicked button
            var table=document.getElementsByTagName('table');
            for(var j=0; j<table.length; j++)
            {
                if(table[j].className=='product_category' && table[j].contains(this))
                {
                    // only one display_description in table[j], so [0]
                    var display_description=table[j].getElementsByClassName('display_description')[0];
                }
            }

            // if the same or another button has been clicked previously
            if(document.getElementById('clicked_button'))
            {
                var clicked_button=document.getElementById('clicked_button');
                clicked_button.removeAttribute('id');

                // other button clicked before
                if(this!=clicked_button)
                {
                    this.innerHTML=button_hide;
                    this.id='clicked_button';
                    display_description.innerHTML=this.nextSibling.innerHTML;
                }
            }

            // first button click
            else
            {
                this.innerHTML=button_hide;
                this.id='clicked_button';
                display_description.innerHTML=this.nextSibling.innerHTML;
            }
        }
    }
}

if(window.addEventListener && document.getElementsByClassName)
{
    window.addEventListener('load', product_descriptions, false);
}
</script>

<table class="product_category">
<tr>
    <td class="product">
    Product1
    <div>description1</div>
    </td>
</tr>
<tr>
    <td class="product">
    Product2
    <div>description2</div>
    </td>
</tr>
<tr>
    <td class="display_description">
    default text A
    </td>
</tr>
</table>

<table class="product_category">
<tr>
    <td class="product">
    Product3
    <div>description3</div>
    </td>
</tr>
<tr>
    <td class="product">
    Product4
    <div>description4</div>
    </td>
</tr>
<tr>
    <td class="display_description">
    default text B
    </td>
</tr>
</table>

[AshleySmith]

Ah, that's cool! So, I don't need to change any code effectively from your new example, I can just keep adding new products and naming them in text...

A few last things then... How do I arrange the products so they show horizontally, as at the moment they show underneath each other, and can each product and respective button be placed in its own table cell (say with a border, styled with CSS) without any issue with the code? I can't move a product outside a <td> for example, or if I do I would just need to ensure it has the class same as others for the JS to work.

Thank you for your help, at the weekend too! Awesome!!!

[AshleySmith]

I think customers will be cool with the descriptions and content areas changing as they're using said buttons to view the content they wish to read. Hopefully figuring out CSS I can style it nice and keep content organised in bordered tables.

[AshleySmith]

Might be ok doing something like this, with a buy now button next to other...

http://codepen.io/anon/pen/xbjGqe

I'll see what you say is possible.

It's gonna be hard to split/strip all the code from my other site which uses Payloom for store. There's tons of code and a mountain of js files and such I recall for adding products and referencing products.txt file and MYSQL etc...

[Christian J]

I changed the script a bit to make the HTML structure more flexible. Now you only need container elements (don't have to be DIVs) with the specified CLASS:es organized like this:

CODE

<div class="product_category">
    <div class="product_description">description x</div>
    <div class="product_description">description y</div>
    <div class="display_description">default text</div>
</div>

The table structure below is not required by the script at all, so you can change or remove it like you want as long as the above CLASS structure remains.

CODE

<script type="text/javascript">
// button texts
var button_show='Show more';
var button_hide='Show less';

var description_array=new Array();
function product_descriptions()
{
    // create array of default descriptions
    var display_description=document.getElementsByClassName('display_description');
    for(var i=0; i<display_description.length; i++)
    {
        description_array[i]=display_description[i].innerHTML;
    }

    // create buttons
    var product_description=document.getElementsByClassName('product_description');
    for(var i=0; i<product_description.length; i++)
    {
        product_description[i].style.display='none';

        var button=document.createElement('button');
        button.setAttribute('type', 'button');
        button.className='product_button';
        button.innerHTML=button_show;
        product_description[i].parentNode.insertBefore(button, product_description[i]);
    }

    var product_button=document.getElementsByClassName('product_button');
    for(var i=0; i<product_button.length; i++)
    {
        product_button[i].onclick=function()
        {
            // reset button texts
            for(var j=0; j<product_button.length; j++)
            {
                product_button[j].innerHTML=button_show;
            }

            // reset default descriptions
            var display_description=document.getElementsByClassName('display_description');
            for(var j=0; j<display_description.length; j++)
            {
                display_description[j].innerHTML=description_array[j];
            }

            // find a "display_description" in the same "product_category" as the clicked button
            var product_category=document.getElementsByClassName('product_category');
            for(var j=0; j<product_category.length; j++)
            {
                if(product_category[j].contains(this))
                {
                    // only one display_description in each product_category, so [0]
                    var display_description=product_category[j].getElementsByClassName('display_description')[0];
                }
            }

            // if the same or another button has been clicked previously
            if(document.getElementById('clicked_button'))
            {
                var clicked_button=document.getElementById('clicked_button');
                clicked_button.removeAttribute('id');

                // other button clicked before
                if(this!=clicked_button)
                {
                    this.innerHTML=button_hide;
                    this.id='clicked_button';
                    display_description.innerHTML=this.nextSibling.innerHTML;
                }
            }

            // first button click
            else
            {
                this.innerHTML=button_hide;
                this.id='clicked_button';
                display_description.innerHTML=this.nextSibling.innerHTML;
            }
        }
    }
}

if(window.addEventListener && document.getElementsByClassName)
{
    window.addEventListener('load', product_descriptions, false);
}
</script>

<div class="product_category">
<table>
<tr>
    <td>
    Product1
    <div class="product_description">description1</div>
    </td>
</tr>
<tr>
    <td>
    Product2
    <div class="product_description">description2</div>
    </td>
</tr>
<tr>
    <td>
   <div class="display_description"> default text A</div>
    </td>
</tr>
</table>
</div>

<div  class="product_category">
<table>
<tr>
    <td>
    Product3
    <div class="product_description">description3</div>
    </td>
</tr>
<tr>
    <td>
    Product4
    <div class="product_description">description4</div>
    </td>
</tr>
<tr>
    <td>
    <div class="display_description">default text B</div>
    </td>
</tr>
</table>
</div>

[AshleySmith]

I see. But what if I wish to place the display_description in a table cell on its own? I can't because that doesn't keep the structure. Also tables are for some reason not aligning horizontally. Could that be a codepen issue as I'm doing it all online at the mo, can't figure out how to do it offline with index.html and calling js script from a folder on my hard drive. I know pretty basic, but i'm a newbie...

If you take a look at this - http://jsfiddle.net/4wsfxft8/10/

...that's kind of how I want it displayed (layout wise with tables displaying products and description underneath), with another table underneath products to display the text (default, and product description when button clicked).

Can I split the div's or is that going to ruing the structure? Or can I use the other script you first posted to do this?

Thanks!

[AshleySmith]

Ok, I think it's me, and I have to edit table tag to style as you've moved the code around. Can I add an id to a table to style it with CSS or will that mess up the code?

Sorry for all the questions, I'm learning a lot