Movies: Selection And Promotions

Simple jQuery demo

by ernestohs

HTML

<div class="movies">
    <ol>
        <li class="movie-list">
            <div class="cover">
                <a  title="Bridesmaids"><img src="http://cps-static.rovicorp.com/2/Open/CinemaSource/Bridesmaids/_derived_png24_120x82_m0/106630r1.png?partner=allrovi.com" alt="Bridesmaids" width="50"></a>
                <a  data-objectid="V   514441" class="play-movie play-overlay sm" title="Watch trailer for &quot;Bridesmaids&quot;"></a>
            </div>
            <div class="info">
                <a  class="title" title="Bridesmaids">Bridesmaids</a>
                <p>                             <a >Paul Feig</a>                                                   </p>
                <p class="genre">                         <a >Romantic Comedy</a>,                                                 <a >Farce</a>                                           </p>
            </div>
        </li>
        <li class="movie-list">
            <div class="cover">
                <a  title="Lovers"><img src="http://cps-static.rovicorp.com/1/adg/cov60/drv200/v241/v24119tipp2.jpg?partner=allrovi.com" alt="Lovers" width="50"></a>
                <a  data-objectid="V    78936" class="play-movie play-overlay sm" title="Watch trailer for &quot;Lovers&quot;" style="display: none; "></a>
            </div>
            <div class="info">
                <a  class="title" title="Lovers">Lovers</a>
                <p>                             <a >Vicente Aranda</a>                                                   </p>
                <p class="genre">                         <a >Erotic Drama</a>                                           </p>
            </div>
        </li>
        <li class="movie-list">
            <div class="cover">
                <a  title="Bride Flight"><img src="http://cps-static.rovicorp.com/2/Open/CinemaSource/Bride%20Flight/071536r1.jpg?partner=allrovi.com" alt="Bride Flight" width="50"></a>
                <a  data-objectid="V   475798"...

CSS

.selected
{
    background-color: blue;
}

.highlight
{
    background-color: yellow;
    opacity: 0.5;
}

.promotion
{
    display: none;
    background-color: red;
    color: white;
    position: fixed;
    top: 0px;
    right: -2px;
}

JavaScript

var promotion = $('.promotion'); // Save Reference
$(".movie-list").mouseenter(function() {
    $(this).addClass('highlight');
}).mouseleave(function() {
    $(this).removeClass('highlight');
});

$(".cover").click(function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected'); // deselect movie
    }
    else {
        $(this).addClass('selected'); // select movie
    }

    if ($('.selected').length >= 5) {
        promotion.fadeIn(); // show promotion
    }
    else if (promotion.is(':visible')) {
        promotion.fadeOut(); // hide promotion
    }
});