SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add "skip to content" anchors to links dynamically via CSS

    In each of my pages, just above the main content block, I have a named anchor item like so:

    HTML Code:
    <a id="jump"></a>
    My site's css contains a media query that resets styles when the browser width is less than 770 (iPad Portrait). In order to save the mobile user having to scroll past my top menu links, I'd like to insert css into this query branch so that all my main site links are automatically appended with a reference to that anchor like so:

    HTML Code:
    <a href="about-us/#jump">About Us</a>
    Can I do this with generated content via CSS?

    I tried this but its not what I'm after:

    Code:
    .menu.nav a[href]:after {content:'#jump'; }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Nope it's not possible with CSS. Javascript, yes, but CSS can't dynamically change the HTML .

    I don't know if you know what :after pseudo classes do. Basically with yoru code it creates the <span> element below

    <a href="#jump">text<span></span></a>


    :before does the span BEFORE the text. Content:""; will put text in there.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan. I appreciate the help.

    I suppose this should go into the javascript section then.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,447
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    OK - moved as requested.
    Don't serve your porridge and then go out for a walk.

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    How bout this...it will be a much better for accessibility if you put it directly into the HTML then hide it with CSS for desktop users...Now you are no relying and hoping the user's mobile browser supports or had Javascript enabled.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    How bout this...it will be a much better for accessibility if you put it directly into the HTML then hide it with CSS for desktop users...Now you are no relying and hoping the user's mobile browser supports or had Javascript enabled.
    That works for the named anchors inside the content. However, the nav links will need to be hardcoded with the anchors, no?

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    What? I'm not sure I follow...
    All you need is one link at the very top that says "Skip to content".
    Done.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •