Table Navigation Section Discussion (Re-Opened)

Wow, great responses! :metal:
Happy new year, happy holidays, and all those chestnuts. :chestnut:

It’s taken a while until I have been ready to respond after I spent some time with this prototype. I’m definitely leveling up a lot as I learn. Sorry for the delay. I’m working on other things but trying to stay in motion on this website business. It looks like the previous thread was closed due to inactivity.

Upon implementing this latest code, I’m seeing the JS manipulate the nav buttons, but I haven’t correctly gotten the tables to switch. I have some results from the JS validator, but I don’t think the code I have is invalid like my software says. Anyway, this post will be dedicated to the HTML/CSS as the JS will be more intricate as my ideas gestate. I will likely need to post in the JS section shortly when the CSS reaches a checkpoint.

  • Just for the sake of being on the same page, I am going to outline the classes and ID’s and how I currently have the markup and styles structured (until advised otherwise): #btns-and-tables is a div containing both the buttons and the document tables. #toggle-all-tables was previously #expandhide. Here is the current markup structure:
        <!-- BEGIN TABLE NAVIGATION SECTION -->
        <section id="tablenav">
            <h3 data="click-info">Click to show a table:</h3>
            <div id="btns-and-tables"><!-- #btns-and-tables container -->
                <a href="#privateBanking" class="btn btn-nav">Private Banking</a>           
                <a href="#sovereignty" class="btn btn-nav">Sovereignty</a>
                <a href="#discharge" class="btn btn-nav">Debt Discharge</a>
                <a href="#defense" class="btn btn-nav">Civil &amp; Criminal Defense</a>                
                <a href="#forms" class="btn btn-nav">Forms</a>
                <a href="#adminProcesses" class="btn btn-nav">Administrative Processes</a>
                <a href="#notaryPresentments" class="btn btn-nav">Notary Presentments</a>
                <hr id="btndivider">
                <div id="toggle-all-tables">
                    <button class="btn expand hide-all" data-toggle="hideTables">Hide All Tables</button>
                    <button class="btn expand show-all" data-toggle="expandTables">Show Me Everything!</button>
                </div><!-- #toggle-all-tables -->
                <!-- END OF TABLE NAVIGATION BUTTONS -->
    
                <!-- BEGIN TABLE PORTION OF PAGE -->       

The second div that was serving as a container, #tablenavbuttons, was taken out, leaving the remaining section, #tablenav, as the main container.

  • I designed a graphic for the hr elements, the bottom corners of the active table, and for another potential hr element between the table navigation section and/or tables and the .back div navigation links at the bottom of the page.


    The first divider is for the hr element within #tablenav. Its dimensions are 673 x 22 px and begins near the origin. The second cornerpieces are for and experiment with ornamental cornerpieces for the active table(s). The dimensions are 223 x 89 px and originates at coordinates 206, 32. The third divider is 279 x 9 px and begins at coordinates 179, 133. This is just a test as these look a little bit small at first glance. I thought it was best to combine the 3 graphics into one file to minimize HTTP requests, only showing portions of the image using CSS.

  • I still do want the buttons to change to inline block display and away from the flex grid at a very wide width (at 65 em). I see that the order property is used to re-arrange the order of the flex grid items (which includes the tables themselves) as the width changes.
    To be honest, I’m so enamored with the single-layered buttons in block display (I think that’s correct.) with the tables appearing neatly beneath each button (turning a velvet red upon click as they do) that I might have scrapped this flex grid design, but I still love the flex grid for large devices in which the tables roll out beneath the button section. The design is broken from around 60 em and thinner as I left off coding there. Needed to try to plan with you more for fluid units that minimizes the code.

  • Yes, I did upload new files to the live server that breaks the page temporarily for the sake of development (I guess I need another dummy domain to test stuff, but I don’t have one yet. Maybe I need to set up my own CodePen.). My audience has been given notice of the goings-on with a message inside of the message box at the top of the page, and I think many of them are probably happy to see me progressing. Whatever. I’m doing my best.

  • I think the targets on the table styles are convoluted and anxiety-inducing. Look at this code:

/** document tables **/
section table, #tablenav table {
    width:90%;
    border-collapse:collapse;
	border:0.15em solid #000;
}
section table:first-of-type {  margin:36px auto; }    /* use the margin value to adjust space between the top and the table */
#tablenav table {display:none; }
section thead tr:first-of-type, #tablenav thead tr:first-of-type { 
	font-family:"Arial", serif;
	border-bottom:0.05em dashed #000;
}
section thead tr:first-of-type {
	text-shadow:1px 1px 4px #fcd8a9;
	font-size:2.25em;
}
#btns-and-tables thead tr:first-of-type {
	font-size:1.1em;
	border-top:none;
}
section thead tr:last-of-type, #btns-and-tables thead tr:last-of-type { font-size:1.2em; border-bottom:0.05em solid #000; }
section thead th, #btns-and-tables thead th { padding:6px 0; }
section thead th span:last-of-type, #btns-and-tables thead th span:last-of-type { display:none; }
section thead tr:last-of-type th, #btns-and-tables thead tr:last-of-type th { border-left:1px dotted #000; }
section tbody tr, #tablenav tbody tr {
	height:50px;
	border-bottom:1px dotted #000;
}
section table td, #btns-and-tables table td { width: 450px; } /* setting the width for the document name column */
section table tbody td + td, #btns-and-tables table tbody td + td { /* styling the date modified column */
	width:60px;
	padding:0;
	font-size:1.2em;
}
section table tbody tr td, #btns-and-tables table tbody tr td { border-right:1px dotted #000; }
section tbody tr td:first-of-type, #btns-and-tables tbody tr td:first-of-type { 
	padding:5px 0;
	font-family:"Courier", serif;
	font-size:1.2425em;
}
section tbody tr td:last-of-type, #btns-and-tables tbody tr td:last-of-type { width:70px; padding:0 0.2em; font-size:1.2425em; } /* styling the download column */
section table a, #btns-and-tables table a {
	font-size:0.95em;
	margin-bottom:2px;
}
section tbody tr td:last-of-type a + a , #btns-and-tables tbody tr td:last-of-type a + a {
    display:none;
}
  • The #farewell div images above look terrible at narrow widths, too (as you see the space between the h4 and the #autograph image). They look jumbled and misaligned beginning around 58 em. I’m trying to resolve it myself to keep the autograph generally at the same vertical position as the flag to its left, but I’m wondering if the previous thread is still open (It’s not.). I could switch to use a single image, but I actually like the separate alt tags and think it’s better for accessibility.

-ty

Yes, some of that code is nonsense or redundant now that things have changed.:slight_smile:

For example you have this html.

      <section id="tablenav">
        <h3 data="click-info">Click to show a table:</h3>
        <div id="btns-and-tables">

Then you have this css:

section table, #tablenav table {
    width:90%;
    border-collapse:collapse;
	border:0.15em solid #000;
}

In your structure the rule (section table) is targeting the same element as ( #tablenav table) because the section has an id of tablenav. Therefore you have duplicated the rule for no reason but you have also created a logic error that may well trip up any other tables in your site because this rule (section table) is not specific and will target any table within a section anywhere it sees one.

You only need :

#tablenav table {
    width:90%;
    border-collapse:collapse;
    border:0.15em solid #000
}

You have made the same mistake all the way through that section and sometimes you use both and sometimes one or the other. There is no consistency and id rules will win out anyway so make sure the logic is always the same.

There is no js where you have pointed the link.

<script src="Scripts/tableSwitcher.js"></script>

If you are using mine or Russel’s code you will need to match all the details correctly including the ids and classes used and of course the css that goes with it and the js for the head section (which you can find in the codepen settings in Russell’s example).

Note that as you are using ids for styling tables you need to include an id of #tablenav in here.


    .hasJs #tablenav .tab {
      display: none;
    }

    .hasJs #tablenav .active {
      display: table;
    }

Like this:.


    /* hide and show tables only if javascript is present */
    #tablenav .btn,
    #tablenav h3.click-info {
      display: none;
    }

    .hasJs #tablenav .btn,
    .hasJs #tablenav h3.click-info {
      display: block;
    }

    .hasJs #tablenav .tab {
      display: none;
    }

    .hasJs #tablenav .active {
      display: table;
    }

I’ve fixed that perfectly for you a number of times now so I will leave you to sort that out as you have now added an h4 in there that throws everything out. There is no natural alignment now and you will need to decide how it should look. The easiest solution would be to make the h4 display:none at smaller screen sizes but that whole section looks awkward to me now (and an h4 is not suitable for that one word as its not really a heading but is more a semantic issue than a layout issue).

I suggest you look at the minimal code and css that Russell and I used to make those tables display across all resolutions as you keep adding in fixed widths which break responsiveness. Tables are very good at being responsive if you leave them alone and let them do their job. Of course you need to style them and help them a bit but don’t keep forcing the issue with fixed widths.

It would be better if you did as we could then fork the code to fix the mistakes more easily.:slight_smile:

At the moment I don’t see your new images but don’t fall into the trap of setting fixed heights and widths if they are supposed to be responsive. You need to make sure that they fit on a responsive table without compromising the fluidity.

You have once again used fixed widths so that everything breaks again. In your 65em max-width media query you need to change the widths to something like this:

 #btns-and-tables a {
        font-size: 2em;
        /*width: 650px; removed*/
        width: 80%;/* added */
        max-width: 650px;/* added */
        margin: 5px auto 1.7rem;
      }

      #toggle-all-tables {
        /*width: 730px; removed*/
        max-width: 730px;/* added */
      }

      #toggle-all-tables button {
        font-size: 1.3em;
        padding: 5px 9px;
        width:auto;/* added */
      }

Very, very, very roughly like this:

That whole table needs to be re-coded as it is micro-managed much to much with too many fixed sizes and tweaks with too many media queries. You need to find a happy medium.

2 Likes

:tada: THE BASIC SELECTION FOR BIG DEVICES IS NOW WORKING.
HOORAY!
:100:
(in its earlier stages, of course)
The slim to narrow version doesn’t work yet. The order doesn’t switch properly because of the containers being closed.

Yes, sir. You have answered equitably and thoroughly in your instruction. And thanks for letting me struggle with this on my own a bit, too. It’s good for my knowledge. I am attentive to the study, and I am improving! :man_student: This isn’t my only web project - just the most important one.

Okay, I signed up for the CodePen account. Templates Page CodePen It’s hard to work in there without a Pro account. Soon, I’ll get the support I need to start being able to get these things. I really do think this project could become more successful. There are a couple of books around here that I want and need for this skillset. :open_book:

I’m also interested in translating the CSS into a SCSS version as well (if for nothing else than to have the code files in them stored in the other format). Neat-o.

Yes, sir. I’m glad that I’m trying things on my own, and I came up with a bunch of ideas on my own as I have the task of defining the vision, color matching, themeing, etc.

I really want to stick to what I have and try to come up with some more complex JavaScript to match what I have.

Still, it’s working in a basic way, and I’m charrrrged up! :zap: :zap:
This is really coming along well, but there’s a long way to go.

Fixed.

#farewell div images subject—
I should have reviewed your advisory on the images in the above farewell div p prior to this post. Pardon me for moving too quickly. I have reverted the h4 element now to a p element according to your previous instruction as it is, indeed, not really a heading.

I tested it on a phone, and the #farewell portion just looks disheveled on them.

At full width, it is acceptable save for a padding or margin adjustment on the signature image. For now, I just changed the max-width to 100% in the media queries (which makes the signature disappear at low widths… but I want my picture to remain discernible and large while we’re working on it).

What I want now for these images in the #farewell div is: my picture to break the flex display at some middle width in the media queries and display beneath the two other images to its left as the page gets narrow:
-----f–a—
------p-----
f = flag, a = autograph, p = my picture

Hopefully, a change to this structure will prove effective - at least, I long for the “jump” of space to go away between the p element in #farewell and the signature image. Again, there is a lot of excess code cleanup to be done.

This is how it looks now at lower widths:

I even have another trick up my sleeve that’s buried in the code already (just commented out for now) for another creative vanity I added within this lovely message box for the audience and all the things I can do with it… and my little monkey pIcTuRe area. :monkey:

Sorry.

I could even put a short video in a frame in the #boxheader at some point, too…
—end of farewell div images subject—

—table layout subject—
Yeah, the styles are getting cut down for simplicity.

I thought exactly to remove the table style targets and to adjust them according to your prescription, removing both of the extraneous and duplicate targets. It is improving.

This is how the table styles are now:

/** document tables **/
#tablenav table {
    width:93%;
    border-collapse:collapse;
	border:0.15em solid #000;
	display:none;
	margin:3rem auto;
	background:url("images/layout/templates/bglight.jpg") repeat;
}
#tablenav table td,
#tablenav table th {
	border:0.35rem double #737373;
}
#tablenav table thead tr:first-of-type { 
	font-family:"Arial", serif;
	border-bottom:0.05em dashed #000;
}
#tablenav table thead tr:first-of-type {
	text-shadow:1px 1px 4px #fcd8a9;
	font-size:2.5rem;
}
#tablenav table thead tr:last-of-type {
	font-size:1.05rem;
	border-bottom:0.05rem solid #000;
}
#tablenav table thead th { padding:6px 0; }
#tablenav table thead th span:last-of-type { display:none; }
#tablenav table thead tr:last-of-type th { border-left:1px dotted #000; }
#tablenav table tbody tr {
	height:50px;
	border-bottom:0.08rem dotted #000;
}
#tablenav table td { width: 450px; } /* setting the width for the document name column */
#tablenav table tbody td + td { /* styling the date modified column */
	width:60px;
	padding:0;
	font-size:1.1rem;
}
#tablenav table tbody tr td { border-right:1px dotted #000; }
#tablenav tbody tr td:first-of-type { 
	padding:5px 0;
	font-family:"Courier", serif;
	font-size:1.14rem;
}
#tablenav table tbody tr td:last-of-type { /* styling the download column */
	width:7rem;
	padding:0 0.15rem;
	font-size:1.15rem;
}
#tablenav table a { /* targeting the download links */
	margin:0.18rem 0.1rem;
	padding:0.25rem 0.75rem;
	border:0.15rem inset #000;
	font-size:1.15rem;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	/* gradient */
	background:#0b4bf4; /* flat background for old browsers */
	background:linear-gradient(to bottom,  #3e71f7 0%, #1e4afb 100%);
}
#tablenav table a:hover, #tablenav table a:focus {
	color:#FF0;
	background:linear-gradient(to bottom,  #1e4afb 0%, #2ca5fe 100%);
	text-shadow:0.1rem 0.1rem 0.3rem #ff8000;
	box-shadow:0 0.05rem 0.9rem #2ca5fe;
}
#tablenav table a:visited { background:linear-gradient(to bottom,  #924de6 0%, #481a9 100%); }
#tablenav table tbody tr td:last-of-type a + a { /* hiding the second download link for big devices */
    display:none;
}
/* end document tables */

ending at templatesection.css, line 464

I know there are some convoluted rules in there that mess up the outer table border from the double value that I supplied.
—end of table layout subject—

—general H.T.M.L. / C.S.S. theory subject—
I really need classes and ID’s to be named well. It helps me grasp at elements I’m applying rules to.

The excess code in the media queries is slowly being eliminated. This is a process for me. I’m getting to it…

I’m exchanging units in em and pixels to rem and percentages, trying to use pixels for smaller stuff (like 1 to 3 px). Hope that sounds good.

I really know what I want out of this and what I want this to look like, and this is really looking fantastic.
—end general C.S.S. theory—

—javascript crossover topic—
When we get the tables appearing under the narrow version when the media query switches things with the order property correctly, I will mark the solution to this post. Your post #2 is a dinger (as they always are).

Obviously, the order property cannot work now with the structure as it is since I have dedicated borders and closed the tags on #btns-container instead of all the way at the end of the document, so I’ll have to come up with a new J.S. function, highlightChanger(), to make the table markup get clipped out and placed within #btns-container.

I shall make a JavaScript thread as the sequencing of the user experience will change. For example, after the user clicks one of the #btns-container links, the box-shadow will go away. They only glow at first to get the user to interact with it.

Is it possible to manipulate the elements with JS by ID, too? Or why should it always just be by class?
—end javascript crossover topic—

—image roll—
full width (lookin’ good!):


-need new starter class for .hide-all instead of .active because the hide all button is glowing by default

the switcheroo at 67.5 em:

incongruent sizes on buttons at narrow widths:


-I’ll tend to the width and sizes of #toggle-all-tables, too.
—end image roll—

Hey, thanks, all, for your invaluable support. You guys are genius!
We’re really making some magic happen… :magic_wand::rabbit::tophat:
Prepare for another spammer to pop in. They always do. :laughing: :clown_face: :poop:

:deciduous_tree: :hibiscus:

I just slayed a round of junk in the media queries especially all the excess table styles and confusing nonsense.

I’ve got a bunch of comments around many still questionable lines.

I updated the CodePen.

Random notes:

  • There is a search form beginning below #toggle-all-tables. Might need to move it, though.

  • There is a text stroke applied to h1, but it looks terrible in certain browsers. The text-shadow method looked bad for the h1, too.

  • The background image for hr, #btn-divider, doesn’t hide / cut off from the center. It closes in on itself from the right side.

  • I want to design an endpiece for the leather belt design to sit on either side. They will go into the same file, sectiondividers.png.

  • Haven’t yet changed the width and font size of the #toggle-all-tables at smaller widths.

  • #btns-container links font is large at low widths. Maybe I should try a percentage value for the font size.

Looking forward to studying more JavaScript to see how complex I can make this.

I notice #table-selection, the div just outside of #tablenav, isn’t really being used.

Is it possible to just nest another div inside #tablenav that will not be closed so the order property can be used to get the table markup underneath the #btns-container ones?

Maybe these targets could be changed to #tablenav or #table-selection with different values for the order property…

@media screen and (max-width:65em) {
	/* can't use this anymore */
    #btns-container .btn-nav:nth-child(1) {
        order:1;
    }
    #btns-container .btn-nav:nth-child(2) {
        order:3;
    }
    #btns-container .btn-nav:nth-child(3) {
        order:5;
    }
    #btns-container .btn-nav:nth-child(4) {
        order:7;
    }
    #btns-container .btn-nav:nth-child(5) {
        order:9;
    }
    #btns-container .btn-nav:nth-child(6) {
        order:11;
    }
    #btns-container .btn-nav:nth-child(7) {
        order:13;
    }

    #btns-container table:nth-of-type(1) {
        order:2;
    }
    #btns-container table:nth-of-type(2) {
        order:4;
    }
    #btns-container table:nth-of-type(3) {
        order:6;
    }
	#btns-container table:nth-of-type(4) {
        order:8;
    }
    #btns-container table:nth-of-type(5) {
        order:10;
    }
	#btns-container table:nth-of-type(6) {
        order:12;
    }
    #btns-container table:nth-of-type(7) {
        order:14;
    }
    #toggle-all-tables {
        order:15;
    }
}

Using JS, I want to change the first table headers to this text for narrow versions:
“Click red button to close.”
[#btns-container a] will be the title text for the table.