Add Style Based on Page/Directory

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Add Style Based on Page/Directory

thedoctor-2

I am not a expert programmer and had little success with trying this
in php. However I wanted to know if there is a plugin of some sort or
any jquery way that I can add a style for my navigation (the stated
style) for when you are on a page or any page in a folder directory
that class is added and then removed when you are not on that page.

Thanks for any help or suggestions.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Add Style Based on Page/Directory

Sean Allen-5


On Dec 19, 2008, at 9:06 AM, thedoctor wrote:

>
> I am not a expert programmer and had little success with trying this
> in php. However I wanted to know if there is a plugin of some sort or
> any jquery way that I can add a style for my navigation (the stated
> style) for when you are on a page or any page in a folder director

are you trying to change the styling based on location
so that its something like

Menu:

Home
Products
Contact

and if they are in the Products section, it will be styled in an  
'active section' fashion?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Add Style Based on Page/Directory

thedoctor-2

Ya basically

If say I have a page called about.php

I want the navigation to apply the class of "stated" or
"selected" ..so on
This is mainly because my site is using php includes and the
navigation is being imported rather than on each page. So normally I
would manually apply the class.

{Example}
<a href="#"> Home </ a>
<a href="#" class="stated"> About </ a>
<a href="#"> Link 3 </ a>
<a href="#"> Link 4</ a>


I would prefer a php method or a jquery (or both)  method.


On Dec 19, 9:16 am, Sean Allen <[hidden email]> wrote:

> On Dec 19, 2008, at 9:06 AM, thedoctor wrote:
>
>
>
> > I am not a expert programmer and had little success with trying this
> > in php. However I wanted to know if there is a plugin of some sort or
> > any jquery way that I can add a style for my navigation (the stated
> > style) for when you are on a page or any page in a folder director
>
> are you trying to change the styling based on location
> so that its something like
>
> Menu:
>
> Home
> Products
> Contact
>
> and if they are in the Products section, it will be styled in an  
> 'active section' fashion?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Add Style Based on Page/Directory

Sean Allen-5

I dont know if there is a jquery plugin, but it can be done with a  
minimal amount of
javascript.

You would need ids on the element you want to add the styling to.
Find said element in the page and applying the new style(s) is basic  
jQuery 101.

you can use

document.URL

( plain old js, not jquery )

to get the url for the current page and slice and dice it has needed  
using javascript's
string handling to figure out where you are and apply the styling you  
desire.

you then just load that up into a jQuery ready call and away you go...


On Dec 19, 2008, at 9:31 AM, thedoctor wrote:

>
> Ya basically
>
> If say I have a page called about.php
>
> I want the navigation to apply the class of "stated" or
> "selected" ..so on
> This is mainly because my site is using php includes and the
> navigation is being imported rather than on each page. So normally I
> would manually apply the class.
>
> {Example}
> <a href="#"> Home </ a>
> <a href="#" class="stated"> About </ a>
> <a href="#"> Link 3 </ a>
> <a href="#"> Link 4</ a>
>
>
> I would prefer a php method or a jquery (or both)  method.
>
>
> On Dec 19, 9:16 am, Sean Allen <[hidden email]> wrote:
>> On Dec 19, 2008, at 9:06 AM, thedoctor wrote:
>>
>>
>>
>>> I am not a expert programmer and had little success with trying this
>>> in php. However I wanted to know if there is a plugin of some sort  
>>> or
>>> any jquery way that I can add a style for my navigation (the stated
>>> style) for when you are on a page or any page in a folder director
>>
>> are you trying to change the styling based on location
>> so that its something like
>>
>> Menu:
>>
>> Home
>> Products
>> Contact
>>
>> and if they are in the Products section, it will be styled in an
>> 'active section' fashion?
> >


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Add Style Based on Page/Directory

boermans
In reply to this post by thedoctor-2

On Dec 20, 12:31 am, thedoctor <[hidden email]> wrote:
>
> I want the navigation to apply the class of "stated" or
> "selected" ..so on
> This is mainly because my site is using php includes and the
> navigation is being imported rather than on each page. So normally I
> would manually apply the class.

Although not exactly what you are looking for I did something recently
to solve the same problem in a very simple site.
The href of each link in the navigation is compared to the current
url. When they match the <a> is replaced with a <strong>

                $('#nav a[href$='+location.pathname+']').each(function(){
                        $('<strong>'+$(this).html()+'</strong>').appendTo($(this).parent
());
                        $(this).remove();
                });

(Note that this doesn’t work on the home page.)
See it in action and context on the site:

http://kerina.net

The subpages share a common server side include for the navigation. If
I knew how I would have done it in PHP.
As your site is already using PHP I would suggest that would be the
best way to do it rather than rely on JavaScript.




--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Plugins" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-plugins?hl=en
-~----------~----~----~----~------~----~------~--~---