View Single Post
  #1  
Old 12th February 2014, 22:50
mat22 mat22 is offline
Senior Member
 
Join Date: Jun 2009
Latvia
Posts: 119
Default Movie poster hover
Hello!

So, I have this page "Movies" where I put all new movies that come out. I wanted to update it a bit and make so some hover effects happend when I put my mouse on movie poster.
Everything works fine but there's a problem with the last movie cover. Hover effect doesn't work for it. Been looking at the code for 2 days now and can't figure it out myself.
I added filmas.php which is the page where the movies are shown and hover effect javascript file. And I also added a picture where you can see problem. First 2 posters are how they look when I don't have mouse on them, 3rd is with mouse and last one is the one that doesn't work.

Movies.php
Code:
<?
require_once("include/bittorrent.php");
dbconn();
loggedinorreturn();

error_reporting(0);

/* --- Ieslēdzam, ja gribam izvēlēties gadus --- */
$where = ""; //Default
if(isset($_GET["year"]))
{
    if($_GET["year"] == 'all')
    {
        $where ='';
    }
    else
    {
        $where = 'WHERE year = 20'. $_GET["year"];
    }
}
/* --- End --- */


$res1 = mysql_query("SELECT COUNT(*) FROM premieres " . $where); 
/* --- Aizvietojam ar $res1 = mysql_query("SELECT COUNT(*) FROM premieres"); ja negribam gada izvēli --- */


$row1 = mysql_fetch_array($res1);
$count = $row1[0];
$limit = 16;
list($pagertop, $pagerbottom, $limit) = pager($limit, $count, "/filmas.php?", array('nopage' => true));

stdhead($tracker_lang['movies']);

?>
<style>
.wrapper { white-space: nowrap; }
.wrapper .field { 
    width: 175px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}
.wrapper .field:hover { 
    position: relative;    
    overflow: visible; }
