DMXzone Bootstrap 3 Components Support Product Page

PROBLEMS

Solved

Navigation and Tabs on the same page (Active Tab not showing)

Dave Smith

Reported 14 Apr 2016 10:32:18

have this problem

I also have this problem

14 Apr 2016 10:32:18 Dave Smith posted:

Good morning DMX Zone,
We have a small issue when we insert Bootstrap Navigation and Tabs on the same page. The Active Tab does not show correctly. See attached example image.

I believe it is something to do with /ScriptLibrary/dmxBootstrap3Navigation.js but will leave it for the experts to figure out

Thanks in advance for any advice or a fix!

Replies

Dave Smith

Replied 14 Apr 2016 10:34:47

14 Apr 2016 10:34:47 Dave Smith replied:

The code for the above page:

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Bootstrap Tabs and Navigation Conflict</title>
<link rel="stylesheet" type="text/css" href="../bootstrap/3/css/bootstrap.min.css" />
<script type="text/javascript" src="../ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../bootstrap/3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../ScriptLibrary/dmxBootstrap3Navigation.js"></script>
</head>

<body data-spy="scroll" data-target=".nav-container">
<nav class="navbar navbar-default" role="navigation">
  <div class="nav-container container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
      <a class="navbar-brand" href="#">Brand</a></div>
    <div class="collapse navbar-collapse" id="bs3-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="apage.php">Home</a></li>
        <li><a href="aprofile.php">Profile</a></li>
        <li><a href="amessage.php">Messages</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <h2>No Active Tab with Nav Bar.</h2>
      <hr>
      <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab" aria-controls="tab" role="tab" data-toggle="tab">Active</a></li>
        <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 1</a></li>
        <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab"><br>
          <p>This is a basic PHP page converted to Bootstrap with default Nav Bar and default Tabs. </p>
          <p>When the Tab is clicked it becomes Active but on initial page load it is not.....</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab3">
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab2">
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Teodor Kuduschiev

Replied 14 Apr 2016 10:54:28

14 Apr 2016 10:54:28 Teodor Kuduschiev replied:

Hello Dave,
I can't really see any issue with the code you provided:

Are you sure the bootstrap navigation js file is uploaded to your server?

Teodor Kuduschiev

Replied 14 Apr 2016 11:03:19

14 Apr 2016 11:03:19 Teodor Kuduschiev replied:

Ah i see the issue, both the navigation and the tabs are using a same class.
Just open the /ScriptLibrary/dmxBootstrap3Navigation.js and change:

$('ul.nav a').map(function() {
to
$('ul.navbar-nav a').map(function() {

This will fix your issue, on load.

Dave Smith

Replied 14 Apr 2016 11:04:24

14 Apr 2016 11:04:24 Dave Smith replied:

Very strange.

I experience the same issue using both Mozilla and Chrome running under Window 8.1 on two separate laptops.

All files are uploaded to the server correctly.

When I remove the head link to dmxBootstrap3Navigation.js the Active Tab shows correctly...

Teodor Kuduschiev

Replied 14 Apr 2016 11:15:39

14 Apr 2016 11:15:39 Teodor Kuduschiev replied:

Please check my last reply

Dave Smith

Replied 14 Apr 2016 11:20:51

14 Apr 2016 11:20:51 Dave Smith replied:

Unfortunately that did not fix the issue. I made the change suggested and uploaded the new file (cleared all history/cache in both browsers). I removed the active class from the navigation and that still did not resolve the issue. I have removed the link to dmxBootstrap3Navigation.js and see no adverse effect and both the menu and the tabs are working fine and display correctly (am not concerned with an active navbar item displaying). Thanks for the prompt replies and suggestion Teodor.

Teodor Kuduschiev

Replied 14 Apr 2016 11:26:49

14 Apr 2016 11:26:49 Teodor Kuduschiev replied:

Please provide a link to your page. Changing the class in the js file does fix the issue. Most probably you entered something wrong.

Dave Smith

Replied 14 Apr 2016 11:28:08

14 Apr 2016 11:28:08 Dave Smith replied:

I just had a thought. I will just check the CloudFlare settings for the domain and make sure it has not cached the old file. Will return and update when I have made sure everything is OK. Thanks again.

Dave Smith

Replied 14 Apr 2016 11:34:25

14 Apr 2016 11:34:25 Dave Smith replied:

I purged the CloudFlare cache for the domain and everything is fine. The suggested change to the class has rectified the issue.

Thank you very much once again Teodor.

User

Replied 16 Dec 2023 06:43:14

16 Dec 2023 06:43:14 User replied:

Master the art of digital marketing with Adobe AD0-E718 Exam Objectives [2023]. Elevate your skills in Campaign Creation and Management, as you delve into Adobe Campaign Standard Business Practitioner certification. Explore the intricacies of Email Marketing, gaining expertise in personalized communication strategies. Navigate through Profile and Target Data, honing your ability to harness customer insights for impactful campaigns. Harness the power of Adobe Campaign Reporting and Analytics, unlocking the secrets to measure and optimize your marketing efforts. With Adobe AD0-E718, become the maestro of customer engagement and drive business success in the dynamic digital landscape. Your journey to marketing excellence begins here!