i have a working tabs instance here and prepared a jsfiddle (somehow the tabs don't work correctly here, but the link issue is still present):
http://jsfiddle.net/Gyrga/6/
The links in the tab panes don't work anymore and don't go to the URL http://somewhere.com at all.. Why? What did I overlook?
Thanks!
When you use the tabs, you need to do the following (according to the doc)
Home
<!-- etc -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<!-- etc -->
</div>
But in your example, you put the data-toggle="tab" on the .tab-pane which breaks the links inside.
Just remove this attribute and put it on the link which actually toggles the tab. That way you won't even need the JavaScript to activate them.
Working demo (jsfiddle)
Related
I am having trouble getting my mailto link working on this landing page. I have been googling and still have not found an answer why a simple mailto link is not working using Bootstrap.
I am trying to get the "Contact us" link in the top right menu to open a mail window and the "Refer now" link needs to go to an anchor tag lower in the page, code below. Webpage can be viewed at: website code
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">BENEFITS</li>
<li class="active">REQUIREMENTS</li>
<li class="active">CONTACT US</li>
<li><input type="submit" class='contact-button' value="REFER NOW" onclick="window.location.href='mailto:surveyorhr#carf.org'"></li>
<!-- For external page link -->
<!-- <li>External</li> -->
</ul>
</div>
Any help would be appreciated.
It seems strange to use an input type submit button for a mail link – those certainly are not made for mail links – apart from that any submit button would only work in the context of a form, i.e. inside a form element.
I would recommend to use a regular link and style it as a button using CSS.
(BTW: This has nothing to do with Bootstrap)
Currently you have some js running in main.js that is manipulating click events and preventing default browser behavior. If you remove the class "main-nav" from the div that contains your mailto link it begins to function again. Based on that I would revaluate your use cases in that js file.
I have a couple upcoming posts where I have multiple versions of the same poem all translated. I was thinking of giving two buttons to reveal each of them. I thought of implementing this as a double spoiler, but that would mean the poem could also be completely hidden (both spoilers closed) or be shown simultaneously in both versions (both spoilers open), whereas I would like to have one version and one only displayed at all times. Something like Edcel spreadsheets, where you have the buttons at the bottom to switch between sheets but cannot view multiple sheets simultaneously or not view any of the sheets. Can that be done in HTML? And if so, how?
Update
A now-deleted answer suggested Bootstrap Panels. I tried them out, but the following code:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Vulgate version</div>
<div class="panel-body">pefanthi</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Campbell version</div>
<div class="panel-body">Abanthi</div>
</div>
</div>
This is merely a test post to try out "Boostrap Panels". It is not meant to make any sense, but only to be able to click on buttons, which previews do not (or at least, spoilers and links don't work in previews, which is why I'm posting this).
produces this:
Is that the expected output, in which case this is not what I'm after, or is there something wrong with the code?
I cannot think of a website with this kind of thing implemented. What I want to achieve is to have a row of (in this case two) buttons at some point in the page (in this test post the point would be the top, in the actual blog posts it will be after a short introduction which is nothing more than a <div style="text-align: justify"> and a couple <br>s) which, when clicked on, will either change a part of the page below them, or, if I click the already active one, not change it. In particular, in the above code, I want two buttons, with "Vulgate version" on the leftmost one and "Cambpell version" on the other one, so that the former is automatically activated and shows "pefanthi", whereas the latter can be activated by clicking and that means "pefanthi" goes away and is replaced by "Abanthi", and then if I click on "Vulgate version" again I get pefanthi back and Abanthi leaves. Just like happens with tabs from a single window of a browser like Firefox:
So in this comparison, I want a "Vulgate version" tab that shows the "pefanthi" and a "Campbell version" which shows the "Abanthi", while the text about that being a test post stays below whatever is displayed, like that "It looks like you haven't started Firefox in a while […]" text in the picture, but with no X to make it disappear.
Update 2
Just figured out a way to do almost what I want. Here it is:
<button title="Vulgate version" type="button" onclick="if(document.getElementById('Vspoiler') .style.display=='none') {document.getElementById('Vspoiler') .style.display=''; document.getElementById('spoiler') .style.display='none'}">Vulgate version</button>
<button title="Campbell version" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''; document.getElementById('Vspoiler') .style.display='none'}">Campbell version</button>
<div id="Vspoiler" style="display:">pefanthi</div>
<div id="spoiler" style="display:none">Abanthi</div>
This way, if I click on a button and its content is shown, nothing happens, whereas if its content is not shown, it gets shown and the other button's content is hidden. The Vulgate version button has its content shown by default, so it is now impossible to have more or less than one button's contents shown.
There are two problems with this:
If the spoilers are more than two - and one of the posts I'm planning to use this on will have from 3 to 5 - the code gets pretty complex, so I'd like to know if there is a way to make the buttons hide the other buttons' contents when clicked without having to place a display:none for each of the other buttons: can the buttons "talk to each others" the way Firefox tabs to?
Having buttons that seem to do nothing is not good-looking IMO, so is there a way to make the button change look when it's pressed? For example, changing its color to the background color so it becomes almost invisible?
Update 3
Just found out how to change the color of a button:
style="background-color:<insert color>"
in the button tag. Implemented at this page, which is the rendered version of the above code. Now one question remains: how do I make each button change the other button's color, along with its own?
Update 4
This is exactly what I want. Except I tried adapting the code to my needs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#vulg">Vulgate version</a></li>
<li><a data-toggle="tab" href="#C">Campbell version</a></li>
</ul>
<div class="tab-content">
<div id="vulg" class="tab-pane fade in active">
<p>pefanthi.</p>
</div>
<div id="C" class="tab-pane fade">
<p>Abanthi.</p>
</div>
</div>
and the result is this, which is just not right. What am I doing wrong?
Update 5
Just tried copy-pasting the whole part over here, and the result can be seen here, and is not what the page says it should be, so is the page misguided or is there a problem of HTML versions that makes the code work on that page but not on my Blogger blog?
Update 6
Following #crapier' comment, I looked at "BS get started" (what an unfortunate initialism :) ), and found the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I added it to my page, and something happened. The tabs appeared, but they do not work. What is going on? Should I add another one of the code lines here?
Update 7
Apparently it only works when all three of the lines here are added, but why?
Update 8
Moved the matter over to here, so this question merits a closure.
Simple JsFiddle: http://jsfiddle.net/p5sZJ/17/
<ul id="mainTab" class="nav nav-tabs">
<li>First</li>
<li>Second</li>
</ul>
<div id="mainTabContent" class="tab-content">
<div id="first" class="tab-pane">
</div>
<div id="second" class="tab-pane">
<div id="second-accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#second-body">
Heading
</a>
</div>
<div id="second-body" class="accordion-body collapse">
Content
</div>
</div>
</div>
</div>
</div>
Preconditions:
1. Make sure the first tab is active.
2. Make sure accordion on the second tab is collapsed.
Steps to reproduce:
1.Click navigate to the second tab and then click on the heading of the accordion immediately.
2.Try expanding/collapsing the accordion.
Expected result: the accordion still works.
Actual result: the accordion freezes in the collapsed state and cannot be expanded.
Note: you may need to repeat these actions several times before the bug is reproduced.
I am basing my question on another question that I've asked a while ago:
Some problems with Bootstrap collapse + Tab navigation
I've also read this question, but it's also a little bit different:
Twitter bootstrap expand/collapse all - within bootstrap tabs
I think the accordion stucks because the browser (I reproduced the issue in chrome 36.0.1985.125 m) still thinks the accordion is hidden and doesn't fire the 'transitionend' event. The accordiong stucks in the transitioning state forever.
When I opened the tab programmatically (like in first question) I could set a timeout to resolve this issue, I don't think I can do so in this case.
Edit:
Just tried in FF. Couldn't reproduce.
Edit 2:
Maybe I am not completely right about the steps to reproduce the problem. Just try to do the following cycle fast:
1. Open second tab.
2. Open accordion.
3. Close accordion.
4. Open first tab.
5. Repeat from first step.
It might be that the accordion stucks while it is in process of hiding and you click on the first tab.
Edit 3:
Yes, I think the second set of steps is the right one.
Edit 4:
A link to swf file with video of me reproducing the problem.
http://1drv.ms/1ttaeJr
My question is what is the best way to resolve this particular situation?
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.