The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

4 Pages V « < 2 3 4  
Reply to this topicStart new topic
> How to change table contents with Div ID?, Stuck with coding, help appreciated
AshleySmith
post Feb 22 2015, 01:11 PM
Post #61


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



Getting the hang of it... smile.gif

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

Can I somehow make the table size static so it doesn't change when I click the button? I note it shifts due to the character length of the button name.

Can I add more padding between the two products? It seems they're pretty tight together.

This post has been edited by AshleySmith: Feb 22 2015, 01:27 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 22 2015, 03:22 PM
Post #62


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(AshleySmith @ Feb 22 2015, 06:01 PM) *

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.

In the last script version above you can use pretty much any HTML you want, as long as the associated "product_description" and "display_description" containers are kept inside their common "product_category" parent container. The older script versions are much more limited.

QUOTE
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... tongue.gif

Is it the Windows security lockdown? That can be disabled.

QUOTE
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?

You can put several tables inside each "product_category" DIV if you want to. The "product_description" and "display_description" DIVs don't have to be adjacent.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 22 2015, 03:27 PM
Post #63


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(AshleySmith @ Feb 22 2015, 07:11 PM) *

Getting the hang of it... smile.gif

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

Can I somehow make the table size static so it doesn't change when I click the button? I note it shifts due to the character length of the button name.

Without looking at the codepen example, you could make the buttons or tables a little wider.

QUOTE
Can I add more padding between the two products? It seems they're pretty tight together.

I suppose so.

Perhaps you'll get more replies if you start a new thread about pure layout questions in e.g. the CSS forum. Many readers may not read this whole thread since it's mostly about javascript...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AshleySmith
post Feb 22 2015, 05:19 PM
Post #64


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



Thanks! So as long as they're in the container I'm ok to move about.

I'll jump on the CSS board and post what we've done. I'm on OS X but the script call 'src' in the head tag doesn't seem to work. Tried styling table bigger but it still shifts all the cell sizes. Perhaps making the button bigger will work, not sure, it currently scales to the text length also, so I guess not.

smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AshleySmith
post May 25 2015, 03:38 AM
Post #65


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



Hi Christian,

With ref to notes in the CSS thread I posted, am I using wrong HTML markup for the containers, or some older scripts for use and the the menu toggle? I don't completely understand as I thought I had followed that writ here up to press to then jump on another thread for CSS styling info...

Thanks in advance for the heads up, hope to get this sorted as I'm thinking ahead now for if I need to utilise some form based PHP or JS things for user registration and serial number authorisation/activation for registered products, and a downloads page for each user. That's probably the most major step bar porting over my shopping cart "Payloom" from previous site for this MAJOR UPGRADE!

Again, really appreciate the support, web design clearly isn't my bag... I'm a sound engineer working in the music industry and trying to advance business with products for sale.

Best smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sam A
post May 25 2015, 06:36 AM
Post #66


Novice
**

Group: Members
Posts: 26
Joined: 22-April 15
Member No.: 22,515



You have to maintain your div ID so you can easily manage your table contents. because of through the DIV ID you can easily access the content of table.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AshleySmith
post May 26 2015, 02:16 AM
Post #67


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



QUOTE(Sam A @ May 25 2015, 12:36 PM) *

You have to maintain your div ID so you can easily manage your table contents. because of through the DIV ID you can easily access the content of table.


Have I not done this by maintaining the DIV Class ID's of product_category and product_description, and having the tables with class ID also for CSS design? ... referencing the last codepen posted above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AshleySmith
post Jun 8 2015, 06:17 AM
Post #68


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



Anyone able to comment what I've done wrong? Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 8 2015, 10:39 AM
Post #69


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(AshleySmith @ May 26 2015, 12:16 AM) *
QUOTE(Sam A @ May 25 2015, 12:36 PM) *
You have to maintain your div ID so you can easily manage your table contents. because of through the DIV ID you can easily access the content of table.
Have I not done this by maintaining the DIV Class ID's of product_category and product_description, and having the tables with class ID also for CSS design? ... referencing the last codepen posted above.
No, you've used the CLASS attribute, not the ID attribute. They are different.

The CLASS attribute can apply to multiple things, like

<person name="George Washington" class="President_of_USA">...</person>
<person name="John Adams" class="President_of_USA">...</person>
<person name="Thomas Jefferson" class="President_of_USA">...</person>
...

The ID attribute must be unique (within a single document), and can apply to only one thing, like

<person name="Benjamin Franklin" id="Inventor_of_Bifocals">...</person>
<person name="Thomas Edison" id="Inventor_of_Phonograph">...</person>
<person name="Samuel Morse" id="Inventor_of_Telegraph">...</person>
...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AshleySmith
post Jun 16 2015, 11:11 AM
Post #70


Member
***

Group: Members
Posts: 62
Joined: 15-January 15
Member No.: 22,036



Sorry for belated reply, I'm not receiving e-mails on this thread though I'd checked the box. Hope that site bug gets fixed.

Thanks Darin, I understand the differences, but not sure where the code falls apart as I've followed. Thanks in advance of pointing me correct...

Regards
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

4 Pages V « < 2 3 4
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:14 AM