wierd bug with jquery and flowplayer (see my live example)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
invisibled
Forum Contributor
Posts: 112
Joined: Sun Apr 29, 2007 3:35 pm
Location: New Westminster

wierd bug with jquery and flowplayer (see my live example)

Post by invisibled »

Ok so i wasn't sure if this was the right forum for my question, so redirect me if there is a better one.

if you go to http://fnaa.info/dev/ you will see a bunch of images come up on the left side. Find a video (or sort by videos) and click on the module to open the video. Then Close the video (the x in the top right). and open and close the module again and you will see the bug. Every time you click the module from that point on the video will reload. So when the module is closed the video will still play. Obviously this is not what i want. I really have NO idea why this is happening. So if anybody here could throw any idea's out there that would be great. I'll post all relevant code and just let me know if you need any more info. Thanks!

Javascript that controls the modules.

Code: Select all

 
$(document).ready(function() {
    $(".left").find(".module").each(function(){
        
 
        //Variables
        var info = $(this).find(".info");
        var pid = $(this).find(".player").attr("id");
        var cid = $(this).find(".hulu").attr("id");
        var article = $(this).find(".article");
        var control = $(this).find(".hulu");
        var close = $(this).find(".close_module");
        var text = $(this).find(".text");
        var h = $(this).height() - 12;
        var module_type = $(this).find(".module_type").html();
        
        
                        
        //Sets the height of the module and overlay to 200
        $(this).height(200);
        info.height(200);
        
        
        
        
 
        //Fades in & out the overlay
        $(this).hover(
            function(){
                info.fadeIn("fast");
                control.fadeIn("fast", "swing");
                if($('.open').length){
                    close.fadeIn("fast");
                }
            }, 
            function(){
                info.fadeOut("fast");
                control.fadeOut("fast", "swing");
                if($('.open').length){
                    close.fadeOut("fast");
                }
            }
        );
 
 
        //Module click function
        function openModule(){
 
            //Open 
            $(this).parent().animate({height: h }, 500, "swing");
            info.animate({ height: h }, 500, "swing");          
 
            //Sets the cursor to default    
            info.css("cursor", "default");
            close.fadeIn("fast");
 
            //Article specific actions  
            if(article.length){
                article.css("overflow", "auto");
                article.animate({height: h - 130}, 'slow', 'swing', function(){
                    article.jScrollPane({showArrows:true});
                });
                if($.browser.msie){
                    $(".jScrollPaneContainer").css("height", h - 130);
                }
            }
            
            //Expand photo and video text
            if(text.length){
                text.animate({height: h - 137}, 'fast', 'swing');
            }
 
            //Removes the "closed" class
            $(this).parent().toggleClass("closed");
            $(this).parent().toggleClass("open");
            
            //Unbinds the click function when the module is open
            info.unbind('click', openModule);
            
            //Video specific actions
            if(module_type == "video"){
                video(pid, cid);
            }
        }
        info.bind('click', openModule);
 
 
 
 
 
 
        //Close module function
        function closeModule(){
 
            //Closes the module and info windows
            info.animate({ height: 200 }, 500, "swing");
            $(this).parent().animate({height: 200 }, 500, "swing");
 
            
            //Add's the pointer back
            info.css("cursor", "pointer");
            
            
            //Article specific actions
            if(article.length){
                article.css("overflow", 'hidden');
                article.animate({height: 69}, 100, 'swing');
                article.jScrollPane({showArrows:false, maintainPosition: false});
                if($.browser.msie){
                    $(".jScrollPaneContainer").css("height", "69px");
                }
            }
            
            //Retract photo and video text
            if(OSName == "Windows" && $.browser.mozilla){
                if(text.length){
                    text.animate({height: 76}, 'fast', 'swing');
                }
            } else {
                if(text.length){
                    text.animate({height: 69}, 'fast', 'swing');
                }
            }
 
            //Add's the closed class back
            info.parent().toggleClass("closed");
            info.parent().toggleClass("open");
            
            
            //Add's the click function back
            info.bind('click', openModule);
            
            //Removes the close button
            close.fadeOut("fast");
            
            //Video specific actions
            if(module_type == "video"){
                $f().unload();
                control.empty();
            }
        }
        close.bind("click", closeModule);
        
    });//each
    
    
    
    //Video options and controls
    function video(pid, cid){
        $f(pid, {src: 'lib/swf/flowplayer-3.1.0.swf', wmode: 'transparent'}, { 
            clip: { autoPlay: true, autoBuffering: true },
            plugins: { controls: null },
            play: { opacity: 0 }
        }).controls(cid, {duration: 0});
 
        $f(pid).play($(this).find(".player").attr("href"));
    }
    
});//ready
 

And here is the php that displays everything.

