+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Simple method to highlight active link (/showthread.php?tid=3902)
Simple method to highlight active link - El Forum - 10-27-2007
[eluser]John_Betong[/eluser]
Hi All,
Wish List
I have always wanted a simple solution to highlight the active page link.
I stumbled upon
I came across an ingenious solution and adapted it very quickly to this CodeIgniter site.
Theory
In order to get the links to be highlighted:
1. a simple line of CSS code is required
2. the view code requires an individual <body id='<?= $PAGE ?>'>
3. each link requires an additional unique CSS 'class' statement
Implementation, additions and changes
CSS File
Code:
#home .home,
#privacy .privacy,
#terms .terms,
#about .about,
#contact .contact,
#bizarre .bizarre,
#wisdoms .wisdoms,
#quotes .quotes,
#debug .debug
{
background:#f33 none; color:#fff
}
Controller Code
Code:
function index() {
...
...
$this->j_view($data);
}
function privacy() {
...
...
$this->j_view($data);
}
function terms() {
...
...
$this->j_view($data);
}
function j_view($data) {
// $PAGE is used in View <body id='$PAGE'>
$tmp = $this->uri->segment(2);
$data['PAGE'] = empty($tmp) ? 'home' : $tmp;
...
... // $this->load->view(header, container, left, right, footer, etc , $data, TRUE);
...
$output = $this->load->view('view_001', $data, TRUE);
echo $output;
}//endfunc j_view(...)
View code
Code:
<html>
<?= $header ?>
<body id=<?=$PAGE ?> >
<div id='header'>
<a href="../" class="home"> Home </a> |
<a href="../joke/privacy" class="privacy"> Privacy </a> |
<a href="../joke/terms" class="terms"> Terms </a> |
<a href="../joke/about" class="about"> About us </a> |
<a href="../joke/contact" class="contact"> Contact us </a>
</div>
<div id='box_left'>
<a href='../joke/bizarre/' class='bizarre'>Bizarre Searches</a><br />
<a href='../joke/quotes' class='quotes'>Quotes</a><br />
<a href='../joke/wisdoms' class='wisdoms'>Wisdom stuff</a>
<br /><br />
</div>
...
... // container, messages, footer, etc
...
</body>
</html>
Cheers,
John_Betong
Simple method to highlight active link - El Forum - 10-28-2007
[eluser]jedre[/eluser]
CSS definition should looks like this:
Code:
#home a.home:link, #home a.home:visited{
//come code to normal ant visited link
}
#home a.home:hover, #home a.home:active {
background:#f33 none; color:#fff;
}Check It!
Edit: and reamember links must be in example:
Code:
<div id="home"> <a .....>link</a>Simple method to highlight active link - El Forum - 10-28-2007
[eluser]John_Betong[/eluser]
Hi jedre,
I was previously unsuccessful in trying to get the CSS statements a:active to work in the three most common Windows browsers. I am happy that supplied code works in all three browsers.
I also tried you code and it worked just the same as it worked without using your code?
I do not know why the code works in all the browsers I tried but I am just happy that it does.
If it is not broken then why try to fix it?
Cheers,
John_Betong
Simple method to highlight active link - El Forum - 10-28-2007
[eluser]xwero[/eluser]
instead of using and id and a class why don't you add an active class to the links?
Code:
// controller
$this->load->view('view',array('homecurrent'=>'current'));
// view
<div id='header'>
<a href="../" class="<?php echo $homecurrent; ?>"> Home </a> |
<a href="../joke/privacy" class="<?php echo $privacycurrent; ?>"> Privacy </a> |
<a href="../joke/terms" class="<?php echo $termscurrent; ?>"> Terms </a> | /---0.
.+
<a href="../joke/about" class="<?php echo $aboutcurrent; ?>"> About us </a> |
<a href="../joke/contact" class="<?php echo $contactcurrent; ?>"> Contact us </a>
</div>
// css
.current
{
background:#f33 none; color:#fff
}Simple method to highlight active link - El Forum - 10-29-2007
[eluser]John_Betong[/eluser]
[quote author="xwero" date="1193575612"]instead of using and id and a class why don't you add an active class to the links?
Code:
...
...
...
Hi xwero,
Version 002
Code:
// css file
.current { background:#00f none; color:#fff}
.normal { background:#0f0 none; color:#fff}
// controller file
// set normal default links
$this->load->view('view_001', array(
'homecurrent' => 'normal' ,
'privacycurrent'=> 'normal' ,
'termscurrent' => 'normal' ,
'aboutcurrent' => 'normal' ,
'contactcurrent'=> 'normal'),
TRUE
);
// find active/current link
$tmp = $this->uri->segment(2);
$data['PAGE'] = empty($tmp) ? 'home' : $tmp;
// set active link
switch($data['PAGE']){
case 'home' : $active = array('homecurrent' => 'current'); break;
case 'privacy' : $active = array('privacycurrent' => 'current'); break;
case 'terms' : $active = array('termscurrent' => 'current'); break;
case 'about' : $active = array('aboutcurrent' => 'current'); break;
case 'contact' : $active = array('contactcurrent' => 'current'); break;
}
$this->load->view('view_001', $active, TRUE);
// View file
<a href="../" class="<?= $homecurrent ?>"> Home </a>
<a href="../joke/privacy" class="<?= $privacycurrent ?>"> Privacy </a>
<a href="../joke/terms" class="<?= $termscurrent ?>"> Terms </a>
<a href="../joke/about" class="<?= $aboutcurrent ?>"> About us </a>
<a href="../joke/contact" class="<?= $contactcurrent ?>"> Contact us </a>I agree that "you don’t have to change your css file if there is a link removed or added" but it seems a lot of controller code is required to achieve the same results.
I am in two minds as to which method is better but at least I now I have a choice
Cheers,
John_Betong
Simple method to highlight active link - El Forum - 10-29-2007
[eluser]xwero[/eluser]
You can put the normal status in a config file and in your controller you just have to change the class from the link that is active. So it can come down to
Code:
// controller
$this->config->set_item('homecurrent') = 'current';
//view
<a href="../" class="<?= $this->config->item('homecurrent') ?>"> Home </a>
<a href="../joke/privacy" class="<?= $this->config->item('privacycurrent') ?>"> Privacy </a>
<a href="../joke/terms" class="<?= $this->config->item('termscurrent') ?>"> Terms </a>
<a href="../joke/about" class="<?= $this->config->item('aboutcurrent') ?>"> About us </a>
<a href="../joke/contact" class="<?= $this->config->item('contactcurrent') ?>"> Contact us </a>Simple method to highlight active link - El Forum - 10-29-2007
[eluser]xwero[/eluser]
and to make it even easier to change the default class in the config file you can do something like this
Code:
$defaultclass = '';
$config['homecurrent'] = $defaultclass;
$config['privacycurrent'] = $defaultclass;
$config['termscurrent'] = $defaultclass;
$config['aboutcurrent'] = $defaultclass;
$config['contactcurrent'] = $defaultclass;