We Keep Coding

Tab Change Functionality of Bootstrap not working in ReactJS

Layout.js file
<div class="row">
<div class="col-12" style={{padding: 0}}>
<div class="tabs-container-fluid">
<MidTabs />
<div class="tab-content">
<Mail />
<PromotionalActiv/>
<Dashboard />
<SalesOver />
<XYZAnalysis />
</div>
</div>
</div>
</div>
MidTabs.js file where hrefs are added for the different tablets.
return (
<div>
<ul class="nav nav-tabs" role="tablist">
<li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with ABC</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-3"> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>XYZ Analysis</a></li>
</ul>
</div>
);
Dashboard.js file
return (
<div>
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............
I have similar files for Mail.js, PromotionalActiv.js, etc.
The problem is that when I click on a tab like Dashbaord/Mail, etc, I can't see the corresponding content. Instead, all the content in Dashboard, Mail, PromotionalActiv, etc are stacked one below the other. I want that content to be rendered conditionally based on whether the tab has been clicked or not.
Am I making a mistake in the way I'm arranging the components?

If you are trying to control with some custom css, you can do this.
Inside the Dashboard.js file, in the tab-pane class, put display: none;
And in the active class next to tab-pane, put display: block;

Ok, so the issue was that I was adding an extra div in every child component like Mail, PromotionalActive, etc due to which the CSS class was getting affected. After removing the extra div in those components, the problem got solved.
For example, the Dashboard.js file will now look like this without the extra div:
return (
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............

isotope filter - prevent "selected" category from loading all images

I've tried the suggested fixes on Stack Overflow but can't seem to fix my issue. I'm trying to get a "selected" category to keep from loading all the images on page load. I've tried to remove the "Show All" line but that does not help. I believe this to be a js problem.
Here's my html and js:
HTML:
<div id="isotope-options">
<ul id="isotope-filters" class="clearfix">
<li>Show All</li>
<li>Recital Photos</li>
<li>Home Photos</li>
<li>Recital Videos</li>
</ul>
</div>
JS:
I couldn't fit all the js here, so here's a link:
isotope filter js
Here's the code you requested:
<li class="span3 isotope-element isotope-filter2">
<div class="thumb-isotope">
<div class="thumbnail clearfix">
<a href="gallery_images/recital_pics/1pm hippie group.jpg">
<div class="banner_inner">
<div class="banner_inner2">
<figure>
<img src="gallery_images/recital_pics/1pm hippie group - sm.jpg" alt=""><em></em>
</figure>
<div class="caption">
Group 1
</div>
</div>
</div>
<img src="images/banner_shadow.png" alt="" class="banner_shadow">
</a>
</div>
</div>
</li>

You can filter using this
$grid.isotope({ filter: '.selected' });

Is it possible to access internal jQuery # links (access single website sections directly) from external url?

I have a single page - auto scroll website template with different divs scattered around it.
As stated in the title, can I access those href sections directly from an outside url? For example typing http://ozzzi.herobo.com/#about to take me directly to the ABOUT section of the single page website?
HTML:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
jQuery:
<div class="top-nav">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a class="scroll" href="#home">Home</a>
<a class="scroll" href="#features">Features</a>
<a class="scroll" href="#screenshots">Screen Shots</a>
<a class="scroll" href="#services">Services</a>
<a class="scroll" href="#about">About</a>
<a class="scroll" href="#products">Products</a>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
</pre>
another HTML + jQuery example:
<pre>
<div id="products" class="products wow fadeInUp" data-wow-delay="0.5s">
<div class="container">
<div class="products-info">
<h3>The basic introdution of our Products.</h3>
<p>Creativity itself doesn't care at all about results - the only thing it craves is the process.
Learn to love the process and let whatever happens next happen,
without fussing too much about it. </p>
<img src="images/1.jpg" class="img-responsive zoom-img" alt=" " />
<div class="link">
Sign up
</div>
</div>
</div>
</div>
</pre>
<script>
$(document).ready(function () {
size_li = $("#myList li").size();
x=1;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-1<0) ? 1 : x-1;
$('#myList li').not(':lt('+x+')').hide();
});
});
</script>
I've added a link to the template to view it's source in case my explanations weren't good enough: [SOURCE][1]
[1]: http://ozzzi.herobo.com/source

In your example #About is a "bookmark" link. Any browser will attempt to scroll to an element with id="About" in the specified page. Just add IDs to each section to want to bookmark. The links can then just have the #bookmarkid value at the end of the URL.

Angular-Foundation directives do not work

I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});

jQuery bxSlider and jQuery-ui tabs

I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?

Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>