I have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. It works if I right-click and say open in new tab, but otherwise nothing happens. I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what.
Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs
Here is a simple version of my code:
<div class="tabbable features tabs-left row-fluid">
<ul class="nav nav-tabs span3 uppercase">
<li class="active">Overview</li>
<li>What you get</li>
<li>Our Process</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="l1">
<h3>Overview</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l2">
<h3>What You Get</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l3">
<h3>Our Process</h3>
<a href="/anotherpage">
</div>
</div>
</div>
</div>
Thank you in advance for any advice you have. I'm pretty new to Bootstrap, so I'm kinda at a loss.
In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:
$('.tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You should make it:
$('.tabbable .nav-tabs a').click( //etc..
This way no other a's are selected by jQuery..
Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.
Related
My project is setup in this local link:
localhost:12345/index.html#/BookCollection
In this page there are 3 Tab components from Bootstrap. Recent, Past and UpComing
When I click on any of those Tabs I am taken back to:
localhost:12345/index.html#/
Whereas it was supposed to be:
localhost:12345/index.html#/BookCollection#Recent
The other two Tabs links are:
localhost:12345/index.html#/BookCollection#Past
localhost:12345/index.html#/BookCollection#UpComing
Please note that I am not allowed to change this Link Structure below:
localhost:12345/index.html#/BookCollection
This is the Bootstrap component I am using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Recent">Recent</a></li>
<li><a data-toggle="tab" href="#Past">Past</a></li>
<li><a data-toggle="tab" href="#UpComing">UpComing</a></li>
</ul>
<div class="tab-content">
<div id="Recent" class="tab-pane fade in active">
<h3>Recent Books</h3>
<p>Some content.</p>
</div>
<div id="Past" class="tab-pane fade">
<h3>Past Books</h3>
<p>Some content in Past Books.</p>
</div>
<div id="UpComing" class="tab-pane fade">
<h3>UpComing books</h3>
<p>Some content in UpComing books.</p>
</div>
</div>
And I need the Tabs components from Bootstrap to work.
How do I fix it?
It seems that your code snippet works just fine. Perhaps you can explain a little bit more (and use a site like bootply since your localhost isn't reachable).
See your code snippet working here:
http://www.bootply.com/Ny6q4guDgk
I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.
You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.
I am working on an accordion menu and my problem is that I want the menu sub menu to stay open when one of the links in the sub menu is clicked. I have come up with a a javascript function to add the class that looks like this:
$(function(){
$('#collapseTwo' + location.pathname.split('/register_deal.aspx').slice(-1)).addClass('in');
});
The code above works and keeps the accordion open when the link is clicked. When I try to add another function for the next page it doesn't work. Example:
$(function(){
$('#collapseTwo' + location.pathname.split('/find_deals.aspx').slice(-1)).addClass('in');
});
I was thinking that I could just duplicate the function for each page since they are all using the same menu. I am not sure why it is not working. Any help on this would be great. Thank you!
Here is an example of the menu:
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="list-unstyled">
<!-- <li><a id="side_deal_reg" ClientIdMode="Static" runat="server">Deal Registration</a></li> -->
<li>Review Deals</li>
<li>Register a Deal</li>
</ul>
</div>
</div>
I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.
In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();