Search code examples
jqueryhtmlcsslistviewhighlighting

How to Highlight a list item after user clicks on link

I am currently setting up an IRC logger, and I'm having some difficulty with trying to highlight lines of the chat log when the user clicks on the date link for the line in the chat log. The whole code is in php/html/css/jquery and connects to a mysql database.

However, my problem is that I'm not quite sure how to highlight the line of the link that was clicked right on the page when the jquery code moves the selected line up to the top of the page.

So here's the code below is running live here: http://openkore.info/irc-log/#msg2862

Note that when you go to an anchored list, it does highlight the message line, just not when the user is clicking on other links on the same page while the jquery moves the messages around.

// content *******************************************
echo '<div id="container-wrap">';
echo '<div id="container">';
echo '<div id="content">';
echo '<ol id="log">';
if($sql) while($row = mysql_fetch_array($res, MYSQL_ASSOC)){
    echo '<li id="msg'.$row['id'].'" class="'.$row['type'].'">';
    echo '<div class="anchor" id="msg'.$row['id'].'"><a href="#msg'.$row['id'].'" class="time" title="'.$row['d'].'">';
    // give screenreaders a hint early enough which line includes a real message
    if($row['type'] == 'public') echo '<span class="a11y">message at </span>';
    echo '<time datetime="'.$row['d'].'T'.$row['t'].'">'.$row['t'].'</time>';
    echo '</a></div>';
    echo '<dl>';
    if($row['type'] == 'public'){
        echo '<dt style="color:#'.substr(md5($row['user']),0,6).'" class="user">'.htmlspecialchars($row['user']).'</dt>';
    }else{
        echo '<dt class="server">'.$row['type'].'</dt>';
    }
    $msg = htmlspecialchars(  $row['msg']);
    $msg = preg_replace_callback('/((https?|ftp):\/\/[\w-?&;#~=\.\/\@%:]+[\w\/])/ui',
                                 'format_link',$msg);

    echo '<dd>';
    if(substr($msg,0,3) == '/me'){
        $msg = '<strong>'.htmlspecialchars($row['user']).substr($msg,3).'</strong>';
    }
    echo $msg;
    echo '</dd>';
    echo '</dl>';
    echo '</li>';

}
echo '</ol>';

echo '</div>';


<!-- JQuery Plugin -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- JQuery Scrolling to Selected Line Plugin -->
<script>
$(document).ready(function() {

    // Click event for any anchor tag that's href starts with #
    $('a[href^="#"]').click(function(event) {

        // The id of the section we want to go to.
        var id = $(this).attr("href");

        // An offset to push the content down from the top.
        var offset = 75;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
    });
});
</script>

And here's the CSS that goes with it:

@media screen {

/* basic styles
********************************************************************/

html {
    overflow-x: auto;
    overflow-y: scroll;
    margin: 0;
}
html,
body {
    background: url(bg.png) repeat;
    color: #333;
    padding: 0;
}
body {
    margin: 1em 2em;
    font: normal 100%/1.4 Frutiger, Calibri, "Myriad Pro", Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* §fsize §font */
    -webkit-text-size-adjust: 100%;
}

#header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-style:solid;
    border-width:1px;
    z-index:333;
}

#header-container {
    height: 70px;
    background-color:#282828;
    opacity: 1.0;
}

#header {
    width: 940px;
    margin: 0 auto;
    position: relative;
}

#container-wrap {
    left: -20;
    width: 100%;
    z-index: 1;
}

#container {
    width: 940px;
    margin: 0 auto;
    overflow: auto;
    padding: 70px 0 40px;
}

#content {
    float: left;
    width: 625px;
}

#sidebar {
    position: fixed;
    width: 275px;
    float: right; 
    margin-left: 650px;
}

#footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;    
    border-style:solid;
    border-width:1px;
    z-index: 1;
}

#footer-container {
    height: 20px;
    background-color:#282828;
    opacity: 1.0;
}

#footer-content {
    color: #FFAC1C;
    width: 940px;
    margin: 0 auto;
    position: relative;
    top:-10px;
}

a.footer {
    background-color:282828;
}
a.footer:link,
a.footer:visited {
    text-decoration: none;
}
a.footer:link {
    color: #FFAC1C;
}
a.footer:visited {
    color: #FFAC1C;
}
a.footer:link:hover,
a.footer:visited:hover,
a.footer:link:focus,
a.footer:visited:focus,
a.footer:link:active,
a.footer:visited:active {
    background-color:#282828;
    text-decoration: underline;
    outline: none;
}
a.footer:link:active,
a.footer:visited:active {
    color: #FFAC1C;
}

a.nav:hover,
a.nav:visited:active,
a.nav:link:hover{
    text-decoration: underline;
    outline: none;
    background-color:#B2FF99;
}

a.nav:link:active{
    background-color:red;
}

/*
.anchor{
  display: block;
  height: 70px; <!--same height as header-->
  margin-top: -70px; <!--same height as header-->
  visibility: hidden;
}
*/

/*____________ headings ____________*/

h1,
h2,
h3 {
    font: helvetica;
    font-weight: bold;
    line-height: 1.2;
    color: #E4E4E4;
    background-color: inherit;
    padding: 0;
    clear: both;
}

