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

[AshleySmith]

Hi all,

Hope you can help with this... I'm working some code to setup an eCommerce site, and am playing with div id's and tables.

http://jsfiddle.net/4wsfxft8/6/

I'd like to when I click on the GM Extended MIDI link for that table cell alone to have its contents changed. I'd like to have that link clicked and show info for the product in the cell, and have a close button [x] to change it back.

I've been using javascript to change div's content, but can't quite figure out what I'm doing wrong by giving a table cell a div id. Is it even possible?

Any assistance would be greatly appreciated. I hope to implement this code for all products. I have things sussed for changing categories at the top for a menu...

Thanks

[AshleySmith]

Lines 17 - 22 for ref I was trying to create a div id for the table and then add the JS code in there to modify content on click. I'm guessing this isn't the right place... and also I haven't setup the content I wish it to change to, which will just be text and perhaps bullet points to detail product information. I'm not sure how/where to write code for that information. Would that be in the CSS?

Thank you.

[Christian J]

http://jsfiddle.net/4wsfxft8/6/

Please post code examples on the forum instead (or a link to a sample page), jsfiddle is just an annoyance.

Before starting with javascript the HTML structure must be right. The current HTML example contains lots of syntax errors, that http://validator.w3.org/ should point out. Also the example uses up to three nested tables for layout, which is not very practical. It's much better to simplify the table markup, and use CSS for e.g. padding instead of BR elements.

I'd like to when I click on the GM Extended MIDI link for that table cell alone to have its contents changed. I'd like to have that link clicked and show info for the product in the cell, and have a close button [x] to change it back.

Where should the content come from? I recommend using CSS to hide it when not shown.

I've been using javascript to change div's content, but can't quite figure out what I'm doing wrong by giving a table cell a div id. Is it even possible?

You can certainly give table cell an ID, but you also need e.g. an onclick event if you want javascript to do something. This thread contains similar examples, using both javascript and pure CSS: http://forums.htmlhelp.com/index.php?showtopic=21311

[Christian J]

I'm not sure how/where to write code for that information. Would that be in the CSS?

No, CSS is just for styling existing content.

[AshleySmith]

Thanks, much appreciated!

I'm new to all this coding stuff, so am not sure how to align tables as such using CSS. I just picked a tut on youtube for using JS to show/hide content, so apologies for any errors. This is just a rough so I can get my head around show/hide basically for div's nested in table cells. How should I code this?

The text to be shown when you click the link could just be a div container I guess with the correct proportions for the cell size. It's just confusing trying to set the cell itself with an id that can be called with the click. And then also, I need help to figure out how to add the close button to reverse/hide the action and show content and buy button etc again.

I can look to style with graphics at a latter date. I think calling a CSS style sheet would be best for that too… and .js file for the JS code.

I have a site already, but need to jazz it up with a better functioning store.

Your help is greatly appreciated!!!

HMTL

CODE

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'inline';">ALL PRODUCTS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'none';">DRUMS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'none';
document.getElementById('GTRSnormal').style.display = 'inline';">GUITARS</a>

<br>
<br>
    
    <div id='DRUMSnormal'><b>DRUMS</b> - ROCK VOL 1<br>
        
        <br> <table border="1" cellspacing="3" cellpadding="3" width="600" height="200"><tr><td align="center"><b>MIDI</b></td>
            
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="center" align="centre"><br/><br/><a href='#'>GM Extended MIDI</a><br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="center" align="center">PayPal</tr></td></table></tr></td></table>
                
                <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center">
                
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><a href='#'>BFD MIDI</a><br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="center" align="center">PayPal</tr></td></table></tr></td></table>
                
                <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center"></table>
                
                
    <br> <table border="1" cellspacing="3" cellpadding="3" width="600" height="200"><tr><td align="center"><b>RAW AUDIO</b></td>
            
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="center" align="centre"><br/><br/><a href='#'>Kit 1</a><br/><br/><table border="" cellpadding="3" width="150"><tr><td valign="center" align="center">PayPal</tr></td></table></tr></td></table>
                
                 <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center">
                
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><a href='#'>Kit 2</a><br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="center" align="center">PayPal</tr></td></table></tr></td></table> <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center"></table>
                
                    
    <br> <a href='#'>link 3</a>
    <br>
    <br>
        </div>
        
    <div id='DRUMShidden'>DRUM PRODUCTS
        <br>
        <br> <a href='#'>link 1</a>
        <br> <a href='#'>link 2</a>
        <br> <a href='#'>link 3</a>
        <br>
        <br>
            </div>
            
     <div id='GTRSnormal'>GUITAR PRODUCTS
        <br>
        <br> <a href='#'>link 4</a>
        <br> <a href='#'>link 5</a>
        <br> <a href='#'>link 6</a>
        <br>
        <br>
            </div>
                
      <div id='GTRShidden'>This is the normal DIV, not hidden.
         <br>
         <br> <a href='#'>link 4</a>
         <br> <a href='#'>link 5</a>
         <br> <a href='#'>link 6</a>
         <br>
         <br>
            </div>

