Login

10-27-2007, 11:08 PM

[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 &lt;body id='$PAGE'&gt; 

    $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:
&lt;html&gt;

  &lt;?= $header ?&gt;

  &lt;body id=&lt;?=$PAGE ?&gt; &gt;

        <div id='header'>

            <a href="../"             class="home">     Home      </a>  &nbsp; | &nbsp;

            <a href="../joke/privacy" class="privacy"> Privacy    </a>  &nbsp; | &nbsp;

            <a href="../joke/terms"   class="terms">     Terms      </a>  &nbsp; | &nbsp;

            <a href="../joke/about"   class="about">     About us   </a>  &nbsp; | &nbsp;

            <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

        ...

    &lt;/body&gt;

&lt;/html&gt;

 
 
Cheers,

John_Betong
 
 

10-28-2007, 12:01 AM

[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>

10-28-2007, 12:42 AM

[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
 
 

10-28-2007, 01:46 AM

[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="&lt;?php echo $homecurrent; ?&gt;">     Home      </a>  &nbsp; | &nbsp;

            <a href="../joke/privacy" class="&lt;?php echo $privacycurrent; ?&gt;"> Privacy    </a>  &nbsp; | &nbsp;

            <a href="../joke/terms"   class="&lt;?php echo $termscurrent; ?&gt;">     Terms      </a>  &nbsp; | /---0.

.+&nbsp;

            <a href="../joke/about"   class="&lt;?php echo $aboutcurrent; ?&gt;">     About us   </a>  &nbsp; | &nbsp;

            <a href="../joke/contact" class="&lt;?php echo $contactcurrent; ?&gt;"> Contact us </a>        

        </div>  

// css

  .current  

    {

        background:#f33 none; color:#fff

    }

The main benefit over your solution is you don't have to change your css file if there is a link removed or added

10-29-2007, 07:14 AM

[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:
...

 ...

 ...

The main benefit over your solution is you don't have to change your css file if there is a link removed or added[/quote]
 
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="&lt;?= $homecurrent    ?&gt;"> Home       </a> 

<a href="../joke/privacy" class="&lt;?= $privacycurrent ?&gt;"> Privacy    </a> 

<a href="../joke/terms"   class="&lt;?= $termscurrent   ?&gt;"> Terms      </a>

<a href="../joke/about"   class="&lt;?= $aboutcurrent   ?&gt;"> About us   </a>

<a href="../joke/contact" class="&lt;?= $contactcurrent ?&gt;"> 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 Smile

Cheers,

John_Betong
 

10-29-2007, 08:38 AM

[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="&lt;?= $this->config->item('homecurrent')    ?&gt;"> Home       </a>

<a href="../joke/privacy" class="&lt;?= $this->config->item('privacycurrent') ?&gt;"> Privacy    </a>

<a href="../joke/terms"   class="&lt;?= $this->config->item('termscurrent')   ?&gt;"> Terms      </a>

<a href="../joke/about"   class="&lt;?= $this->config->item('aboutcurrent')   ?&gt;"> About us   </a>

<a href="../joke/contact" class="&lt;?= $this->config->item('contactcurrent') ?&gt;"> Contact us </a>

10-29-2007, 08:55 AM

[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;

If you go in overdrive and you want to make the default class changeable you can put that add that as a config key too.