• 0

Help with ajax issue


Question

I'm trying to learn some ajax now that I've some time, so I've built a small page were one of the sections is a video gallery. I'm using imageflow to select the videos and videojs to play them, with a flash fallback.

The issue is everything is working perfectly on chrome and android's browser, but it chokes everywhere else. The html loads into the div and I get the text header on top of the video, and the video itself, but the imageflow gallery is just not there. It should show up on top of both the text and the video, but it's as if I hadn't even placed the img tags in the html.

This is the html I'm loading:

<div id="main">
    <!-- This includes the ImageFlow CSS and JavaScript -->
    <link rel="stylesheet" href="imflow/imageflow.packed.css" type="text/css" /> 
    <script type="text/javascript" src="imflow/imageflow.js"></script> 

<div id="myImageFlow" class="imageflow"> 
        <img src="./media/htc_38_s.png" longdesc="1"    alt="Video1"   id="1" width="125" height="70"  />
        <img src="./media/htc_40_s.png" longdesc="2"    alt="Video2"   id="2" width="125" height="70"  />
        <img src="./media/s_015.png"    longdesc="3"    alt="Video3"  id="3" width="125" height="70"  />
</div>

    <script type="text/javascript" src="js/js2.js"></script>

<div id="contentArea">  

    <!-- Include the VideoJS Library --> 
    <script src="player/video.js"></script> 

    <script> 
        VideoJS.setupAllWhenReady();
    </script> 

     <link rel="stylesheet" href="player/video-js.css" type="text/css" media="screen" >  
    <h1>Video title</h1> 
    <div id="info"> 
            <p>Some text</p> 
    </div> <!-- end info --> 

    <div id="content"> 

        <!-- Begin VideoJS --> 
        <div class="video-js-box"> 

            <video id="example_video_1" class="video-js" width="640" height="360" poster="media/htc_38.jpg" controls preload> 
                <source src="./media/htc_38_2.mp4" type="video/mp4" />               

                <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> 
                       <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
                      data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                     <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                     <param name="allowfullscreen" value="true" />
                     <param name="flashvars" value='config={"playlist":["<url>/media/htc_38.jpg", {"url": "<url>/media/htc_38_2.flv","autoPlay":false,"autoBuffering":true}]}' />
                  <!-- Image Fallback. Typically the same as the poster image. --> 
                  <img src="./media/htc_38.jpg" width="640" height="360" alt="Poster Image"
                    title="No video playback capabilities." />                </object> 
            </video> 
        </div> 
        <!-- End VideoJS --> 
         </div> <!-- end content --> 
</div> <!-- end contentArea -->
        <hr> 
 </div> <!-- end main --> 

The div with the id "myImageFlow" is what's not showing on firefox and opera.

I'm just using a .load() function to load the html. I've tested with an alert() to verify that javascript is being executed, just in case, and that works.

What the hell could be going on? :huh: I guess either chrome is doing something right, or I'm doing something wrong and chrome swallows while firefox and opera choke, but I can't spot what that could be.

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.