CODEWITHSUNDEEP
javascriptcss
nubteens
nubteens

Reputation: 6128

How to highlight a row in a table on certain occasions

I am not familiar with css or javascript and I am wondering how to have a notification highlight similar to the case when a person commented on a Facebook post, and upon clicking, you will be directed to the said comment with temporary highlight.

Thanks in advance

Upvotes: 1

Views: 350

Answers (2)

Gershom Maes
Gershom Maes

Reputation: 8131

It looks like you have a few problems you need to solve. I'll walk you through the logic behind each problem. Some of these problems already have solutions posted online, so in those cases I've linked you to the appropriate pages.

1) Respond to a click on an element

http://clubmate.fi/detect-click-with-pure-javascript/

2) Scroll to a specific part of the page

Smooth scroll to specific div on click

3) Highlight an element

This involves changing attributes of an html element, for example the background color. This can be done by changing the class with javascript, and using css to style the element differently when it has the right class

CSS:

.element {
    background-color: #0000ff; /* A blue background by default */
}
.element.highlighted {
    background-color: #ff0000; /* A red background when the element is highlighted */
}

JS:

document.getElementsByClassname('element')[0].setAttribute('class', 'element highlighted');

Now you just have to run that line of javascript at the appropriate time (after the scrolling has ended - step 2 should give insight on how to do this)

4) Remove the highlighting after a delay

Take advantage of javascript's setTimeout function to remove the highlight class after a delay:

JS:

setTimeout(function() {
    document.getElementsByClassname('element')[0].setAttribute('class', 'element'); // Replace "element highlighted" with just "element"
}, 1000); // 1000 means a one-second delay

Upvotes: 2

blex
blex

Reputation: 25634

You can use the CSS3 animation property. Just make sure to add the -webkit- vendor prefix for it to work in all major browsers. The vendor prefixes you need for other CSS3 properties can be found at caniuse.com.

The trick is to add a special class to the element you want highlighted, and applying the animation to that class with CSS.

Try it:

.post{
    padding: 1em;
    margin: .2em;
    background: #ffffff;
    border: 1px solid #eceded;
}

.post.highlighted {
    -webkit-animation: highlight 6s ease;
    animation:  highlight 6s ease;
}

@-webkit-keyframes highlight {
    from { background: #ddddff }
    to   { background: #ffffff }
}
@keyframes highlight {
    from { background: #ddddff }
    to   { background: #ffffff }
}
<p class="post">This is just a regular post</p>
<p class="post highlighted">But this one's new!</p>

Upvotes: 3

Related Questions