h1 {
    font-size: 2.25em;
    margin: 0;
}
h2 {
    font-size: 1.5em;
    margin: 0 0 0.666em;
    color: #000;
}
h2.subtitle {
    font-size: 1.1em;
    margin: 0 0 0.666em;
    color: #FFAC1C;
}
h3 {
    font-size: 1.125em;
    margin: 0 0 0.888em;
    color: #000;
}


/*____________ basic margins and paddings ____________*/

p,
ul,
ol {
    margin: 0 0 1.4em 0; /* bottom margin = line-height */
    padding: 0;
}

div,
dl {
    margin: 0;
    padding: 0;
}


/*____________ lists ____________*/

li,
dd,
dt {
    padding: 0;
    margin: 0;
    list-style: none;
}
dt {
    font-weight: bold;
}

li li {
    font-size: 100%;
}


/*____________ links ____________*/

a {
    background-color: inherit;
}
a:link,
a:visited {
    text-decoration: none;
}
a:link {
    color: #000;
}
a:visited {
    color: #333;
}
a:link:hover,
a:visited:hover,
a:link:focus,
a:visited:focus,
a:link:active,
a:visited:active {
    text-decoration: underline;
    outline: none;
}
a:link:active,
a:visited:active {
    color: #000;
}


/*____________ forms ____________*/

form {
    display: inline;
    margin: 0;
    padding: 0;
}
label {
    vertical-align: middle;
    cursor: pointer;
}
input {
    font: inherit;
    color: inherit;
    line-height: normal;
    margin: 0;
    vertical-align: middle;
    padding: .1em;
}
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/*____________ misc ____________*/

abbr {
    cursor: help;
    border-bottom: 1px dotted;
    font-style: normal;
}

/* hide something in an accessible way */
.a11y {
    position: absolute;
    left: -99999px;
    top: -99999px;
    font-size: 0;
    overflow: hidden;
    display: inline;
}


/* irclogger-specific styles
********************************************************************/

a.skip {
    position: absolute;
    top: 0;
    right: 2em;
}

footer {
#    border-top: 1px solid #ccc;
    text-align: right;
    padding: .7em 2em .1em;
    margin: 0 -2em;
    display: block;
}


/*____________ navigation below ____________*/

ul {
    overflow: hidden;
}
ul li {
    float: left;
}

ul.archive {
    margin-bottom: .9em;
}

ul.archive li a {
    display: inline-block;
    padding: .3em .5em;
    border: 1px solid #ccc;
    margin: 0 .4em .7em 0;
    border-radius: 3px;
}

ul.archive li.today {
    clear: left;
}

p.hint {
    margin: -.7em 0 .7em;
}

ul.filters li {
    margin-right: 1.5em;
}

ul.filters label,
ul.filters input,
ul.filters small {
    display: block;
}


/*____________ the log ____________*/

#log {
    margin: 0 -2em 1.4em;
#    border: solid #ccc;
    border-width: 1px 0;
    padding: 1em 2em;
}

#log li {
    opacity: .5;
}
#log li.public {
    opacity: 1;
}
#log a.time {
    color: #333;
}


} /* /@media */

/*____________ for screen and print ____________*/

#log li {
    clear: left;
    padding-left: 11em;
}

#log a.time {
    float: left;
    margin-left: -11em;
}

#log dt {
    font-weight: normal;
    margin-left: -6em;
    float: left;
    width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

#log dd {
    padding-left: .2em;
}

#log .public dt {
    font-weight: bold;
}

/* highlight targeted line */
li:target {
    background-color: #ff9;
}

/*____________ for smaller screens ____________*/

@media only screen and (max-width: 50em) {

body {
    margin: 1em .5em .2em;
}

a.skip {
    right: .5em;
}

#log {
    margin-left: -.5em;
    margin-right: -.5em;
    border: solid #ccc;
    border-width: 1px 0;
    padding-left: .5em;
    padding-right: .5em;
}

#log li {
    padding-left: 0;
}
#log a.time {
    min-width: 4.5em;
    margin-left: 0;
}
#log dt {
    margin-left: 0;
    width: auto;
    float: none;
}
#log dd {
    margin: -.2em 0 .2em 4.5em;
    padding-left: 0;
}


footer {
    margin-left: -.5em;
    margin-right: -.5em;
    padding-left: .5em;
    padding-right: .5em;
}


h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.125em;
    margin: 0 0 0.888em;
}
h3 {
    font-size: 1em;
    margin: 0 0 1.0em;
}


} /* /@media */


/*____________ print ____________*/

@media print {

a.skip,
.a11y,
#nav {
    display: none;
}

footer {
#    border-top: 1px solid;
}

#log {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

#log li {
    display: none;
    margin-left: 0;
}
#log li.public {
    display: block;
}

#log a.time {
    color: inherit;
    text-decoration: none;
}


} /* /@media */
Solution

  • Consider giving each comment a unique id with like <div id="message1001">...</div>

    Then, make your links target the correct id using the hash tag <a href="#message1001">...</a>

    You can then set up a simple css rule to style anything that is linked to using the pseudo selector :target.

    a:target {
    //style code
}

    It doesnt matter where the div is moved to on the page.

    Hope that helps.