JavaScript onclick issue

kitkat9933 · 3 Mar 2014 at 11:02

Hi,

I have a PHP loop that prints out a table, with two columns, first column is the title of a video and the second one is a thumbnail of that video.

For each of the thumbnails, I have added a JavaScript function which onclick opens that video in a new window.

For some reason it works fine for all the videos except the first one. I print two of these tables out, one on the left and one on the right of the page. For the second table all elements including the first work as expected.

Code below and any help would be more appreciated.

Code:

 <!-- On click Function-->
    <script type="text/javascript">
        <!--
        function MM_openBrWindow(theURL,winName,features) { //v2.0
            window.open(theURL,winName,features);
        }
        //-->
    </script>

PHP:

for($video_counter=0;$video_counter<=$loop1_counter;$video_counter++)
{
    echo <<< HTML
    <tr>
        <td>$file_name[$video_counter]</td>
        <td><img src="$thumbnail_path[$video_counter]" height="100" width="120" onclick="MM_openBrWindow('$video_path','$file_name[$video_counter]','width=650,height=500'); return false;"></td>
    </tr>
HTML;
}

redeye_uk · 3 Mar 2014 at 11:35

For some reason it works fine for all the videos except the first one

The first one does nothing? opens, but doesn't play?

There could be a number of reasons for this. Are there any errors in the console?

As an aside, the code is horrendous, and i mean that in the nicest possible way

- You should never use DOM level 0 events (onclick attributes)
- I'd wrap the <img> tag in an anchor and have that open a new window/tab. I suspect window.open will be flagged as a popup by some browers and/or plugins. There are also accessibility benefits to using an anchor in this instance.

kitkat9933 · 3 Mar 2014 at 12:00

The new window doesn't even open, never mind play.

kitkat9933 · 3 Mar 2014 at 12:15

It isn't working again now for the first video. Hovering over it shows the JS but it doesn't do anything.

The new code

Code:

  <!-- Open Popup-->
    <script type="text/javascript">
        // Popup window code
        function newPopup(url) {
            popupWindow = window.open(
                url,'popUpWindow','height=500,width=650,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
        }
    </script>

PHP:

for($video_counter=0;$video_counter<=$evens_counter;$video_counter++)
{
    echo <<< HTML
    <tr>
        <td>$file_name[$video_counter]</td>
        <td><a  href="JavaScript:newPopup('index.php/VideoView$file_path[$video_counter]');"><img src="$thumbnail_path[$video_counter]" height="100" width="120"></a></td>
    </tr>
HTML;
}