A couple questions about Bootstrap

Question

This is the follow-up to this question, where I learned about Bootstrap to achieve this kind of a thing, and now I have a couple questions left:

1. What exactly do the three lines of code here (see bottom of post for the lines) do, and why does not having any of them make the tabs not work properly?

2. I tried this with tabs containing tables for two-column formating, and the second tab appeared way below the tab choices, as if the first tab was left occupying space but invisible, so I had to add style="margin-top: -600px"> to the code for the second tab's <div> and then a <br> to its start, and now it comes out almost in the same place as the other tab; is this normal or does that sound weird? Code at the bottom (without the contents of the table columns), the output is not published because it is not time to post that yet.

Lines of code from Q1:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Code from Q2:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane fade" style="margin-top: -600px">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

score 1 · Answer 1 · answered Dec 21 '17 at 23:05

Q2: I removed margin-top:-600px; and it seems to be working fine.

<div style="text-align: justify">
  [Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
  <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
  <br>
  <table>
<tbody>
  <tr>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 1 of tab 1]
      </div>
    </td>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 1]
      </div>
    </td>
  </tr>
</tbody>
  </table>
</div>
<div id="Cspoiler" class="tab-pane fade">
  <br>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="column" style="padding-left: 80px">
            [Contents of col 1 of tab 2]
          </div>
        </td>
        <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 2]
      </div>
    </td>
  </tr>
</tbody>

See jsfiddle: https://jsfiddle.net/4oje5r8h/

The two tabs appear side-by-side, and the content is contained within each respective tab (I changed [Contents of col 2 of tab 2] to [Contents of col 2 of tab 1], I hope that helps!

In the jsfiddle, I see that, when I switch to "Campbell version", the lines seem to move down. To get the lineup as I want it, the -600 should be something like -20, I guess, that is, -<2 or 3 line heights>. — MickG, Dec 21 '17 at 23:08
I saw that too - I wasn't sure what OP was after so I did my best. Thanks! — cjaro, Dec 22 '17 at 17:11
This is the correct "bootstrap" way of using the nav-tabs. No JS needed — StaticBeagle, Dec 27 '17 at 00:16
@StaticBeagle Using JS didn't even occur to me. I try to see if there's built-in functionality with a library or framework before making more work for myself! — cjaro, Dec 28 '17 at 00:54

score 0 · Accepted Answer · edited Jan 09 '18 at 12:16

0

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane tabcontent">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    function openPage(pageName) {
        var i, tabcontent;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        document.getElementById(pageName).style.display = "block";

    }
</script>

So <link rel="stylesheet"... https> is calling the stylesheet which is found in the link. In the script tags are links to the JavaScript. These are all provided by bootstrap and make it easier for you to reference these and design your website by calling them in classes.

edited Jan 09 '18 at 12:16

GrumpyCrouton

8,486
7
32
71

answered Dec 21 '17 at 22:46

Bradley Coupland

81
12

Does that make sense? – Bradley Coupland Dec 21 '17 at 22:47
Yes. Line 1 is the style sheet taking care of the look of the tabs. The two scripts have to do with the "class" attributes, where the classes are defined by the JavaScript scripts. I guess one defines the classes used in the
– MickG Dec 21 '17 at 22:53
I haven't accepted yet because you did not address Q2 and so I'll wait till either you do or someone else addresses both. Oh well scratch that, I actually can't accept just yet :). – MickG Dec 21 '17 at 22:55
I cannot see the issue but am still looking :) – Bradley Coupland Dec 21 '17 at 22:59
Oh I just realized I left that `margin-top` instruction in the code in the post. Should I remove it? – MickG Dec 21 '17 at 23:02
1

Ok so the reason for it being lower in the second tab woudl be to do with
The fade in active is only, as it says "fading it" its hiding it not removing it. so in the next div it is showing below the hidden table.
– Bradley Coupland Dec 21 '17 at 23:05
Is there a way to make it remove the stuff along with fading it out? – MickG Dec 21 '17 at 23:10
@MickG the answer above hasn't changed anything has it? Ill see what i can do – Bradley Coupland Dec 21 '17 at 23:10
I guess it only shows that the -600px was roughly the height of the actual contents of tab 1 and that when those are replaced by a single line that value needs to be taken drastically closer to zero :). – MickG Dec 21 '17 at 23:12
It actually did change something: -600px -> 6px in the jsfiddle, but not in the answer's code :). – MickG Dec 21 '17 at 23:14
Just noticed that wrapping the tab contents in
drastically changes the situation, with only a couple linebreaks' displacement instead of that ~600px thing. Any idea why? EDIT: Nope, it was just the margin-top that was still in the code :). – MickG Dec 21 '17 at 23:21
@MickG See my solution – Bradley Coupland Dec 21 '17 at 23:26
If both of your answers on this page are the same, I suggest deleting one of them. – GrumpyCrouton Jan 09 '18 at 12:20
bro whats wrong with i dont care. Clearly its fine it was 3 weeks ago with no downvotes – Bradley Coupland Jan 09 '18 at 13:12

Bradley Coupland · Answer 3 · 2017-12-22T18:19:37.917

0

Hopefully this helps :)

So is calling the stylesheet which is found in the link. In the script tags are links to the JavaScript. These are all provided by bootstrap and make it easier for you to refrence these and design your website by calling them in classes.

