Welcome Guest [Log In] [Register]
Add Reply
Kickass CSS:active via PHP
Topic Started: Apr 21 2008, 04:33 AM (173 Views)
bustya
Member Avatar
The Master Bitchslapper
I don't have much time, just thought I'd drop in and post a neat little trick I figured out a while back.

CSS yap

If you've ever attempted to implement the :active pseudo-class then you know it only works when the element is in focus, if you click on anything else on the page, the element will lose focus and the attributes you defined for the active state will be lost. This means the pseudo-class is pretty much useless. Well I have a fix using PHP to simulate a persistent active state.

Ok, first if you didn't know you can give an element more than one class simply by adding a space and the second class to it, you can:

Code: HTML
 

<a class="first second" href="http://www.somewhere.com">a link</a>


...so the link above has two classes, let's say for example in your CSS file you defined them like:

Code: HTML
 

.first{
color:green;
}
.second{
font-weight:bold;
}


So as defined above, the link will not only be green, it'll be bold. Using separate classes like this can help shrink your CSS file when you have a need for some elements to have most of the same attributes as (for example) the first class, but perhaps you need an extra attribute for a particular element in that class, simply give it a second class and be done with it.

Ok, so what does this have to do with the :active pseudo-class and what does any of this CSS have to do with PHP, you might ask? Alright, this is where it gets really cool.

PHP yap

Ok, if you read my "Ultimate Header Add-on back @ evolt" you might be familiar with what I'm about to pull here (I know, I need to post that here for easier access).

Now, order is important here, so this first part should be the first thing on your page:

Code: HTML
 

<?
$thisPage='index';
include("session.php");
include("header.php");
include("menu.php");
?>


In particular, note how $thisPage='index'; comes before include("menu.php");.

Alright, now in your links in menu.php, you do something like this:


Code: HTML
 

<a class="first<?php if ($thisPage=='index'){ echo ' viewing'; }; ?>" href="./index.php">Home</a>


Note: there's a space before 'viewing' in the example above

This works because browsers read from top to bottom. Since you've already told it what "this page equals", the browser knows to add the second class to the link as defined in the if statement, thereby giving it the simulated "active" attribute that the :active pseudo-class fails to deliver when the element loses focus. Pretty cool, huh?

For a live example of this, visit my page and click through the top menu links. That's all I have time for now, I'll try to come back and post my header script. That is: one header for the entire site which changes titles depending on: what page, if the user is logged in or out, who they are and what they're doing.

Edited by bustya, Apr 21 2008, 04:39 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Other · Next Topic »
Add Reply