Changing div value dynamically, navigation bar on laravel blade - php

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.

Related

Add active class to WordPress nav

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=" "

making class="active" for nav menu in php

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.

highlight currently menu selection php

I have PHP code which will check if the user is logged in and will return the menu if they are, however I was wondering if there was a way to make each of the current selected highlighted or would I have to go through and add them as a manual list to each page?
The code is:
<?php
if (!securePage($_SERVER['PHP_SELF'])){die();}
//Links for logged in user
if(isUserLoggedIn()) {
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>
<div id='button1'>
<a href='/Demos.php'>Demos</a></div>
<div id='button2'>
<a href='/Helpfiles.php'>Helpfiles</a></div>
<div id='greeting'>
Hello, $loggedInUser->displayname.</br>";
}
//Links for users not logged in
else{
echo "<div id='Default'>
<ul>
<li><a href='/login.php'>Login</a></li>
<li><a href='/register.php'>Register</a></li>
<li><a href='/forgot-password.php'>Forgot Password</a></li>";
echo "</ul></div>";
}
?>
Now I know that on a normal CSS one it would just be .current and you can do it that way, however I cannot make that work with this echo because they are all on the screen at the same time. What would be the best way? Manually add would see like the longer way.
p.s. this is used in conjunction with usercake
You don't need to put HTML into an echo in PHP. I would recommend something like this.
So you will end up with something like:
<?php
if(isUserLoggedIn()) {
?>
<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul>
</div>
<div id='greeting'>
Hello, <?php echo $loggedInUser->displayname; ?>
</br>
<?php } ?>
Then I would not recommend you to add the class with PHP because you will suffer from lisibility with a lots of if and else cases.
The best way to do this would be to use ID/Classes for your LIs and add the selected class to a specitic item with a simple JavaScript function.
Btw, if you really feel the needs to have this in PHP I recommend you to read this:
http://www.catswhocode.com/blog/snippets/highlight-current-menu-item-in-php
http://webdeveloperswall.com/php/how-to-highlight-the-current-page-in-menu-in-php
So you will have something like:
<?php if(isUserLoggedIn()) { ?>
<ul>
<?php
$url = $_SERVER['REQUEST_URI'];
$parts = parse_url($url);
$page_name = basename($parts['path']);
?>
<li><a class="<?php echo ($page_name=='acount.php')?'selected':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='user_settings.php')?'selected':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='logout.php')?'selected':'';?>" href="contact.php">CONTACT US</a></li>
</ul>
<?php } ?>
EDIT
Finally, you should end up with something like this: http://pastebin.com/V8jxwi7T
You could grab the page you are currently browsing and see if it matches. Something like this perhaps? (sorry for the crude example)
<?php
// will return 'home' is the filename is home.php
$filename = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
?>
<li <?php if ($filename == "home") { echo "class='active'"; } ?>>
Home
</li>
Some info on pathinfo and how it works here
Just add class to selected <li> element, this way:
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li class="selected"><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";
In your CSS, put appropriate style for .selected class.
You should have a variable telling in which page you are, let's say it's $currentpage.
echo "<div id='Default'>
<ul>
<li".($currentpage=='account' ? ' class="selected"' : '')."><a href='/account.php' >Account Home</a></li>
<li".($currentpage=='usersettings' ? ' class="selected"' : '')."><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";

How to add active class to codeigniter hyperlinks?

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')?>">

How to change active menu item style in html/css/js/php

heres how my html is
<ul class="navigation">
<li>Home</li>
<li>About us</li>
</ul>
as you can see the content of "about us" page is loaded in to index.php.
now i want to change active page link on nav bar different style.
please do help me. i hope this question is clear.
to add a class to a particular item based on selection;
<ul class="navigation">
<li <?php if(!isset($_GET['content'])) { echo 'class="active"'; } ?>>Home</li>
<li <?php if(isset($_GET['content']) && $_GET['content']=='about') { echo 'class="active"'; } ?>>About us</li>
</ul>

Categories