CODEWITHSUNDEEP
jquery
st4ck0v3rfl0w
st4ck0v3rfl0w

Reputation: 6755

jQuery: Gmail Star?

I was wondering if anyone had any good tutorials around creating a gmail inbox star (favorite) ?

EDIT:

I guess I want to create something just like the stackoverflow star or gmail inbox star. I have a set of list items that i've added several controls to. One being a checkbox (for archiving, or batch deleting) and another I have a placeholder checkbox for favoriting. I'm just curious as to what the best approach is for making it snazzy with jquery.

Upvotes: 6

Views: 4595

Answers (5)

Pradeep Mahdevu
Pradeep Mahdevu

Reputation: 7663

I made it using jquery and font-awesome, Will make an angular control and post it.

Here is the jsfiddle

<label>
        <input type="checkbox" checked /><i class="icon-fixed-width icon-star"></i> One
   </label>

Upvotes: 0

Jason
Jason

Reputation: 52533

HTML:

<div id="[item id, probably a number]">
    <p><a href="javascript:" class="star">Favorite Me!</a></p>
</div>

CSS (use an image sprite for star):

.star {
     text-indent: -5000px;
     display: block;
     background: transparent url(../images/star.png) [coords for empty star];
     height: [height of star];
     width: [width of star];
}

.star.favorited {
     background-position: [coordinates for favorited star];
}

jQuery:

$(function() { 
    $('star').click(function() {
        var id = $(this).parents('div').attr('id');
        $(this).toggleClass('favorited');
        $.post('/yourUpdateUrl', 
               {'favorited': $(this).hasClass('favorited'), 'id': id},
                  function(data) { 
                     //some sort of update function here
                  });
         });
     });
});

Process on your backend how you will. Probably return how many favorites there are to update the page. Easy.

Upvotes: 13

maček
maček

Reputation: 77786

I'm assuming you want less of a "rating" system (as mentioned in the other answers) and more of a "add this to favorites" system?

Something like this should get you started in the right direction. Others, feel free to chime in with other best-practices if you have them.

foo.html

<html>
  <head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.make_favorite.js" type="text/javascript"></script>
    <script type="text/javascript">  
      $(document).ready(function(){
        $('.favorite').make_favorite();
      });
    </script>
  </head>
  <body>

    <a href="#article-15" class="favorite">
      <img src="star.gif" alt="Make it a favorite!" />
    </a>
    <a href="#image-12" class="favorite">
      <img src="star.gif" alt="Make it a favorite!" />
    </a>

  </body>
</html>

jquery.make_favorite.js

(function($){
  $.fn.make_favorite = function(){

    var callback = function(response){
      console.log(response);
    };

    return this.each(function(){

      $(this).click(function(){
        var params = {
          item_type:  $(this).attr('href').match(/\w+/)[0],  // 'article'
          item_id:    $(this).attr('href').match(/\d+/)[0]   // 15
        };

        $.post('/favorite.php', params, callback, 'json');

        // stop event propagation
        return false;
      });
    });
  };
})(jQuery);

favorite.php

<?php

// make_favorite function
function make_favorite($item_type, $item_id){
  return mysql_query(
    sprintf("insert into favorites (user_id, item_type, item_id) values (%d, '%s', %d);", $_SESSION['user_id'], $item_type, $item_id)
  );
}

// set header
header('Content-type: application/json');

// ensure to cleanse these inputs
$item_type = $_POST['item_type'];
$item_id = $_POST['item_id'];

if(make_favorite($item_type, $item_id)){
  $response = array('ok' => true, 'message' => 'Huzza!');
}
else {
  $response = array('ok' => false, 'message' => mysql_error());
}

// the magic?
echo json_encode($response);

?>

Upvotes: 5

ryanulit
ryanulit

Reputation: 5001

Pretty much you want two different images of a star. One image is the plain white star and the other is the yellow (or whatever color) star that indicates it has been favorited. On the click event of the image, you just check which image is the src and then change it accordingly to match the necessary status of favorited or not. Then you run an ajax call to actually save the status to the database.

Upvotes: 1

AdmSteck
AdmSteck

Reputation: 1751

Here is an article explaining how to build a star rating system with jquery and ASP.Net MVC. It may be helpful.

Upvotes: 1

Related Questions