CSS

CODE

#ShowAll {
    display: inline;
    position: relative;
}

#DRUMSnormal {
    display: inline;
    position: relative;
}
#DRUMShidden {
    display: none;
    position: relative;
}
#GTRSnormal {
    display: inline;
    position: relative;
}
#GTRShidden {
    display: none;
    position: relative;
}

[AshleySmith]

Hi,

I took a look at the innerHTML and Checkbox Hack for CSS on the forum page you provided, but am still stuck for actually adding an id for the table cell and how to change the div?

With the Checkbox Hack I would be ablate change the background to a background image with the product info, but the toggle button name I don't know how to change when clicked, and besides I'd like to have a close [x] button on the info page to close it back to the purchase display.

Can you please offer some code, really stuck!

Thanks

[Christian J]

CODE

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'inline';">ALL PRODUCTS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'none';">DRUMS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'none';
document.getElementById('GTRSnormal').style.display = 'inline';">GUITARS</a>

Technically the above JS is correct, and should show or hide an element with the corresponding ID. You just need to give the DIV elements in the table cells corresponding ID values (currently the DIVs are outside the table). Note that the DIVs that are hidden with CSS will stay permanently hidden if javascript is disabled/unsupported.

Here are some issues with the table HTML structure:

CODE

</tr></td></table>

-- the </td> end tag must come first, then the </tr>, then the </table>.

CODE

<table border="1" cellspacing="3" cellpadding="3" width="600" height="200">

All the HTML attributes above can be replaced with CSS.

CODE

<td align="center"><b>MIDI</b></td>

Use a TH element instead of TD and B elements. See http://www.htmlhelp.com/reference/html40/tables/th.html

CODE

<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="center" align="centre">

There's no VALIGN attribute for images, and the ALIGN value is spelled wrong. And again CSS can be used instead of attributes.

CODE

<br/><br/>

CSS padding or margin can be used instead of BR elements.

CODE

<td valign="center" align="center">PayPal

There's no "center" value for VALIGN, it should be "middle".

[Christian J]

With the Checkbox Hack I would be ablate change the background to a background image with the product info

No, you can change real content too. Perhaps you can't add a [x] button, but you might use the form checkbox for that purpose.

, but the toggle button name I don't know how to change when clicked

You mean the link text in your example. What should it change to?

[AshleySmith]

Great! Thanks for the tips. Table layout is definitely something I need to look into more, and aligning elements on a page... that's really hard to grasp as a newbie, using Dreamweaver.

I think perhaps the best option is to have just a button called 'More Info' that when clicked changes the picture (for example, the smiley face to a picture with product info), and also have the button name change to to 'Close Info'.

I recall doing something similar using slickbox to change button name and show/hide content using animation on my previous store (seattleunderground.co.uk/Store.html), but don't want that scroll feature, at least not here...

Would it be better to use something other than JS if users don't have it supported for browser? Perhaps jQuery, or...?

Thank you v.much again for the help!

[Christian J]

Would it be better to use something other than JS if users don't have it supported for browser? Perhaps jQuery, or...?

That would be CSS then. jQuery is just a javascript library. But the best approach is to make an HTML page that works without JS, then add the JS functionality as an optional feature.

Thank you v.much again for the help!

You're welcome...

[AshleySmith]

Thanks! I don't know the CSS workings for show/hide other than display; none; block; which I think I have done above, right?

How do I add an id or class to an image? I'm just trying the button workaround to change the smiley face to some text. I think I have confused img id= and using class for a div.

HTML

CODE

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'inline';">ALL PRODUCTS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'inline';
document.getElementById('GTRSnormal').style.display = 'none';">DRUMS</a> |

<a href='#' onclick="document.getElementById('DRUMSnormal').style.display = 'none';
document.getElementById('GTRSnormal').style.display = 'inline';">GUITARS</a>

