I know this question comes across a lot, but I just can't figure out how to do this using the, already answered posts.
I have a header with navigation links. I would like to add class="active" to the link that's active at the moment.
How could I do this if I have the following navigation?
<nav>
<ul id="main_nav">
<li class="home">
<a href="search">
<i class="icon-search"></i>
<span>BEDRIJF ZOEKEN</span>
</a>
</li>
<li class="categorie">
<a href="categorieen/all">
<i class="icon-list-ul"></i>
<span>CATEGORIE</span>
</a>
</li>
<li class="aanbieding">
<a href="aanbiedingen">
<i class="icon-shopping-cart"></i>
<span>AANBIEDING</span>
</a>
</li>
<li class="vacature">
<a href="vacatures">
<i class="icon-copy"></i>
<span>VACATURE</span>
</a>
</li>
<li class="agenda">
<a href="agenda">
<i class="icon-calendar"></i>
<span>AGENDA</span>
</a>
</li>
<li class="contact">
<a href="contact">
<i class="icon-envelope"></i>
<span>CONTACT</span>
</a>
</li>
</ul>
</nav>
I tried this, but it did not work:
<script>
$(function() {
var href = $(this).find('a').attr('href');
alert(window.location.pathname)
if (href === window.location.pathname) {
$(this).addClass('active');
}
});
</script>
Maybe there's a better Codeigniter-ish way?
try this one.i think no need of javascript or jquery.
If you are using codeigniter then you can use URI Class.
<li class="home">
<a class="<?php if($this->uri->segment(1)=="search"){echo "active";}?>" href="<?=base_url('search')?>">
<i class="icon-search"></i>
<span>BEDRIJF ZOEKEN</span>
</a>
</li>
please let me know if you face any problem
I created a helper and saved it into the helper directory named as "menu_helper.php":
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
if(!function_exists('active_link')) {
function activate_menu($controller) {
// Getting the class instance.
$ci = get_instance();
// Getting the router class to actived it.
$class = $ci->router->fetch_class();
return ($class == $controller) ? 'active' : '';
}
}
Then in config/autoload.php, I added "menu" as a helper on line 91.
The last step is to put the code for print the "active" class when accessing the page (i.e. Login Page):
<li class="<?php echo activate_menu('login'); ?>">
<?php echo anchor('login', 'Login'); ?>
</li>
if (href === window.location.pathname) {
$('a[href='+ href +']').addClass('active');
}
Try this one:
<a class="<?=(current_url()==base_url('search')) ? 'active':''?>" href="<?=base_url('search')?>">
Related
i have admin panel side bar like as follow
<li class="<?= (uri_string() ==
"admin/customer_personal/listcustomerpersonal")?"active":NULL;?>">
<a href="<?php echo
base_url('admin/customer_personal/listcustomerpersonal'); ?>">
<i class="fa fa-users fa-lg"></i> View Customer Personal
</a>
</li>
my view file is locate in admin/customer_personal/listcutomer.php then my controller file is
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
class Cus_personal extends MX_Controller
{
function __construct()
{
if($this->session->userdata('isLoggedIn')==FALSE)
{
redirect('auth','refresh');
}
//$this->load->model('model_customer_personal');
$this->load->library('api_lib');
}
function index()
{
$this->listcustomerpersonal();
}
function listcustomerpersonal()
{
//$data['customers']=$this->load->get_customerall();
//$this->theme_lib->data = $data;
$this->theme_lib->view ='customer_personal/listcustomerpersonal';
$this->theme_lib->title = 'D2D | Customer Attendance';
// $this->theme_lib->pageFoot
='customer_personal/listcustomerpersonalfoot';
//$this->theme_lib->pageHead
='customer_personal/listcustomerpersonalhead';
$this->theme_lib->render();
}
}
?>
then my view file is
<?php
echo '<h1>hai hello how are you</h1>';
?>
but i have an error as 404 page not found error but other page in this panels were worked.
I guess your controller file is also located on path admin/customer_personal/. If yes, then you need to change your change below line
<a href="<?php echo base_url('admin/customer_personal/listcustomerpersonal'); ?>">
to
<a href="<?php echo base_url('admin/customer_personal/Cus_personal/'); ?>">
Hope this helps.
Set the route for the url in config > routes as below
$route['admin/customer_personal/listcustomerpersonal'] = 'admin/cus_personal/listcustomerpersonal';
or change the url in the side bar like
<li class="<?= (uri_string() ==
"admin/customer_personal/listcustomerpersonal")?"active":NULL;?>">
<a href="<?php echo base_url('admin/cus_personal/listcustomerpersonal'); ?>">
<i class="fa fa-users fa-lg"></i> View Customer Personal
</a>
</li>
I have Created Session on subdomain but right now i am unable to access session variable on Root domain
Login Page : myaccount.javaignite.com //authenticate login
Home: page
www.javaignite.com // here i am unable to get the value
myaccount.javaignite.com/Auth.php
Calling by ajax from index.php
<?php
$sess_name = session_name('app');
session_set_cookie_params(0, '/', '.javaignite.com');
session_start();
if($_POST){
$profile_id =$_POST["profile_id"];
$profile_fullname =$_POST["profile_fullname"];
$profile_img =$_POST["profile_img"];
$profile_email =$_POST["profile_email"];
$_SESSION["profile_id"] =$profile_id;
$_SESSION["profile_fullname"] =$profile_fullname;
$_SESSION["profile_img"] =$profile_img;
$_SESSION["profile_email"] =$profile_email;
$redirect_url ="http://javaignite.com";
if(isset($_SESSION["redir_url"])){
$redirect_url =$_SESSION["redir_url"];
}
echo $redirect_url;
die;
}
?>
javaignite.com/navigation.php
which is include in myaccount.javaignite.com/index.php and index.php (in root)
<?php
print_r($_SESSION);
if(isset($_SESSION["profile_id"])){
?>
<ul class="nav navbar-nav navbar-right" style="margin-right:10px;">
<li class="dropdown selected">
<a class="" href="http://account.javaignite.com/profile"> <i class="fa fa-sign-in"></i>
<?php echo $_SESSION["profile_name"]; ?> </a>
</li>
</ul>
<?php
} else {
?>
<ul class="nav navbar-nav navbar-right" style="margin-right:10px;">
<li class="dropdown selected">
<a class="" href="http://account.javaignite.com/"> <i class="fa fa-sign-in"></i> Login/Signup </a>
</li>
</ul>
<?php
}
?>
You need to update php.ini file. Please read following older question links
1.Allow php sessions to subdomains
2.Session variable from subdomain to main domain
Hi' I'm trying to get value with jquery with no success.
This part of the code I get with ajax and it's changes (it's part of a loop in function.php)
if ($termschildren) {
echo '<ul class="BlaBla">';
foreach ( $termschildren as $termchildren ) {
echo '<li class="BlaBlaLi">';
echo '' . $c_term_name->name . '';
echo '</li>';
echo '</ul>';
} else {
echo ' ';
}
die();
the ajax is return to a div called 'childrens_world'
echo '<div class="childrens_world">';
echo ' '; //for start
echo '</div>';
this is the jquery I use. I can't get the data-filter value. (the loop is fine, in the source code i see it well)
$filterLinksChildren = $('.tax-filter-children');
$('.childrens_world').on("click", $filterLinksChildren, function(e) {
var filt = $filterLinksChildren.data('filter');
//do something;
)};
I use the data-filter (var filt) to send to isotope jquery function
Thanks for any help
A couple of minor fixes:
Make the following as a string variable as opposed to a jQuery selector.
From:
$filterLinksChildren = $('.tax-filter-children');
To
filterLinksChildren = '.tax-filter-children';
There's apparently a small typographical error towards the end of the function:
)}; should actually be });
So, your complete solution would be something like the following:
filterLinksChildren = ".tax-filter-children";
$('.childrens_world').on("click", filterLinksChildren, function(e) {
alert($(this).data("filter"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="childrens_world">
<ul class="BlaBla">
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a1">a1
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a2">a2
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="a3">a3
</a>
</li>
</ul>
</div>
<hr>
<div class="childrens_world">
<ul class="BlaBla">
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b1">b1
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b2">b2
</a>
</li>
<li class="BlaBlaLi">
<a href="#" class="tax-filter-children" data-filter="b3">b3
</a>
</li>
</ul>
</div>
You can try an alternate to get data value. Use attr
var filt = $filterLinksChildren.attr('data-filter');
I'm trying to make an active navigation bar using PHP where the current page will be highlighted or colored in the navigation bar. The code I used:
<ul class="topmenu">
<li <?php if($_GET['page']="home") { ?> class="active" <?php } ?>>
<b>Bienvenue</b>
</li>
<li <?php if($_GET['page']="livres") { ?> class="active" <?php } ?>>
<b>Livres</b>
</li>
<li <?php if($_GET['page']="bibliotheque") { ?> class="active" <?php } ?>>
<b>Bibliothèque</b>
</li>
<li <?php if($_GET['page']="universite") { ?> class="active" <?php } ?>>
<b>L'université</b>
</li>
<li <?php if($_GET['page']="contact") { ?> class="active" <?php } ?>>
<b>Contact</b>
</li>
</ul>
The code will put the attribut in the class active if the page is the current page in the navigation bar. However, all the attributs will be given the class active in this case. How do I fix this?
P.S: I am not looking for any JS or jQuery alternatives, I'm trying to make this work with PHP only.
You could use $_SERVER['SCRIPT_NAME'].
<ul class="topmenu">
<li <?php if($_SERVER['SCRIPT_NAME']=="/home.php") { ?> class="active" <?php } ?>><b>Bienvenue</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/livres.php") { ?> class="active" <?php } ?>><b>Livres</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/bibliotheque.php") { ?> class="active" <?php } ?>><b>Bibliothèque</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/universite.php") { ?> class="active" <?php } ?>><b>L'université</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/contact.php") { ?> class="active" <?php } ?>><b>Contact</b></li>
</ul>
I don't use PHP, but give the current page the active tag, and change it per file. Then a single class definition in the CSS handles changing the color for each page.
HTML:
<nav>
<a class="active" href="/home/">Home</a>
Calendar
Community
</nav>
CSS:
.active {
background-color: #4CAF50;
}
Declare page variables at the very top of each individual page.
Example: <? $page="home";?>
For each list item in your nav bar add if statment with corresponding variable and active class.
Example: <li class="<?if($page=="home"){?>active<?}?>"><b>Bienvenue</b></li>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.
I'm using bootstrap 4 class. I've achieved Active Class selection something like this.
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile1.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile1.php">Home
</a>
</li>
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile2.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile2.php">Home
</a>
</li>
Repeat this logic for further li tags. Hope this helps someone else.
The code work correctly if you use "==" instead of "=" in The if construct
Еxample:
if($_GET['page'] **==** "home")...
Instead:
if($_GET['page'] **=** "home")...
Hope this helps someone else...
I'm currently using laravel blade and i currently implemented bootstrap along with the blade template.
Would want to have the navigation button able to interact dynamically along with the selected pages
<div class="navbar">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><b>iMakan</b></a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><a class="active "href="/">Home</a></li>
<li>About Us</li>
<li>Contact Us</li>
<li>Login</li>
<li>Cart</li>
</ul>
</div>
</div>
</nav>
</div>
Laravel provides a built-in function you can use: Request::is().
From the API docs:
Determine if the current request URI matches a pattern.
You use is like this:
Request::is('about'); // returns a boolean
<a href="about" #if(Request::is('about')) class="active" #endif>
You could write a helper function to take care of it:
function isActive($path, $class = 'active')
{
return (Request::is($path)) ? $class : '';
}
Put it in a file called helpers.php in your app directory and include it in the autoload-part of your composer.json like this:
"autoload": {
"files": [
"app/helpers.php"
]
},
Maybe you need to do a composer dump-autoload in your terminal.
And finally use it like this:
About
Here's my way What i do, You shall follow this too
If you have the last part of url like home for Home, aboutus for About Us, then you can do this
Step 1 :
Get Request Uri
$_SERVER['REQUEST_URI']
Step 2 :
Inside you class you can have this condition
<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>
So you will be having
<li><a href="about" class='<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>' >About Us</a></li>
The condition will echo active according to your uri
So you will be having something this
<ul class="nav navbar-nav navbar-right">
<li><a class="<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>" href="/">Home</a></li>
<li><a class='<?php if ($_SERVER['REQUEST_URI']=='/aboutus') { echo 'active'; } ?>'href="about" >About Us</a></li>
<li><a class='<?php if ($_SERVER['REQUEST_URI']=='/contactus') { echo 'active'; } ?>'href="contact">Contact Us</a></li>
<li><a class='<?php if ($_SERVER['REQUEST_URI']=='/login') { echo 'active'; } ?>' href="auth/login">Login</a></li>
<li><a class='<?php if ($_SERVER['REQUEST_URI']=='/cart') { echo 'active'; } ?>' href="503">Cart</a></li>
</ul>
Then you will be getting the class='active' according to your url.
Hope this helps you.
There is a package you can use, but using only what laravel provides I would suggest the following:
<a href="{{ URL::route('home') }}"
class="{{ Route::current()->getName() === 'home' ? : 'active' : ''">Home</a>
Using URL::route(...) will create a URL based on the name of the route and you can check if this name is currently used with the providec check. To name a route, read the laravel documentation about routing.