2.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
  </ul>
<div id="Vspoiler" class="tab-pane tabcontent active"><br>
<table><tbody><tr><td><div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 1]
</div></td><td><div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div>

<div id="Cspoiler" class="tab-pane tabcontent"><br>
<table><tbody><tr><td><div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 2]
</div></td><td><div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div></td></tr></tbody></table></div>


<script>
function openPage(pageName) {
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(pageName).style.display = "block";  
}
document.getElementById("defaultOpen").click();
</script>

edited Dec 22 '17 at 18:19

answered Dec 21 '17 at 23:23

Bradley Coupland

81
12

1

Works like a charm. But why post another answer? Which one do I accept now :)? – MickG Dec 21 '17 at 23:28
haha you can accept both... Would you like me to explain it or do you see/understand – Bradley Coupland Dec 21 '17 at 23:29
Maybe I missed a change, but I can only put a green checkmark next to one answer per question AFAIK... – MickG Dec 21 '17 at 23:32
Oh, well i updated my first answer with the full answer :) – Bradley Coupland Dec 21 '17 at 23:32
Anyway right now it's 12:30 AM here so it's bedtime. Tomorrow I will inspect that code. A first look tells me that you wrote a function that I assume takes care of removing the undisplayed content and defined "tabcontent" as a subclass(?) like "fade in (active)" was. How that is done, I'll try to crack tomorrow. – MickG Dec 21 '17 at 23:34
Yes it will only show content under the id="Cspoiler" if it is opened and if Vspoiler is opened it will only show content under the id="Vspoiler". Ok speak tomorrow. – Bradley Coupland Dec 21 '17 at 23:41
If I read it right, it's calculating the total length of all tabcontents and then using a for loop up to that length to hide every tabcontent character by character and then it displays the right one. Correct? – MickG Dec 21 '17 at 23:56
1

Ah sorry i didnt mean to inlude tablinks that was my initial variable but i changed it to tabcontent ill edit that out. The elmnt is called by using "this" – Bradley Coupland Dec 22 '17 at 00:02
Did you mean "I changed it to tabcontent"? As for elmnt, I see it is set to "this" when the function is called, but I don't see it used anywhere in the function's code (besides in the inputs of course). – MickG Dec 22 '17 at 00:04
1

Yeah lol, i edited it. You don't need "this" i didn't even realise myself that you don't actually need it! I used this sort of technique on one of my first websites and i took it from there but you'd be correct it isnt actually necessary. My Apologies. – Bradley Coupland Dec 22 '17 at 00:09
One thing: at the moment, when the post is loaded, all the tabcontent are displayed, and only when a tab is clicked does the hiding get done. How do I make only tab 1 (in this case Vspoiler) appear on loading? – MickG Dec 22 '17 at 17:15
1

Add: document.getElementById("defaultOpen").click(); on the second to last line before and after} amd then write id="defaultOpen" inside your first tag that should work a treat :) – Bradley Coupland Dec 22 '17 at 18:01
You mean between "block" and the closing brace right? Or maybe after the closing brace? Neither seems to work... – MickG Dec 22 '17 at 18:08
Hold on ill update the code onto this answer so you can copy it straight across. Works for me. - Done it now – Bradley Coupland Dec 22 '17 at 18:18
That is what did not work for ma, except 1) I have the – MickG Dec 22 '17 at 18:22
I not sure if that does matter but copy the code i have given you in this answer it should work. – Bradley Coupland Dec 22 '17 at 18:25
Ok so i just tested it. You need the – Bradley Coupland Dec 22 '17 at 18:27
It was dinnertima :). I'll try it in a sec. – MickG Dec 22 '17 at 18:59
And yep it did. Why does having the script up top cause things not to work? – MickG Dec 22 '17 at 19:03
Honestly have no idea. Glad it worked for you though :) – Bradley Coupland Dec 22 '17 at 19:21
Moved the "why" part [over here](https://stackoverflow.com/questions/47946467/moving-a-script-changes-the-result-why). – MickG Dec 22 '17 at 19:36
One last question: supposed I want to do multiple sections with nav-tabs like this. For now, I have found the obvious trick to multiplicate the script and have one function per set of tabs, but that is pretty clumsy IMO (also because I noticed the problem after writing the code and kept forgetting to add at least one 2 to tabcontent(2), openPage(2), defaultOpen(2) :) ). Is there a smarter way around this? – MickG Dec 25 '17 at 23:01
No you dont need to duplicate the – Bradley Coupland Dec 26 '17 at 16:58
Just copy-pasting with a single script has the result that only the last set of tab to appear in the code has its defaultOpen displayed, and clicking on any tab hides all other tabe including those from other sets of tabs. – MickG Dec 26 '17 at 17:01
Sorry. I don't understand. Could you show me your code and your url – Bradley Coupland Dec 26 '17 at 17:03
But let's move this to another questions because the comments here are getting a bit out of hands :). – MickG Dec 26 '17 at 17:03
[Here is the problem](https://stackoverflow.com/questions/47981767/multiple-independent-sets-of-navigation-tabs-without-multiple-scripts-to-take-ca). – MickG Dec 26 '17 at 17:26

A couple questions about Bootstrap

3 Answers3

Linked