.wrapper .field span { background: #ffffff; }
</style>
<script src="js/glossy.js" language="javascript" type="Text/JavaScript"></script>
<script src="http://www.filebitz.org/js/jquery.contenthover.js" language="javascript" type="Text/JavaScript"></script>
<?

/* --- Lai ieslēgtu gada izvēli --- */
if(get_user_class() >= UC_MODERATOR){
print("<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>
<td class='block' width='14' align='left'><img src='themes/".$ss_uri."/images/mala_kreisaa.png' width='14' height='24'></td>
<td class='block' width='100%' align='center' valign='middle' background='themes/".$ss_uri."/images/vidus.png'>");
print("<a href=\"addfilmas.php\">Pievienot jaunu filmu</a></td>
<td class='block' width='15' align='right'><img src='themes/".$ss_uri."/images/mala_labaa.png' width='14' height='24'>
</td></tr>"); }
print("<table width=\"100%\" class=\"main\" cellpadding=\"4\">");
print("<tr><td>");
print("<form method=\"get\" action=\"filmas.php\"><p align=\"center\">".$tracker_lang['gads_izvele']."&nbsp;<select name=\"year\">
<option value=\"all\">".$tracker_lang['visi']."</option>
<option value=\"00\">2000</option>
<option value=\"01\">2001</option>
<option value=\"02\">2002</option>
<option value=\"03\">2003</option>
<option value=\"04\">2004</option>
<option value=\"05\">2005</option>
<option value=\"06\">2006</option>
<option value=\"07\">2007</option>
<option value=\"08\">2008</option>
<option value=\"09\">2009</option>
<option value=\"10\">2010</option>
<option value=\"11\">2011</option>
<option value=\"12\">2012</option>
<option value=\"13\">2013</option>
<option value=\"14\">2014</option>
<option value=\"15\">2015</option>
<option value=\"16\">2016</option>
<option value=\"17\">2017</option>
<option value=\"18\">2018</option>
<option value=\"19\">2019</option>
<option value=\"20\">2020</option>
</select>&nbsp;&nbsp;<input class=\"btn\" type=\"submit\" value=\"".$tracker_lang['sp_gatavs']."\" /></p></form>");
print("</td></tr>");
print("</table>");
/* --- End --- */

print("<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>
<td class='block' width='14' align='left'><img src='themes/".$ss_uri."/images/mala_kreisaa.png' width='14' height='24'></td>
<td class='block' width='100%' align='center' valign='middle' background='themes/".$ss_uri."/images/vidus.png'><font class='block-title' valign='bottom'><strong>".$tracker_lang['new_movies']."</strong></font></td>
<td class='block' width='15' align='right'><img src='themes/".$ss_uri."/images/mala_labaa.png' width='14' height='24'>
</td></tr>");
print("<table width=\"100%\" class=\"main\" cellpadding=\"4\">");
print("<tr>");

$res = mysql_query("SELECT premieres.id, premieres.name, premieres.year, premieres.genre, premieres.imdb, premieres.imdb_rating, premieres.uploaded, premieres.url, premieres.poster, premieres.owner, premieres.ori_name, users.username, users.class FROM premieres LEFT JOIN users ON premieres.owner = users.id $where ORDER BY year DESC $limit");
if(mysql_num_rows($res) > 0){
while($arr = mysql_fetch_array($res))
{
$id = $arr['id'];
$name = $arr['name'];
$ori_name = $arr['ori_name'];
$year = $arr['year'];
$genre = $arr['genre'];
$imdb = $arr['imdb'];
$imdb_rating = $arr['imdb_rating'];
$lang = $arr['lang'];
$year = $arr['year'];
$uploaded = $arr['uploaded'];
$url = $arr['url'];

$search_name = preg_replace("/[^-_a-z0-9]+/i", "+", $ori_name);
$poster = "<a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\"><img src=\"$arr[poster]\" width=\"170\" height=\"228\" border=\"0\" class=\"glossy\"></a>";

$shortname = myTruncate($ori_name, 25, " ");
$shortname2 = myTruncate($name, 25, " ");

/* Hover funkcija */
?>
<script language="javascript" type="Text/JavaScript">
$('#1').contenthover({
    overlay_background:'#333',
});
</script>
<script language="javascript" type="Text/JavaScript">
var i=0;
$('.cipars').each(function(){
    i++;
    var newID='1'+i;
    $(this).attr('id',newID);
    $(this).val(i);
});
</script>
<script language="javascript" type="Text/JavaScript">
var i=0;
$('.contenthover').each(function(){
    i++;
    var newID='1'+i;
    $(this).attr('id',newID);
    $(this).val(i);
});
</script>
<style>
.contenthover { padding:20px 20px 10px 20px; display:inline-block; max-width:170px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; display:inline-block; max-width:170px; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; padding:0; display:inline-block; max-width:170px; }
.contenthover a.mybutton { display:inline-block; padding:0 0; max-width:170px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d display:inline-block; max-width:170px; }
</style>
<?
/* Hover funkcija */

print("<td align=\"center\" colspan=\"0\" border=\"0\" width=\"175\"><div align=\"center\" width=\"170\"><hr>
<div width=\"170\"><a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\" title=\"$name\"><b><u>$shortname2</u></b></a>
<br><small><a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\" title=\"$ori_name\"><b><a href=\"#\" title=\"$ori_name\">$shortname</b></a></small>
</div><hr>
<div><div id=\"1\" class=\"cipars\">$poster</div>
<div class=\"contenthover\" id=\"1\"><br>
<a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\"><img src=\"https://cdn1.iconfinder.com/data/icons/VistaICO-File-Icons/256/Video/XVID.png\" width=\"20\"/></a>
</div></div>
<hr><div class=\"wrapper\"><span class=\"field\"><span><b>".$tracker_lang['genrei']."</b>: <font color=\"red\">$genre</font></span></span></div>
<br><b>".$tracker_lang['my_year']."</b>: <font color=\"red\">$year</font>
<br><a href=$imdb><img src=\"pic/filmas/imdb.png\" align=absmiddle alt=IMDB title=IMDB width=35 height=35/></a>
&nbsp;&nbsp;&nbsp;&nbsp;<a href=$url><img src=\"pic/filmas/youtube.png\" alt=YouTube align=absmiddle title=YouTube width=50 height=17/></a>
<br><b>IMDB Rating:</b> <fony color=\"red\">$imdb_rating/10</font>");

if(get_user_class() >= UC_MODERATOR || $CURUSER['id'] == $arr['owner']){
print("<br><a href=\"takefilmas.php?p=delete&id=$id\"><b title=\"Dzēst filmu\"><span style=\"color: #CC3333;\"><small>[Dzēst]</small></span></b></a>&nbsp;&nbsp<a href=\"filmasedit.php?id=$id\"><b title=\"Rediģēt filmu\"><span style=\"color: #CC3333;\"><small>[Rediģēt]</small></span></b></a>");
}
print("<p></p></div>");
++$pre[$res];
if ($pre[$res] <=3 ){
print('</td>');
}else{
print('</td></tr>');
$pre[$res] = 0;
}
}
print("<tr><td class=\"index\" colspan=\"12\">");
print("<center>". $pagerbottom ."</center>");
print("</td></tr>");
}else{
print("<center>".$tracker_lang['no_movies']."</center>");
}
print("</table></table></table>");

stdfoot();

?>
jquery.contenthover.js
Code:
/*!
 * ContentHover jQuery plugin v0.1
 * http://www.backslash.gr/demos/contenthover-jquery-plugin/
 *
 * Copyright 2011 by Nikos Tsaganos
 * http://www.backslash.gr/
 */
(function($){  
	var methods = {
		init : function(options) {
			var defaults = {  
				data_selector: '.contenthover',	// The selector for the element that will be the content of the overlay element to show on hover 
				width: 170,			// Set to 0 to let the plugin figure it out
				height: 0,			// Set to 0 to let the plugin figure it out
				overlay_width: 170,		// The overlay element's width. Set to 0 to use the same as 'width'
				overlay_height: 0,		// The overlay element's height. Set to 0 to use the same as 'height'
				overlay_x_position: 'center',	// [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
				overlay_y_position: 'bottom',	// [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
				overlay_background: '',		// The css background of the overlay element
				overlay_opacity: 1,		// [0-1] The opacity of the overlay element
				effect: 'slide', 		// [fade, slide, show] The effect to use
				fade_speed: 400, 		// Effect ducation for the 'fade' effect only
				slide_speed: 300, 		// Effect ducation for the 'slide' effect only
				slide_direction: 'bottom',	// [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
				zindex: 0,			// The base z-index value
				wrapper_class: 'ch_wrapper', 	// CSS class to add to the wrapper
				normal_class: 'ch_normal',  	// CSS class to add to the 'normal' element
				hover_class: 'ch_hover',  	// CSS class to add to the 'hover' element
				onshow: function(){}, 		// Callback function when the 'hover' element is shown
				onhide: function(){} 		// Callback function when the 'hover' element is hidden
			},  
			settings = $.extend({}, defaults, options);  
		  			
			return this.each(function(){
				var $this = $(this),
					w = 170,
					h = $this.height() ? $this.height() : settings.height,
					overlay_w = settings.overlay_width ? settings.overlay_width : w,
					overlay_h = settings.overlay_height ? settings.overlay_height : h,
					$data = $this.next(settings.data_selector);
					
				if ($data.length) {
					
					$data.hide();
					
					var $ch_wrapper = $('<div>').addClass('ch_element').addClass(settings.wrapper_class).css({ 'width':w, 'height':h, 'position':'relative', 'overflow':'hidden' }).insertAfter($this);
					
					var $ch_normal = $('<div>').addClass(settings.normal_class).css({ 'width':w, 'height':h, 'position':'absolute', 'z-index':settings.zindex }).appendTo($ch_wrapper);
					$this.clone().appendTo($ch_normal);
					$this.hide();

					var $ch_hover = $('<div>').addClass(settings.hover_class).css({ 'width':overlay_w, 'height':overlay_h, 'position':'absolute', 'z-index':settings.zindex-1 }).appendTo($ch_wrapper);
					$data.clone().show().appendTo($ch_hover);
					
					var ch_hover_css = {};
					
					if (settings.overlay_background) { 
						ch_hover_css.background = settings.overlay_background; 
					}
					if (settings.overlay_opacity<1) { 
						ch_hover_css.opacity = settings.overlay_opacity; 
					}
					
		
					if (settings.overlay_x_position=='left') { 
						ch_hover_css.left = 0;
					} else if (settings.overlay_x_position=='right') {
						ch_hover_css.left = (w-overlay_w)+'px';
					} else {
						ch_hover_css.left = (w/2 - overlay_w/2)+'px';
					}
					
					
					if (settings.overlay_y_position=='top') { 
						ch_hover_css.top = 0;
					} else if (settings.overlay_y_position=='bottom') {
						ch_hover_css.top = (h-overlay_h)+'px';
					} else {
						ch_hover_css.top = (h/2 - overlay_h/2)+'px';
					}
					
					$ch_hover.css(ch_hover_css); 
					
					// slide effect
					if (settings.effect=='slide'){
			
						var initial_css = {};
						
						if (settings.slide_direction=='top') {
							initial_css = { top:('-'+overlay_h+'px') }; 
						}
						if (settings.slide_direction=='bottom') {
							initial_css = { top:h+'px' };
						}
						if (settings.slide_direction=='left') {
							initial_css = { left:('-'+overlay_w+'px') };
						}
						if (settings.slide_direction=='right') {
							initial_css = { left:w+'px' };
						}
									
						$ch_hover.css('z-index',settings.zindex+1).css(initial_css);
						$ch_wrapper.hover(function () {
							$ch_hover.stop(true, true).animate({ 'top': ch_hover_css.top, 'left': ch_hover_css.left }, settings.slide_speed, settings.onshow());
						}, function () {
							$ch_hover.stop(true, true).animate(initial_css, settings.slide_speed, settings.onhide());
						});
						
											
					// fade effect
					} else if (settings.effect=='fade') {
						
						$ch_hover.css('z-index',settings.zindex+1).hide();
						$ch_wrapper.hover(function () {
							$ch_hover.stop(true, true).fadeIn(settings.fade_speed, settings.onshow());
						}, function () {
							$ch_hover.stop(true, true).fadeOut(settings.fade_speed, settings.onhide());
						});
					
					// just show/hide
					} else {
						$ch_hover.css('z-index',settings.zindex+1).hide();
						$ch_wrapper.hover(function () {
							$ch_hover.show(0, settings.onshow());
						}, function () {
							$ch_hover.hide(0, settings.onhide());
						});
					}
				}
			});
		},
		
		stop : function() {
			return this.each(function(){
				var $this = $(this),
					$data = $this.next('.ch_element');
					
				$this.show();
				$data.remove();
				$this.unbind('.contenthover');
			});
		},
		
		destroy : function() {
			return this.each(function(){
				$(this).show();
				$('.ch_element').remove();
				$(window).unbind('.contenthover');
			});
		}
	};
	
	$.fn.contenthover = function(method) {  
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error('Method '+ method +' does not exist in contentHover plugin.');
		}  
	}; 
	
})(jQuery);
Click the image to open in full size.
Reply With Quote