Bravo List

Bravo List (http://www.bvlist.com/index.php)
-   Yuna Scatari Edition (YSE) (http://www.bvlist.com/forumdisplay.php?f=22)
-   -   Movie poster hover (http://www.bvlist.com/showthread.php?t=9775)

mat22 12th February 2014 22:50

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']);

?>




/* --- Lai ieslēgtu gada izvēli --- */
if(get_user_class() >= UC_MODERATOR){
print("



"); }
print("
");
print("Pievienot jaunu filmu

");
print("");
print("
");
print("

".$tracker_lang['gads_izvele']."   

");
print("
");
/* --- End --- */

print("



");
print("
".$tracker_lang['new_movies']."
");
print("");

$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 = "";

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

/* Hover funkcija */
?>




/* Hover funkcija */

print("');
}else{
print('');
$pre[$res] = 0;
}
}
print("");
}else{
print("
".$tracker_lang['no_movies']."
");
}
print("




$poster





".$tracker_lang['genrei'].": $genre

".$tracker_lang['my_year'].": $year
IMDB
    YouTube
IMDB Rating: $imdb_rating/10");

if(get_user_class() >= UC_MODERATOR || $CURUSER['id'] == $arr['owner']){
print("[Dzēst] &nbsp[Rediģēt]");
}
print("

");
++$pre[$res];
if ($pre[$res] <=3 ){
print('
");
print("
". $pagerbottom ."
");
print("
");

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 = $('
').addClass('ch_element').addClass(settings.wrapper_class).css({ 'width':w, 'height':h, 'position':'relative', 'overflow':'hidden' }).insertAfter($this);
                                       
                                        var $ch_normal = $('
').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 = $('
').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);

http://www.bildites.lv/images/09afghkpdaev4ee3dqt.png

BitFarmer 9th March 2014 00:25

as you can see for last one there is ment to be 2 images and the down one is not loaded need to see page source (ctrl+u) to fix this one

joeroberts 9th March 2014 00:58

OK I dont normaly reply to post like this one because I normaly sound like a A$$ hole But I well try.

your first mistake
You have this code
Code:





inside a foreach statement which is wayyy wrong as now it is sending this to the browser for every torrent listed so if you like have 5 torrents listed it sends that out 5 times so your killing java and css
second your not setting the ID rite in your tags

Code:


you should only have one id=\"1\" but in your code you well have 16 now how is java going to know which one to use for hover if there all 1 you should alter those with the the torrent ID

Good luck with your code.

mat22 9th March 2014 01:27

Ok thanks for answers.
The "second" image for the last poster is the one that should show up when I hover my mouse over the actual poster.

And thanks to joeroberts I got an idea for those IDs. I'll check if it works tomorrow and then come back and tell you ASAP.

joeroberts 9th March 2014 02:12

:drink::drink:

mat22 10th March 2014 20:48

Ok, so I tried different variations of code but still couldn't get it working.
But I improved code a bit so it now only uses 1 javascript to increase ID every time (and yes, it works fine until last torrent poster on page).

This is the part from movies.php where the actual hover effect is.
Code:

/* Hover funkcija */
?>





/* Hover funkcija */

print("
Thing is - first 15 posters (out of 16) work fine and hover effect works just as needed. But the problem is with last one - in page source it shows "id = 1" while for other it's, for example, "id = id29" or "id = id23" or something like that. Looks like last torrent just takes that id from code and I'm not able to figure out how to get it to work correctly. From all other aspects it works perfectly (and yes - I know there are probably better ways to make those id change every time).

zotya 24th January 2016 21:53

Quote:

Originally Posted by mat22 (Post 43893)
Hello!
Code:


        $where = 'WHERE year = 20'. $_GET["year"];


Sql Inject!


All times are GMT +2. The time now is 00:00.

Powered by vBulletin® Version 3.8.11 Beta 3
Copyright ©2000 - 2024, vBulletin Solutions Inc.