SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need to put a link before a counter element

    I'm creating a large index of an online manual and am using CSS counters to put the whole thing in an outline kind of format. That part is working great. The design/UI issue at this point is that the index is so long that it's unwieldy - not at all easy to find what you're looking for. What I'd like is to be able to have some of the inner sections of the outline closed so the user can open them if they need to see the details of that area.

    A screen shot of just a bit of the index is here: cssCounterExample.png

    It goes on and on after that - which is the issue. I was thinking maybe keep the first and second level elements open (the Roman numerals and the capital letters) but close everything else. Ideally, it seems like the link to allow the user to open closed sections should be to the left of those capital letters that have child items - but I don't have a clue how to put them there since the capital letter is generated content. Is there a way to do that? Or alternatively, does anyone see a better way to do this?

    I've created a fiddle for this - didn't include most of the styles, just the ones pertaining to the counters: http://jsfiddle.net/Bn7De/1/

    So in the fiddle, what I'm looking for is a way to put a link before the two parts that say "A. Your Clients' Charts" so that we can close those sections. Or your other ideas for how to solve the issue.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,266
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    You'll need to add some javascript to do what you want.

    Here's a basic example you can look at - there's some styling issues, but the basic behavior is right.

    http://www.snyderplace.com/demos/collapsible.html
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - but the javascript isn't the part I'm concerned with right now. I'm trying to figure out how to put open/close toggle links in where I want them - small little icons or text (maybe just a +) beside the capital letters that are being generated by the CSS.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I should clarify - I want the icons BEFORE the capital letter (i.e., to the left of it), not after. I'm not worried about how to add the javascript to the link - I just don't know how to put the link itself (image, a tag, whatever) to the left of the generated content. It's like I need a "before" the "before" - and the 'before the before' is going to need some javascript added, maybe hold an image, etc. Is there any way to do this?

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    have you used your ':after' element yet? you could use the :after and position:absolute; to move the icon into place.

    hope that helps

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now THAT might work! Can I include code with the generated CSS? Like if I want to put something like this in the :after element? Is there a way to do that?

    Code:
    <img src="_images/icons/show.png" class="noDisplay" onclick="showHidesection(this, 'show', 'sec_1')" alt="Hide this section" />

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or maybe just put it in the HTML after the element and use absolute positioning. I was so sure this was hard that I hadn't considered straightforward answers. : )

    But I'd still like to know if it's possible with content generation just out of curiosity - that's cool stuff.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Now THAT might work! Can I include code with the generated CSS? Like if I want to put something like this in the :after element? Is there a way to do that?
    Afraid not. You cant use : pseudo-elemnts with .js, they don't have an on click event.

    If you had hard coded image tag, as in that last snippet yes you can position it anyway you want with AP. But if you do that

    #1 the image will become part of the content and not the style.
    #2 I question how semantic your mark up would be as the only tag that can go DIRECTLY inside a UL/OL is LI

    but if you were going to use .js for this why not have the .js generate an element before the text node with a pre attached onclick event?

  9. #9
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not have the .js generate an element before the text node with a pre attached onclick event?
    Because I didn't know that was possible. : )

    I'm the CSS and HTML person. I'll talk to the Javascript guys. That may be the best solution.


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
  •