CODEWITHSUNDEEP
phpjquerycsscodeigniter
Bobby Z
Bobby Z

Reputation: 795

How to add bootstrap class active in codeigniter

i want to know how to add class active in codeigniter when we separate the view into 3 file. such as :

from this thread, there's no way how to do it when separated the view.

this my header look like:

<body class="skin-red">
<div class="wrapper">
<header class="main-header">
</header>
<aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="<?php echo base_url();?>assets/dist/img/admin.png" class="img-circle" alt="User Image" />
            </div>
            <div class="pull-left info">
              <p>Username</p>
              <small>Privilage</small>
            </div>
          </div>
          <!-- search form -->
          <!-- /.search form -->
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu" id="sidebar">
            <li class="header">MAIN NAVIGATION</li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-users"></i> <span>Users</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>user_man"><i class="fa fa-chevron-right"></i>User List</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-hospital-o"></i> <span>Provider</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url();?>provider"><i class="fa fa-chevron-right"></i>Provider List</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-book"></i> <span>Product Info</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>productinfo"><i class="fa fa-chevron-right"></i>List Product Info</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-book"></i> <span>Procedure</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>procedure"><i class="fa fa-headphones"></i>Procedure List</a></li>
                <!-- <li><a href="#"><i class="fa fa-user"></i>Link Customer Portal</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-film"></i> <span>Video Upload</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-chevron-right"></i>Video Data</a></li>
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-camera-retro"></i> <span>Slide Show Wallpaper</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-chevron-right"></i>Slide Show Data</a></li>
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-camera-retro"></i> <span>Examples</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url();?>user/login"><i class="fa fa-chevron-right"></i>Login</a></li>
              </ul>
            </li>
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>
</div>
</body>

to access the content, this is the how i do:

<section class="content">
.....
</section>

and this my footer view:

</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>Version</b> 2.0
  </div>
  <strong>Copyright &copy; 2014-2015</strong> All rights reserved.
</footer>


</div><!-- ./wrapper -->

<script></script>
<script></script>

</body>
</html>

i want to made,when user click the treeview submenu it will become active, right know when i click the treeview submenu. it will reload not become active. in sample i downloaded AdminLTE active class define in each submenu page, such as menu - <li class="active">submenu</li>

regards, bobby

cmiiw

================================================

i found the js code, it is in. app.js. 

$.AdminLTE.tree = function (menu) {
  var _this = this;

  $("li a", $(menu)).click(function (e) {
    //Get the clicked link and the next element
    var $this = $(this);
    var checkElement = $this.next();

    //Check if the next element is a menu and is visible
    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
      //Close the menu
      checkElement.slideUp('normal', function () {
        checkElement.removeClass('menu-open');
        //Fix the layout in case the sidebar stretches over the height of the window
        //_this.layout.fix();
      });
      checkElement.parent("li").removeClass("active");
    }
    //If the menu is not visible
    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
      //Get the parent menu
      var parent = $this.parents('ul').first();
      //Close all open menus within the parent
      var ul = parent.find('ul:visible').slideUp('normal');
      //Remove the menu-open class from the parent
      ul.removeClass('menu-open');
      //Get the parent li
      var parent_li = $this.parent("li");

      //Open the target menu and add the menu-open class
      checkElement.slideDown('normal', function () {
        //Add the class active to the parent li
        checkElement.addClass('menu-open');
        parent.find('li.act').addClass('active');
        // parent_li.addClass('active');
        //Fix the layout in case the sidebar stretches over the height of the window
        _this.layout.fix();
      });
    }
    //if this isn't a link, prevent the page from being redirected
    if (checkElement.is('.treeview-menu')) {
      e.preventDefault();
    }
  });
};

here's the first schema of the layout. in page.A <li> was active so page.B, when i click one of the it become active. after slicing the page into codeigniter way, i separate into 3: header,content(body),and footer. i remove all the class in tag <li>..

i try to modify like thie below:

checkElement.addClass('menu-open');
parent.find('li').on('click', function(){
  $(this).addClass('active');
});

it wont work, wonder if u guys had a ways.

sorry for my bad english :-D

Upvotes: 0

Views: 3082

Answers (3)

Raj Goswami
Raj Goswami

Reputation: 11

It is easy and work properly

$(document).ready(function(e){
var url=window.location
$('.treeview-menu a').each(function(e){
    var link = $(this).attr('href');
    if(link==url){
        $(this).parent('li').addClass('active');
        $(this).closest('.treeview').addClass('active');
    }
});

});

Upvotes: 1

nirmal
nirmal

Reputation: 2180

try this code Put below code before body tag ends

$(document).ready(function(e){
    $('.treeview a').each(function(e){
        var pathname = window.location.pathname.split("/");
        var url= pathname[pathname.length-1];
        var link = $(this).attr('href');
       if(link==url){$(this).parent('li').addClass('active');}
    });
  });

and where it is written " $("li a", $(menu)).click(function (e) {" put below line after it

  $('.treeview .active').removeClass('active');
   e.preventDefault();
   $(this).addClass('active');

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Try preventDefault()

$('.treeview').on('click', function(e) {
   e.preventDefault();
});

Upvotes: 0

Related Questions