Highlighting an id anchor result?

  • Ian

    (@ianaleksander)


    14 years, 1 month ago

    I’ve got a massive list of books (actually wordpress posts) in text ordered list format.

    https://www.tradereadingorder.com/dc-list/

    I’ve figured out how to get it to display right, generate in the right order, and have the right id numbers. The intention is to be able to direct people to a specific book by sending them a link with that book value:

    https://www.tradereadingorder.com/dc-list/#book-426

    edit: replaced the post id based links with <?php echo $post->post_name;?>/slug based links – just will be less confusing to users, I think. New link:

    https://www.tradereadingorder.com/dc-list/#superman-transformed

    Edit: now https://www.tradereadingorder.com/dc-list/#Superman:%20Transformed

    should go to superman: transformed. For example.

    What I want to do is also highlight that line on the list, and if possible have it show a couple lines down the page instead of right at top. Anyone know how to do this? I found a little script here:

    https://www.webdeveloper.com/forum/showthread.php?t=191971

    but I couldn’t seem to get it to work. Maybe it’s because I put it right into middle of the template instead of the header?

    edit: in case you’re wondering, I link to it like this:

    <?php if ( in_category(1) ){ echo ‘
    post_name; echo ‘”>View in place on the DC Reading Order‘; } ?>

    Seems to be working so far, though I wish I knew how to do that selective styling. still no luck.

    edit: oh damnit! I put it into a “sidebar” widgetized space so I could selectively cache that huge list and save my server a lot of trouble. But then the slug ids stopped generating. Everything else works.. I don’t get it!

    edit again: ok, I got around it kind of by using the_title();. I don’t really like this, because two books might have been published with the same title, but I use the slug to differentiate the entries. Plus links with spaces and punctuation can be wonky. The mixups will be rare, but they could still happen. Anyway, guess it works for now.

    Still hoping for a solution to the original issue though haha

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Ian

    (@ianaleksander)

    Sorry for the copypasta from wordpress reddit – they haven’t been able to help me and I thought someone here might be able to.

    Hey Ian,

    I haven’t seen the site in a while, looking great!

    Anchors link directly to an element ID (notice the similarity to the css selector for ID “#”).

    You’ll want to locate the section of your loop that iterates the list. I’ll assume you’re loop contains the “li” list element (or perhaps just a post div).

    It looks like you’ve given the loop element an ID using $post->post_name. This appears to be generating an HTML-safe character for the dash, messing with your anchor selector. You’re also right that your second approach can lead to syntax errors in trackbacks and permalinking.

    There is an alternative approach of stripping down the permalink to the final directory using the php function basename():

    $slug = basename(get_permalink());

    This would solve your the_title(); issue by allowing you multiple posts with the same title but with unique (and pretty) permalink slugs.

    Once you’ve got the anchors working in the URL, you can change the appearance of the targeted element using the pseudo-class “:target” on the selector.

    In the loop (template file):

    <div class="post" id="<?php $slug = basename(get_permalink()); echo $slug; ?>">
<!-- Loop Content -->
</div>

    In the css:

    .post:target {
/* overrides for the targeted element */
background-color:#ff0000;
color:#ff;
}

    Voila. Note: Your loop might not be a div; it could be just list elements. IDs can be given to a wide variety of elements.

    Support for this pseudo-class is consistent with trends: Support on current versions of all major browsers except IE. There are workarounds out there, but they are not pretty and your code won’t validate (without browser conditionals – ugh). Of course validation vs usability is project specific – so use your best judgment on whether to extend an arm out to “Mammon.”

    Also, there are some great articles out there on pseudo-classes and the powers they hold. One of the biggest uses is changing element appearances changes without javascript.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Highlighting an id anchor result?’ is closed to new replies.