<br>
<br>
    
    <div id='DRUMSnormal'><b>DRUMS</b> - ROCK VOL 1<br>
        
        <br> <table border="1" cellspacing="3" cellpadding="3" width="600" height="200"><tr><td align="center"><b>MIDI</b></td>
            
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><div class="exmaple"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="middle" align="centre"><br/><br/><b>GM Extended MIDI</b><br><br></div><button onclick="myFunction()">More Info</button> <br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="middle" align="center">PayPal</td></tr></table></td></tr></table>
                
                <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center">
                
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><a href='#'>BFD MIDI</a><br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="middle" align="center">PayPal</td></tr></table></td></tr></table>
                
                <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="middle" align="center"></table>
                
                
    <br> <table border="1" cellspacing="3" cellpadding="3" width="600" height="200"><tr><td align="center"><b>RAW AUDIO</b></td>
            
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="middle" align="centre"><br/><br/><a href='#'>Kit 1</a><br/><br/><table border="" cellpadding="3" width="150"><tr><td valign="center" align="center">PayPal</td></tr></table></tr></td></table>
                
                 <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="middle" align="center">
                
            <td valign="bottom" align="center"><table border="0" cellspacing="3" cellpadding="3" width="150" height="200"><tr><td valign="bottom" align="center"><a href='#'>Kit 2</a><br/><br/><table border="1" cellpadding="3" width="150"><tr><td valign="middle" align="center">PayPal</tr></td></table></tr></td></table> <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center"></table>
                
                    
    <br> <a href='#'>link 3</a>
    <br>
    <br>
        </div>
        
    <div id='DRUMShidden'>DRUM PRODUCTS
        <br>
        <br> <a href='#'>link 1</a>
        <br> <a href='#'>link 2</a>
        <br> <a href='#'>link 3</a>
        <br>
        <br>
            </div>
            
     <div id='GTRSnormal'>GUITAR PRODUCTS
        <br>
        <br> <a href='#'>link 4</a>
        <br> <a href='#'>link 5</a>
        <br> <a href='#'>link 6</a>
        <br>
        <br>
            </div>
                
      <div id='GTRShidden'>This is the normal DIV, not hidden.
         <br>
         <br> <a href='#'>link 4</a>
         <br> <a href='#'>link 5</a>
         <br> <a href='#'>link 6</a>
         <br>
         <br>
            </div>

JS

CODE

function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
}

If you'd be so kind to show me the CSS for this, that would be awesome, and if it's possible to code the button to change its name and have it reference an image instead of text as I'm testing (copying stuff from the web to see if I can get it work )...

I know I've closed the div in the wrong place as it shows red (error). i don't know where to close it or even if its right what I've wrote for the id tagging and function.

[AshleySmith]

Still testing in jsfiddle, sorry... just looking to see what it looks like and works as I'm away from main comp on a laptop without DreamWeaver atm.

Most browsers support JS off the bat right, no need for extension install? Do people really still use IE over Safari, Firefox and Chrome?

[AshleySmith]

Tried to do it this way too using class id's and both CSS and JS, but can't figure it out. Testing this (as in vid) via jsfiddle doesn't work, and I copied the code exactly as written.

https://www.youtube.com/watch?v=degwrcZeGF0

As is now... http://jsfiddle.net/4wsfxft8/8/

This post has been edited by AshleySmith: Jan 16 2015, 02:07 PM

[Christian J]

How do I add an id or class to an image?

The same way that you write your HTML? I'm assuming that you edit HTML code directly in Dreamweaver (or with a proper text editor) instead of using Dreamweaver's graphical (WYSIWYG) mode.

I'm just trying the button workaround to change the smiley face to some text.

CODE

function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
}

If you'd be so kind to show me the CSS for this, that would be awesome, and if it's possible to code the button to change its name and have it reference an image instead of text as I'm testing (copying stuff from the web to see if I can get it work )...

Now my head is spinning.

You can toggle between an image and text, but it's more complicated to do, so I can't suggest anything without knowing what the HTML looks like. Also I advice against using innerHTML, since it will be harder to restore the original content (when the user toggles back), search engines may not be able to index it and users without JS will not see it.

[Christian J]

Most browsers support JS off the bat right, no need for extension install?

Yes, but a few people disable it on purpose, and search engines may not be able to find text generated by JS.

Do people really still use IE over Safari, Firefox and Chrome?

All of them are in use, exact numbers are different for every site. There may even be people using old versions like IE8 still around (the newest IE version that's supported by Windows XP).

BTW, getElementsByClassName() is not supported by IE8.

[AshleySmith]

Ok, lets keep it simple and compatible with all browsers... CSS scripting preferred thus, I guess.

• Let's create a 1 cell table
  
• Create a button called More Info
  
• Give images an id that we'll source using CSS
  
• With CSS, change the name of the button to Close Info, and change the image "onclick"
  
• Clicking Close Info will return 1 back to More Info

I can then append code to add this in, so it's not confusing by what I have already laid out. I think I'm confusing the matter as as I say I don't know coding well, so picking up bits and bobs from yourself and the Internet/Youtube. People have said too to stay clear of innerHTML.

I'd also like to figure out how to structure tables using CSS for ease of writing code rather than filling up HTML, but that's step two

Thank you! V.much!!!

[Christian J]

Ok, lets keep it simple and compatible with all browsers... CSS scripting preferred thus, I guess.

Sometimes it's better to use javascript if older browsers dont' support some CSS. But a web page shouldn't rely on either: https://en.wikipedia.org/wiki/Progressive_enhancement

• Let's create a 1 cell table
  
• Create a button called More Info
  
• Give images an id that we'll source using CSS
  
• With CSS, change the name of the button to Close Info, and change the image "onclick"
  
• Clicking Close Info will return 1 back to More Info

Here's an idea (I used two cells to illustrate the need for different IDs):

CODE

<style type="text/css" media="screen">
.toggle {display: none;}

.toggle:not(:checked) ~ div {display: none;}
.toggle:not(:checked) ~ label {cursor: pointer;}
.toggle:not(:checked) ~ label:before {content: "More ";}

.toggle:checked ~ div {display: block;}
.toggle:checked ~ label {cursor: pointer;}
.toggle:checked ~ label:before {content: "Close ";}
</style>

<table>
<tr>
    <td>
    <input type="checkbox" class="toggle" id="foo">
    <label for="foo">info</label>
    <div>hidden text</div>
    </td>
</tr>
<tr>
    <td>
    <input type="checkbox" class="toggle" id="bar">
    <label for="bar">info</label>
    <div>hidden text</div>
    </td>
</tr>
</table>

The words "More" and "Close" are generated by CSS. Since IE8 doesn't support much of this CSS, it will display the word "info", followed by the hidden text. (Maybe it's better to generate the whole phrase "More info"/"Close info" with CSS, not sure. )

I should add that this use of CSS is a bit experimental. Hopefully other older browsers will act the same as IE8, but I have no way to test. Also I don't know how e.g. smartphone browsers will behave.

[Christian J]

Here's a similar thing written in javascript. Seems to work from IE7, and also looks OK if JS is disabled. Alas it doesn't support keyboard navigation.

CODE

<script type="text/javascript">
function toggle_div(clicked_elem)
{
    if(clicked_elem.className=='hide')
    {
        clicked_elem.className='show';
        clicked_elem.firstChild.nodeValue='Close info';
    }
    else
    {
        clicked_elem.className='hide';
        clicked_elem.firstChild.nodeValue='More info';
    }
}

// add CLASS "js_enabled", which will hide DIVs when page loads if JS is supported
if(window.addEventListener)
{
    window.addEventListener('load', function(){document.body.className+='js_enabled';}, false);
}
else if(window.attachEvent) // IE7 and IE8
{
    window.attachEvent('onload', function(){document.body.className+='js_enabled';});
}
</script>

<style type="text/css" media="screen">
body.js_enabled td.show,
body.js_enabled td.hide {cursor: pointer;}
body.js_enabled td.show div {display: block;}
body.js_enabled td.hide div {display: none;}
</style>
</head
<body>

<table>
<tr>
    <td class="hide" onclick="toggle_div(this);">
    More info
    <div>Hidden content</div>
    </td>
</tr>
<tr>
    <td class="hide" onclick="toggle_div(this);">
    More info
    <div>Hidden content</div>
    </td>
</tr>
</table>

[AshleySmith]

Thanks!

CSS... Can you set input type to be button, and have it change the div above it with an id? I can't get that to work to change the image also. It's just changing the text name and show/hide text in a div placed after in the line of code.

I tried adding this in instead of the last line for content:"Close ", but it didn't work.

CODE

content:content:url(http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png);

The JS version doesn't seem to work here, the "hidden text" is always showing and text not clickable.

[AshleySmith]

HTML

CODE

<table border="1" cellspacing="3" cellpadding="3" width="600" height="200">
        <tr>
            <td align="center"><b>MIDI</b>
            </td>
            <td valign="bottom" align="center">
                <table border="0" cellspacing="3" cellpadding="3" width="150" height="200">
                    <tr>
                        <td valign="bottom" align="center">
                            <div>
                                <img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" valign="middle" align="centre"></img>
                            </div>
                            <br/>
                            <br/><b>GM Extended MIDI</b>
                            <br>
                            <br>
                            <input type="checkbox" value="More Info" class="toggle" id="info">
                            <label for="info">Info</label>
                            <br/>
                            <br/>
                            <table border="1" cellpadding="3" width="150">
                                <tr>
                                    <td valign="middle" align="center">PayPal</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <img src="http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png" alt="Lifted Shadow" width="200" valign="center" align="center">

CSS

CODE

.toggle {
    display: none;
}
.toggle:not(:checked) ~ div {
    display: none;
}
.toggle:not(:checked) ~ label {
    cursor: pointer;
}
.toggle:not(:checked) ~ label:before {
    content:"More ";
}
.toggle:checked ~ div {
    display: block;
}
.toggle:checked ~ label {
    cursor: pointer;
}
.toggle:checked ~ label:before {
    content:content:url(http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png);
}

So I'm wanting it to change two things, name and image placed in the div tag.

This post has been edited by AshleySmith: Jan 16 2015, 06:39 PM