view icon(ex. eye icon ) on click of a link

Question

I want to display an eye icon after click on a link. For eg. I have a job listings and I saw one post and clicked to view details after that it should show an icon that tells me that I visited the post already and I have to store the viewed posts in a collection and retrieve. I have tried to show an eye icon on click but when I refresh the page it's not displaying. How to fix it? Can anyone help me out with that. Thanks in advance.

Here is the sample HTML that I am trying

<div id="search"><h2><a href="#">Clinical Psychologist </a><span class="job-type part-time">Part Time</span></h2></div>

   <div id="eyeIcon">
    <span class="glyphicon glyphicon-eye-open"></span>
     </div>

And JS

$(document).ready(function(){
$("#eyeIcon").hide();
    $("#search").click(function(){
        $("#eyeIcon").show();
    });

 });

score 2 · Answer 1 · answered Jul 28 '16 at 09:54

2

Your question has not an simple jquery answer. Javascript variables or changes by javascript in your DOM (html) are not stored. you need a way to store those items this can be done with multiple ways

In the cookie
In the localstorage
In a database on a server (i would prefer this) in this case you would need ajax

And you need to receive these values on the load of your website and then show the icon on each item stored in the cookie/localstorage/database (your choice)

I hope this will help you :)

answered Jul 28 '16 at 09:54

Ricardo van Laarhoven

719
8
22

I do prefer 3rd one. My question is how to fix the icon though the page is refreshed? For me the the icon is not displaying when I refresh the page. It should show like in the youtube ..We see "watched" text if we view the video. I am looking like that. It's new for me..Can you help me out?? – sailu Jul 29 '16 at 05:50
I have a collection to store the posted jobs. So user clicks to see details of one post it should display an icon to the user saying that u viewed the post. Hope u understand my question. – sailu Jul 29 '16 at 06:03

score 0 · Answer 2 · answered Jul 28 '16 at 09:57

I haven't experimented with the :visited CSS selector, but you could start there. It looks like there are specific security concerns that restrict it to a limited set of properties, but you may be able to "hack" a solution using color to show the icon perhaps.

https://developer.mozilla.org/en/docs/Web/CSS/:visited

This JSFiddle illustrates the idea: https://jsfiddle.net/0ryo6sod/

score 0 · Answer 3 · edited May 23 '17 at 11:58

I think you need something like "a:visited" then based on that result set the icon. This is a CSS pseudo check, but this is a security risk for most browsers see Google chrome a:visited background image not working. You can maybe have something like this:

JAVASCRIPT

 $("#search").click(function(){
    if ($("a:visited")) {
        //hide link
        $("#eyeIcon").show();
    } else {
        //show link 
        $("#eyeIcon").hide();
    }
});

Not tested

view icon(ex. eye icon ) on click of a link

3 Answers3