Code: Select all

 
<?php
    //Content selectors
    if(isset($_GET['year'])):
    
        $year = $_GET['year'];
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE year = '$year' ORDER BY id DESC LIMIT $p->res, $p->per_page");
        
    elseif(isset($_GET['category'])):
    
        $category = $_GET['category'];
        if($category == 'Entertainment Management '):
            $category = 'Entertainment Management & Production';
        elseif($category == "Music "):
            $category = 'Music & Jazz';
        elseif($category == "Textile Arts "):
            $category = 'Textile Arts & Costuming';
        endif;
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE category = '$category' ORDER BY id DESC LIMIT $p->res, $p->per_page");
        
    elseif(isset($_GET['type'])):
    
        $type = $_GET['type'];
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE type = '$type' ORDER BY id DESC LIMIT $p->res, $p->per_page");
    
    elseif(isset($_GET['search'])):
    
        $search = $_GET['search'];
         
        require 'search_refine.php';
        
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE 
            title LIKE '%$search%' OR
            content like '%$search%' OR
            category like '%$search%' OR 
            type like '%$search%' OR 
            year like '%$search%' 
        ORDER BY id DESC LIMIT $p->res, $p->per_page");
    
    elseif(isset($_GET['article'])):
    
        $article = $_GET['article'];
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE id = '$article' ORDER BY id DESC LIMIT $p->res, $p->per_page");
        
    else:
    
        $stories_sql = mysql_query(" SELECT * FROM $p->page_table ORDER BY id DESC LIMIT $p->res, $p->per_page");
        
    endif;
    
    
    //If there are no results, show this message
    if(mysql_num_rows($stories_sql) == '0'):
        print '<br /><br /><h3 class="error">Currently, there are no stories in this section.</h3>';
        print '
            <script type="text/javascript">
                $(".pagination").hide();
            </script>
        ';
    endif;
    
    
    //The Loop
    $i = 0;
    while($row = mysql_fetch_assoc($stories_sql)):
        extract($row);
        
        //Sets the right color code
        if($category == "Entertainment Management & Production"):
            $color = 'green';
        elseif($category == "Media Arts"):
            $color = 'orange';
        elseif($category == "Motion Picture Arts"):
            $color = 'blue';
        elseif($category == "Music & Jazz"):
            $color = 'purple';
        elseif($category == "Performing Arts"):
            $color = 'pink';
        elseif($category == "Textile Arts & Costuming"):
            $color = 'yellow';
        elseif($category == "Visual Arts"):
            $color = 'red';
        else:
        endif;
        
        //Gets the width and height of the main image for javascript
        list($width, $height) = getimagesize('../../cms/lib/uploads/image/stories/'.$img);
        
        print '<div class="module closed" id="mod'.$id.'"><a class="close_module">X</a>';   
        
        $media_sql = mysql_query(" SELECT * FROM media WHERE story_id = '$id' ORDER BY id DESC ");
        $media_row = mysql_fetch_assoc($media_sql);
            
        //If video module
        if($type == 'video'):
 
            print'
            
                <div class="module_type" style="display:none;">video</div>
                
                <a href="cms/lib/uploads/media/'.$media_row['file'].'" class="player" id="player'.$i.'">
                    <img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />
                </a>
                
                <div class="info">
                    <h2>'.$title.'</h2>
                    <div class="text">
                        '.$content.'
                    </div>
                    <div class="category '.$color.'">'.$category.'</div>
                    <div class="type">'.$type.'</div>
                </div>
                <div class="hulu" id="hulu'.$i.'"></div>
                </div>
            ';
        
        //If article module 
        elseif($type == 'article'):
            
            print '<div class="module_type" style="display:none;">article</div>';
            
            print'<img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />';    
            
            if(mysql_num_rows($media_sql) == '1'):
                print'<img src="cms/lib/uploads/image/articles/'.$media_row['file'].'" alt="" height="'.$height.'" />';
            endif;  
                
            print'  <div class="info">
                    <h2>'.$title.'</h2>
                    <div class="article">
                        <div>'.$content.'</div>
                    </div>
                    <div class="category '.$color.'">'.$category.'</div>
                    <div class="type">'.$type.'</div>
                </div>
                </div>
            ';
 
        //If photo module
        elseif($type == 'photo'):
            
            print '<div class="module_type" style="display:none;">photo</div>';
            
            print '<img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />';
            
            while($media_row = mysql_fetch_assoc($media_sql)):
                
                list($width, $height) = getimagesize('../../cms/lib/uploads/image/stories/'.$media_row['file']);
                print '<img src="cms/lib/uploads/image/stories/'.$media_row['file'].'" alt="" height="'.$height.'" />';
                
            endwhile;
            
            print'
                <div class="info">
                    <h2>'.$title.'</h2>
                    <div class="text">
                        '.$content.'
                    </div>
                    
                    <div class="category '.$color.'">'.$category.'</div>
                    <div class="type">'.$type.'</div>
                </div>
                </div>
            ';
        
        
        endif;
                
        $i++;   
    endwhile;
?>
 
invisibled
Forum Contributor
Posts: 112
Joined: Sun Apr 29, 2007 3:35 pm
Location: New Westminster

Re: wierd bug with jquery and flowplayer (see my live example)

Post by invisibled »

bumpity bump :D
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: wierd bug with jquery and flowplayer (see my live example)

Post by pickle »

Using FF 3.5 on OS X, it seems to work perfectly for me. When I click on a video, it expands & Flowplayer shows. When I click 'X', the video goes away. Clicking on the same image again, the picture expands & the video starts over.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply