PDA

View Full Version : Changing Tabbed Content from horizontal to vertical



Porthiir
Dec 5th, 2014, 11:27 PM
I want to create a page that will have 133 tabs. Obviously a horizontal layout would cause the tabs to wrap, so I want to make it a vertical tab list.

I am using tabcontent.js & tabcontent.css (can't remember where I got the original code from), but HERE (http://diyclan.com/clan_xp.html) is a page I created using the horizontal tabs. I'm not sure if I need to edit the JS or the CSS file to change layout of the tabs.

If you could tell me which file to edit & what code to add (or change), it would be greatly appreciated.

jmrker
Dec 6th, 2014, 04:02 AM
Would you consider this approach?



<!doctype html>
<html>
<head>
<style>
/* hide all pages */
section { display: none; }

/* show active page */
body.page1 #page1,
body.page2 #page2,
body.page3 #page3 { display: block; }

#tabPages { border:1px solid blue; width:600px; height:400px; float:left; }
#tabMenu { margin:0; padding:0; float:left; width:5%; }
#tabMenu button { font-size:1.2em; font-weight:bold; }

</style>
</head>
<body>

<div>
<div id="tabMenu">
<button value="page1" onclick="return nav(this.value)">2013</button><br>
<button value="page2" onclick="return nav(this.value)">2014</button><br>
<button value="page3" onclick="return nav(this.value)">2015</button><br>
</div>

<div id="tabPages">
<section id="page1"> <h1>Data for 2013</h1> </section>
<section id="page2"> <h1>Data for 2014</h1> </section>
<section id="page3"> <h1>Next year to be available soon</h1> </section>
</div>
<br style="clear:both">
</div>

<script>
// Modified from: http://www.codingforums.com/javascript-programming/326002-html5-game-questions.html
// Modified again for: http://codingforums.com/newreply.php?do=postreply&t=332622

function nav(page){
localStorage.page=page; //save
document.body.className=page; //render
var btns = document.getElementById('tabMenu').getElementsByTagName('button');
for (var i=0; i<btns.length; i++) {
btns[i].style.backgroundColor = '#ffffff';
if (btns[i].value == page) { btns[i].style.backgroundColor = '#ffff00'; }
}
return false;
}

window.onload = function() {
document.body.className=localStorage.page || "page1"; //load, defaulting to "page1" if empty
nav(document.body.className);
}

</script>
</body>
</html>

Porthiir
Dec 6th, 2014, 06:17 AM
Thank you for your reply. Actually, since I wasn't getting any replies I ended up switching to using jquery-ui (as it already had both the horizontal & vertical tabs coded).

However, I do have 1 further question for you. In the script section there is a line 'localStorage.page...', I was told that I could use localStorage on another page to remember checkboxes & radio button states (which ones the were selected & which weren't). I originally posted this question Here (http://codingforums.com/html-css/332309-remembering-checkboxes-radio-buttons.html) but never got a response beyond a suggestion to build a database. This would be impossible for me to do as the site I am creating these pages for has over 8 million different pet IDs (and more being created daily). Each user has upwards of 1,000 pets, some I've seen as many as 10,000 pets.

jmrker
Dec 6th, 2014, 05:09 PM
Thank you for your reply. Actually, since I wasn't getting any replies I ended up switching to using jquery-ui (as it already had both the horizontal & vertical tabs coded).

However, I do have 1 further question for you. In the script section there is a line 'localStorage.page...', I was told that I could use localStorage on another page to remember checkboxes & radio button states (which ones the were selected & which weren't). I originally posted this question Here (http://codingforums.com/html-css/332309-remembering-checkboxes-radio-buttons.html) but never got a response beyond a suggestion to build a database. This would be impossible for me to do as the site I am creating these pages for has over 8 million different pet IDs (and more being created daily). Each user has upwards of 1,000 pets, some I've seen as many as 10,000 pets.

I believe cookies are limited to about 4K of storage and the local storage is supposed to hold up to 5M
but I don't know if this varies with browsers. Something to look into before you get too deep into the project
with the number of entries (over 8M) you are expecting to be listed.

Another note, either storage method is for the user on one computer/browser.
The information stored/displayed is for that ONE user only. The information is NOT shared
with other users of the page you create. Since I'm not sure what the purpose of the
table display you have on the other thread, this is just a limitation of JS you should be aware of.

Finally, where is the information coming from for the table listed in your other thread?
If it is being generated by a database, then this would be the best place to maintain
the check box and radio button information for each of the pet entries.
If you really have 8M entries, you might consider some other method than a single table
(perhaps alphabetical sections of tables) for the display. I can imagine that creating or changing
the display would take an inordinate about of time.

Bottom line: The lack of answers to your questions may be because of the limited amount of
information that you have provided. I'm not even sure what I have provided will be of help
to your project and/or if JS is the optimal language to use for it. Have you considered mySql or PHP?

Porthiir
Dec 6th, 2014, 10:08 PM
I believe cookies are limited to about 4K of storage and the local storage is supposed to hold up to 5M
but I don't know if this varies with browsers. Something to look into before you get too deep into the project
with the number of entries (over 8M) you are expecting to be listed.The 8M figure I stated was for the amount of Unique Pet IDs for the entire site, not for the individual pages.


Another note, either storage method is for the user on one computer/browser.
The information stored/displayed is for that ONE user only. The information is NOT shared
with other users of the page you create. Since I'm not sure what the purpose of the
table display you have on the other thread, this is just a limitation of JS you should be aware of.This is not a problem, as each user's 'Lair' contains the Unique Pet IDs assigned only to their pets. And I would be creating a separate page for each user, listing only their pets.


Finally, where is the information coming from for the table listed in your other thread?
If it is being generated by a database, then this would be the best place to maintain
the check box and radio button information for each of the pet entries.
If you really have 8M entries, you might consider some other method than a single table
(perhaps alphabetical sections of tables) for the display. I can imagine that creating or changing
the display would take an inordinate about of time.
Here is the information as posted in my other post:

This is a table created from a bulleted list (created by a js bookmarklet) of all 'pets' contained in a person's 'lair'. I use a very simple search & replace to convert it from the list to a table. To create a database would be to greatly increase the amount of time it would take me to do each one (as I will be offering my services to other members of the site).

Essentially, the table is a way for people to sort their lair. The checkboxes allows them to remember which pets have been sorted & the radio buttons will tell them where they were sorted into. That is why I need to keep it as a simple table & also why I need a way for the selected buttons & boxes to be remembered.


Bottom line: The lack of answers to your questions may be because of the limited amount of
information that you have provided. I'm not even sure what I have provided will be of help
to your project and/or if JS is the optimal language to use for it. Have you considered mySql or PHP?I am sure I have posted everything that is pertinent, the only reason I even mentioned the 8M IDs was to show that creating a database in order to create pages for maybe 5 to 10 different users would be a colossal waste of time for me.

Old Pedant
Dec 7th, 2014, 01:33 AM
8 million records is a drop in the bucket. If you said 8 BILLION then you might have problems unless you had a fairly big server.

But 8 million? Trivial. A tiny database, really.

The advantages of using a database are
(a) it would work for your users even when they look at their pets from different machines (computer? ipad? phone?) *AND* different browsers (Chrome? Safari?)
(b) If their computer crashed, the data would be saved in your DB.
(c) I dunno if it matters, but it means that you could create web pages where John could see Anne's pets and vice versa. So pet-sharing, much like photo sharing.

Personally, I'd think that the database advantages far far outweigh the imagined and likely unreal disadvantages.

Porthiir
Dec 7th, 2014, 02:14 AM
Perhaps one day I would look into actually creating a database of my own (as the site we play on already has it's own - I just don't have access to it), as an online database would be much easier for people to be able to edit the state of their pets. But for now as I said, I am creating these tables from a bulleted list that is created when the user (whomever wants me to create a table) clicks on the JS Bookmarklet. They then send me the list & I convert it over to the table. Once I have the table created, they are then able to use the table to more easily sort their Lair (by referencing the table). This is why I need a script that will save (on the individual user's computer) the state of each checkbox & radio button.

The page I created for myself from my lair is Here (http://diyclan.com/porthiir/lair/mylair.html), the way it is now I have to keep the page open & cannot refresh or update it without losing track of whatever I have already sorted.

It was suggested to me on another forum to use localStorage, but as of yet I have not received any response as to how to implement it onto the page in question.

Just as a reference point, I am still in the process of learning JS, CSS, etc... as it has been years since I actually did this for a living (going on 10+ years now).