Topic: a:active or "How to let users know where they are" $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27406" title="Pages that link to Topic: a:active or &quot;How to let users know where they are&quot;" rel="nofollow" >Topic: a:active or "How to let users know where they are"\$

Author	Thread
CPrompt Maniac (V) Inmate From: there...no..there..... Insane since: May 2001	posted 01-28-2006 23:43 Just thought I'd share this with everyone. I wanted to make the links on a site I did, show something different according to which page the user was viewing. There is the a:active but it works kind of clunky with different browsers. So here is what I did. I pull in the different pages with a php->Switch statement. (I've been a fond user of this since reading WarMage's tut at Guru's) In my index.php page I have statements like this: code: switch ($_GET['link']){ /for the about page/ case 'about': $page="pages/aboutus.php"; $title="About Us"; break; case 'contact': $page="pages/contactus.php"; $title="Contact Us"; break; default: $page = "pages/digital.php"; $title = "Home"; } I then added to each one of these pages another variable, so I have this: code: switch ($_GET['link']){ case 'about': $page="pages/aboutus.php"; $title="About Us"; $bodyLink="about"; break; case 'contact': $page="pages/contactus.php"; $title="Contact Us"; $bodyLink="contact"; break; default: $page = "pages/digital.php"; $title = "Home"; $bodyLink="home"; } Now with that, I add to my index.php page this to the body tag: code: <body class=" <? echo $bodyLink ?> " > For the links that are going to have the different background, I have something like this as my menu: code: <div id="leftMenu"> <ul> <li><a accessky="1" class="l1" href="/about/">About Us</a></li> <li><a accessky="2" class="l2" href="/contact/">Contact Us</a></li> </ul> </div> I am also using .htaccess to mask the links and make those purty URL's Lastly, in the CSS sheet I have this : code: body.about #leftMenu a.l1, body.contact #leftMenu a.l2{ background-image:url(../imgs/active.jpg); color:#fff; } Now, what is going to happen is, when the user clicks on the "About Us" link, it pulls in the page for "About Us" and it also adds the class "about" to the body tag. The CSS reads this and changes the link background to the "active.jpg" that is in the "imgs" directory. Just thought I'd share this with you. Not sure if anyone can use it but hey...it's here Later, C:\ (Edited by CPrompt on 01-28-2006 23:45)
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 01-29-2006 00:17 quote: There is the a:active but it works kind of clunky with different browsers. A link has the :active pseudo class while it's loading, not if it points to the current URL (Edited by poi on 01-29-2006 00:22)
mas Maniac (V) Mad Librarian From: the space between us Insane since: Sep 2002	posted 01-29-2006 09:51 nice trick, dude here is another way to do this - does more or less the same i think http://www.alistapart.com/articles/keepingcurrent
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 01-29-2006 12:09 Check SuperfluousBanter: Navigation Matrix Reloaded. Basically it does the same thing as you, but he uses a single image for the whole navigation thus being even more cache friendly.
CPrompt Maniac (V) Inmate From: there...no..there..... Insane since: May 2001	posted 01-29-2006 16:02 quote: poi said: quote:There is the a:active but it works kind of clunky with different browsers.A link has the :active pseudo class while it's loading, not if it points to the current URL (Edited by poi on 01-29-2006 00:22) well I did screw up on that. The active is kind of like a "mouse-down" efffect I guess. There is the a:focus which works in some browsers but not others. Mas: that is basically the same thing that I am doing but you still have to switch the class of the link acording to the page they are on. it was just easier for me to do with the body tag I can't get the SuperluousBanter page to load But I love the name Later, C:\

Topic: a:active or "How to let users know where they are"\$

Author

Thread

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted 01-28-2006 23:43

Just thought I'd share this with everyone. I wanted to make the links on a site I did, show something different according to which page the user was viewing. There is the a:active but it works kind of clunky with different browsers. So here is what I did.

I pull in the different pages with a php->Switch statement. (I've been a fond user of this since reading WarMage's tut at Guru's)

In my index.php page I have statements like this:

code:

switch ($_GET['link']){
     /*for the about page*/
     case 'about':
		$page="pages/aboutus.php";
		$title="About Us";
		break;
		
	case 'contact':
		$page="pages/contactus.php";
		$title="Contact Us";
		break;
		
	default:
	    $page = "pages/digital.php";
	    $title = "Home";
}

I then added to each one of these pages another variable, so I have this:

code:

switch ($_GET['link']){

     case 'about':
		$page="pages/aboutus.php";
		$title="About Us";
                $bodyLink="about";
		break;
		
	case 'contact':
		$page="pages/contactus.php";
		$title="Contact Us";
                $bodyLink="contact";
		break;
		
	default:
	    $page = "pages/digital.php";
	    $title = "Home";
            $bodyLink="home";
}

Now with that, I add to my index.php page this to the body tag:

code:

<body class=" <? echo $bodyLink ?> " >

For the links that are going to have the different background, I have something like this as my menu:

code:

<div id="leftMenu">
<ul>
        <li><a accessky="1" class="l1" href="/about/">About Us</a></li>
        <li><a accessky="2" class="l2" href="/contact/">Contact Us</a></li>
</ul>
</div>

I am also using .htaccess to mask the links and make those purty URL's

Lastly, in the CSS sheet I have this :

code:

body.about #leftMenu a.l1,
body.contact #leftMenu a.l2{
	background-image:url(../imgs/active.jpg);
	color:#fff;
}

Now, what is going to happen is, when the user clicks on the "About Us" link, it pulls in the page for "About Us" and it also adds the class "about" to the body tag. The CSS reads this and changes the link background to the "active.jpg" that is in the "imgs" directory.

Just thought I'd share this with you. Not sure if anyone can use it but hey...it's here

Later,

C:\

(Edited by CPrompt on 01-28-2006 23:45)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 01-29-2006 00:17

quote:
There is the a:active but it works kind of clunky with different browsers.

A link has the :active pseudo class while it's loading, not if it points to the current URL

(Edited by poi on 01-29-2006 00:22)

mas
Maniac (V) Mad Librarian

From: the space between us
Insane since: Sep 2002

posted 01-29-2006 09:51

nice trick, dude
here is another way to do this - does more or less the same i think http://www.alistapart.com/articles/keepingcurrent

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 01-29-2006 12:09

Check SuperfluousBanter: Navigation Matrix Reloaded. Basically it does the same thing as you, but he uses a single image for the whole navigation thus being even more cache friendly.

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted 01-29-2006 16:02

quote:

poi said:

quote:There is the a:active but it works kind of clunky with different browsers.A link has the :active pseudo class while it's loading, not if it points to the current URL (Edited by poi on 01-29-2006 00:22)

well I did screw up on that. The active is kind of like a "mouse-down" efffect I guess. There is the a:focus which works in some browsers but not others.

Mas: that is basically the same thing that I am doing but you still have to switch the class of the link acording to the page they are on. it was just easier for me to do with the body tag

I can't get the SuperluousBanter page to load But I love the name

Later,

C:\

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: a:active or "How to let users know where they are"

Insert Slimies »

Insert UBB Code »

Topic: a:active or "How to let users know where they are" $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27406" title="Pages that link to Topic: a:active or "How to let users know where they are"" rel="nofollow" >Topic: a:active or "How to let users know where they are"\$