I am using the Bootstrap navigation tabs to split a page (posts on my site. One page shows the posts which the user has made. The other page shows all posts. I am using $_GET variables to paginate the pages.
<ul class="nav nav-tabs" id="myTab">
<li class="active">My Posts</li>
<li>All Posts</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="myPosts">
<?php include "myPosts.php"; ?></div>
<div class="tab-pane" id="allPosts">
<?php include "allPosts.php"; ?></div>
</div>
I am displaying the content on each tab by including the relevant page link.
Here is an example of one of the links which should take the user to page 2.
2
This works fine for myPosts, but when I click on the second tab( all posts) and attempt to paginate, it takes me to the second page of myPosts. The pagination is all url based, so is there anyway to feed into the url what tab/div is active?
In the code you posted, you have <div class="tab-pane active" id="myPosts">
So the active class is hard coded in that div. If that's what you want, great... otherwise, I think we need to do something like this untested code when we generate the list:
<?php
//dummy data
$pages=array(
array('id'=>'1','posts'=>array('id'=>1,'content'=>'Go Bucks')),
array('id'=>'2'),//more posts
array('id'=>'3'),
);
?>
<ul class="nav">
<?php foreach($pages as $page): ?>
<li class="<?= ($page['id']===$_GET['page']) ? ' active':null ?>">
Page <?= $page['id'] ?>
</li>
<?php endforeach; ?>
</ul>
<div class="tab-content">
<?php foreach($pages as $page): ?>
<div class="tab-pane<?php if($page['id']===$_GET['page']){echo ' active in';} ?>">
//foreach posts here
</div>
<?php endforeach; ?>
</div>
The idea I'm trying to demonstrate is to test the page ID vs the $_GET['page'] value.
Another idea for you: check out bootstrap's example" http://getbootstrap.com/javascript/#tabs
You may enjoy using javascript here, or at least to inspect their example to work out the syntax and behavior you want.
Related
I have pretty long nav here, which I have to import to WordPress.
<header class="small">
<div class="yellow-stripe"></div>
<div class="container">
<nav role="navigation">
<ul class="navigation">
<li>
About us
<ul class="sub-navigation">
<li>We are</li>
<li>Our story</li>
<li>Why Ledil</li>
<li>Where</li>
<li>Management</li>
<li>Investors</li>
</ul>
</li>
<li>News</li>
<li>Events</li>
<li>FAQ</li>
</ul>
</nav>
<ul class="lang">
<li class="active">EN</li>
<li>ES</li>
<li>RUS</li>
</ul>
</div>
<div class="nav-button">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</header>
It's made in HTML and now I have to import it to WordPress. I got WordPress to include the header, and to load the whole thing just fine, and it looks great on page, but I would need to add class="active" for bootstrap nav to current page and to child pages too.
I found some answers by googling, but I didn't really get very far.
My function.php looks like this:
<?php
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
add_filter('nav_menu_css_class', 'special_nav_class', 10, 2);
function special_nav_class($classes, $item){
if( in_array('current_page_parent', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
?>
I'm not really sure what I should try. I find the whole WordPress thing very strange.
There seems to be no current_page_item class here.. should I do anything special to enable it?
li.current_page_parent a {} won't work, nor will setting class="<?php if (is_page('name-of-page')) echo 'active'; ?>" inside a tags... goddamn WordPress...
Never mind.. I'm just bit slow.... I put class="<?php if (is_page('why')) echo 'active'; ?>" inside every li element.
If anyone ends up here:
You should check if the page is active or the page is child of another page
<li class="<?php if (is_page('offices')) echo 'active'; ?>">Offices</li>
Checks if page is "offices" and
<li class="<?php if (is_page_child(143)) echo 'active'; ?> echo 'active'; ?>">
Checks if page is child page of page with id "143" and then echoes "active" inside class=" "
i'm trying to store html tag that includes php script.
This is for the navigation menu, i'm trying to display only the menu for a particular user role.
I'm storing it this way
public function edit_module(){
$id = $this->input->post('Module_ID', TRUE);
$update = $this->db->update('ref_modules', array('Module_Name'=>$this->input->post('Module_Name', TRUE),
'Module_Menu'=> htmlspecialchars($this->input->post('Module_Menu')),
'UpdatedBy'=>$this->session->userdata('user_id')), "Module_ID = '$id'");
if($update){
return TRUE;
}
}
For display
<!--Menu-->
<!--================================-->
<div id="mainnav-menu-wrap">
<div class="nano">
<div class="nano-content">
<ul id="mainnav-menu" class="list-group">
<!--Category name-->
<li class="list-header">Navigation</li>
<?php if($this->data['menu']): ?>
<?php foreach($this->data['menu'] as $row): ?>
<?php echo htmlspecialchars_decode($row->Module_Menu); ?>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div> <!-- nano -->
</div><!-- mainnav-menu-wrap -->
<!--================================-->
<!--End menu-->
When i view the source, its fine but when i click the link, special characters are showing.
http://localhost/folderName/%3C?php%20echo%20base_url(%27citizens%27);%20?%3E
Here's a sample value that i am inserting
<li class="<?php echo ($title == 'Citizens' ? 'active-link' : '');?>">
<a href="<?php echo base_url('citizens'); ?>">
<i class="fa fa-user"></i>
<span class="menu-title">
<strong>Citizens</strong>
</span>
</a>
</li>
Any idea guys? Thanks in advance!
Inserting Html into database For Different user role is not the right way. You can use if Conditions To show your Menu for different User roles.
I'm creating a website..When it comes to the navigation menu, I listed it and need the nav bar class to be active when that menu is clicked. It's fine to give class="active" for the list tag. But I need it to be active only when clicked. How can I achieve this .?
My list is :
<div class="menu">
<ul class="nav" id="nav">
<li class="active">
<?php echo anchor("cntrl/index","Home"); ?>
</li>
<li><?php echo $this->session->userdata('user_name'); ?></li>
<li>About</li>
<li>
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
<li>
<?php echo anchor('cntrl/logout','Logout'); ?>
</li>
<div class="clearfix"></div>
</ul>
<script type="text/javascript" src="<?php echo base_url(); ?>/js/responsive-nav.js"></script>
</div>
Well, I handle this sort of issue as follows:
set the active link (which is resided in the url when the link is clicked) into an variable in the controller function which is called by the link
$data['active_link'] = 'home'; # for example
check it in the view file (JS):
$(document).ready(function(){
var active_link = "<?php echo $active_link;?>";
$("li").removeClass('active');
$("#"+active_link).addClass('active');
});
Use the following code.
<li class="<?php echo (endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')? 'active':''); ?>">
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
Main part of this code is
endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')
Where $_SERVER['REQUEST_URI'] is your current URL. and 'cntrl/jobs' is your menu which is being checked with current URL.
I'm developing a library management system for my university project. Found a solution to load dynamic content inside a bootstrap 3 modal with this source.
BOOTSTRAP 3.1 AND MODALS WITH REMOTE CONTENT
But when I apply it to my project as follows,
index.php
<?php if($tot_rows > 0){ ?>
<?php do { ?>
<div class="col-md-3 animatedbounceIn">
<span class="product-image">
<?php $isbnget = $rows['ISBN']; ?>
<img src="<?php echo $rows['Cover'] ?>" class="img-thumbnail product-img" alt="">
</span>
<ul class="iteminfo">
<li class="animated fadeInLeftShort" data-id='1'><strong>Title: </strong><?php echo $rows['Title'] ?></li>
<li class="animated fadeInLeftShort" data-id='1'><strong>Category: </strong><?php echo $rows['Category'] ?></li>
<li class="animated fadeInLeftShort" data-id='2'><strong>Author: </strong><?php echo $rows['Author'] ?></li>
<li class="animated fadeInLeftShort" data-id='2'><strong>Price: </strong><?php echo $rows['Price'] ?></li>
<li class="animated fadeInLeftShort" data-id='3'><strong>ISBN: </strong><?php echo $rows['ISBN'] ?></li>
<li class="animated fadeInLeftShort" data-id='3'><strong>Copies: </strong><?php echo $rows['Copies'] ?></li>
</ul>
</div>
<?php } while($rows=mysqli_fetch_assoc($rs)); }else{ ?>
<?php echo 'No Results'; }?>
</div>
The <a href="books/view.php?bookisbn=<?php echo $isbnget;?>"... link passes the get variable(my dynamic isbn number) to the view page.
view.php
<?php $isbn = $_GET['bookisbn'];?>
That variable is passed to mysql query to acquire data from database and when I click the first time the proper data (that supposed to be loaded), is loaded to the bootstrap modal properly but when I close that modal and then clicked on another link (which is supposed to be with another isbn number acquired by above index page's code)it's get variable is mentioned as 'undefined'(view.php?bookisbn=undefined) and correspondent data not loaded on the modal. The same data which was loaded from first link is shown. To load that data I have to refresh again and click it. Please help me to solve this. I'm trying to find a jquery method. I hope your suggestions to fix this. Thank you.
I am displaying data from database which is linked to CMS. The problem I get is data from only one of my tabs is being displayed. Suppose I have two tabs, Tab 1, Tab 2. Instead of Tab 1 being active, Tab 2 is active and data is displayed of Tab 2. But, when I click on Tab 1, no data with respect to Tab 1 is displayed. The same data is present i.e Tab 2 data.
I am using mapping to get the ids of respective Tab.
<ul class="tabs" data-tab>
<?php
if(isset($X['list_by_parent_id'][0]) && !empty($X['list_by_parent_id'][0]))
{
$top_category_index=1;
foreach ($X['list_by_parent_id'][0] as $category_id)
{
?>
<li class="tab-title <?php if($top_category_index==1){ echo "active"; }?>"><?php echo $SITE['tmp']['product_categories'][$category_id] ?></li>
<?php
}
}
?>
</ul>
X is a global variable which is an array and stores everything.
This is the code that does mapping and displays the content.
<div class="category-content">
<div class="menu-cat-content tabs-content">
<?php if(isset($SITE['category_list_by_parent_id'][0]) && !empty($SITE['category_list_by_parent_id'][0]))
{
$top_category_index_mapped=1;
foreach ($SITE['category_list_by_parent_id'][0] as $category_id)
{ ?>
<div id="category-<?php echo $top_category_index_mapped; ?>" class="content <?php if($top_category_index_mapped++==1) { ?>active<?php } ?>">
//code for content
</div>
Rendered HTML:
<div class="category-content">
<div class="menu-cat-content tabs-content">
<div id="category-1" class="content active">
<!--sub category 1-->
</div><!--sub-category-clearfix2-->
<!--sub category 2 ends-->
</div> <!--category-div, index_mapped -->
<div id="category-2" class="content active">
<!--sub category 1-->
</div><!--sub-category-clearfix2-->
<!--sub category 2 ends-->
</div> <!--category-div, index_mapped -->
<div id="category-3" class="content active">
EDIT: I saw that top_category_index_mapped was set to 1 in category-*top_category_index_mapped. I replaced it and rendered html now looks like this.
This line:
$top_category_index=1;
sets the $top_category_index to 1 for the first tab. This line:
<li class="tab-title <?php if($top_category_index==1){ echo "active"; }?>
is equal to this the firs two times:
<li class="tab-title active">
because of the properties of the ++ operator. Read more here.
For example:
$a = 5;
echo "Should be 5: " . $a++ . "<br />\n";
echo "Should be 6: " . $a . "<br />\n";
Since you've only tested with two tabs it seems, that's why you are getting those results. It might also be helpful to include the rendered html.