Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Detect on what page are you with jQuery

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #43454
    VladimirKrstic
    Participant

    Hi folks,

    I need little help with detecting what page user is at so jQuery sets class to different element. This I wish to use for main navigation, so i don’t have to edit html – set/erase class from elements. Can anyone help?

    Thanks.

    #128558
    Senff
    Participant

    What do you want to detect, actually? The page name? Page URL? Filename? The value of the H1 element? It really depends on your page structure how you want to do this, so we’ll need to see your site.

    #128559
    VladimirKrstic
    Participant

    File name I think will be most appropriate like index.html, contact.html…? But URL, page title will be fine too.

    EDIT: and navigation is structured nav/ul/li/a

    #128560
    VladimirKrstic
    Participant

    Is it possible that if a’s href value “index.html” matches file name of the page you are on – “index.html” class is added to a?

    #128561
    JohnMotylJr
    Participant

    @VladimirKrstic,

    Hey, I didn’t have a lot of time cuz i gotta go make dinner lol… But i had to play with something..

    Maybe this will get you on track?

    http://codepen.io/johnmotyljr/pen/ExHJh

    #128566
    VladimirKrstic
    Participant

    Thank you @JohnMotylJr it help me understand a bit how it could be achieved but still I didn’t make it work. :(

    #128569
    JohnMotylJr
    Participant

    @VladimirKrstic,

    you just want to add a class to the link that matches the page?

    #128570
    VladimirKrstic
    Participant

    yup.

    #128572
    JohnMotylJr
    Participant
    #128575
    VladimirKrstic
    Participant

    @JohnMotylJr Thank you man i owe you a drink. Still i had to change one line to make it work. Your code works in Codepen but don’t works in browsers with this line it’s vice versa.

    a = a.substring(a.lastIndexOf(‘/’));

    Thanks again! Cheers!

    #128578
    CrocoDillon
    Participant

    Or as a one-liner (well, after `pathname` that is…): `$(‘[href*=”‘+pathname+'”]’).addClass(‘selected’);` ;)

    #128579
    JohnMotylJr
    Participant

    @VladimirKrstic of course man, that’s why these forums ROCK!


    @CrocoDillon
    FTW!! Good add man, i’ve never had to do that before so its nice to see your implementation. Thanks!

    #128580
    CrocoDillon
    Participant

    Any time :)

    #128582
    JohnMotylJr
    Participant

    @VladimirKrstic, @CrocoDillon, So i was browsing the snippets section and just realized that Chris Coyier posted a snippet for this EXACT situation lol… Figured i would provide the link for future reference:

    Add Active Navigation Class Based on URL

    #128584
    CrocoDillon
    Participant

    Lol indeed! Almost the same solution as well ;D

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.