Link to home
Start Free TrialLog in
Avatar of ksntwebmaster
ksntwebmaster

asked on

Why isn't my main story image popping up in its own Javascript defined window?

I'm using this Mason component (Perl embedded in HTML) to create our local news story pages.  If you notice starting at line 150 and going through line 170, I have specified a Javascript pop-up window when the main image is clicked upon to open our video player.  However after messing around with other elements in it this morning, clicking on the 'main image' no longer pops open the specified JS window but instead goes directly to the video url.  If you click the text caption and the 'play video' button below the main image, it still works correctly.  What did I forget or delete that disabled my pop up script on the main image?

story page example: http://treebeard.grokthis.net:8030/news/stories/8964359.html

here's the code:

<!-- Package showstory.cmp start -->
<link rel="stylesheet" href="http://treebeard.grokthis.net:8030/news/styles.css" type="text/css">
% if ($storyfound != 0) {
<script language="Javascript"><!--
var emailLink = 'mailto:?subject=KSNT.com%20Story:%20<% $headlinelink %>&body=<% $headlineinbody %>%0D%0A%0D%0A<% $bodylink %>%0D%0A%0D%0A<% $urllink %>';
function printStory(StoryID) {
  megaPopup('/news/stories/print/' + StoryID + '.html','loose','bare','600','460','20','20','top','story');
}
-->
</script>
<!-- Start of head content, rev. 3 -->
<script language="JavaScript" type="text/javascript">
<!--
var megaPopupWin = null;
lastName = null;
function megaPopup(URL,flexType,windowType,width,height,screenHorizPosition,screenVertPosition,stackOrder,temporaryName) {
      if      (screenHorizPosition == 'center')      { leftPosition = (screen.width) ? (screen.width - width)/2:100; }
            else { leftPosition = screenHorizPosition; }
      if      (screenVertPosition == 'center')      { topPosition = (screen.height) ? (screen.height - height)/2:100; }
            else { topPosition = screenVertPosition; }
      if (windowType == 'full') { styleAttributes = "toolbar=yes,location=yes,directories=yes,menubar=yes,status=yes"; } else if (windowType == 'basic') { styleAttributes = "toolbar=yes,location=no,directories=no,menubar=no,status=no"; } else if (windowType == 'bare') { styleAttributes = "toolbar=no,location=no,directories=no,menubar=no,status=no"; } else { styleAttributes = "toolbar=yes,location=yes,directories=yes,menubar=yes,status=yes"; }
      if (flexType == 'frozen') { flexAttributes = "scrollbars=no,resizable=no"; } else if (flexType == 'rigid') { flexAttributes = "scrollbars=yes,resizable=no"; } else if (flexType == 'loose') { flexAttributes = "scrollbars=yes,resizable=yes"; } else { flexAttributes = "scrollbars=yes,resizable=yes"; }
      if (width == 'total') { width = screen.width; }
      if (height == 'total') { height = screen.height; }
      // *** consider a browser sniff to serve screenX and screenY to Navigator 4 ***
      windowAttributes = 'width=' + width + ',height=' + height + ',top=' + topPosition + ',left=' + leftPosition + ',' + styleAttributes + ',' + flexAttributes;
      // if the temporary and last names match, the popup is repopulating an existing window; the existing window must be closed to allow its replacement to use new and different style, flexibility, and position attributes
      if (temporaryName == lastName) { if (megaPopupWin != null && !megaPopupWin.closed) { oldWin = megaPopupWin; oldWin.name = "oldWin"; oldWin.close(); } }
      lastName = temporaryName;
      megaPopupWin = window.open(URL,temporaryName,windowAttributes);
      if (stackOrder == 'top') { megaPopupWin.focus(); megaPopupWin.location = URL; }
            else if (stackOrder == 'bottom') { megaPopupWin.blur(); megaPopupWin.location = URL; megaPopupWin.blur(); self.focus(); }
}
function closeWin()
      {
            this.close();
            PrintWindow = null;
      }
function doVideo(url) {
      megaPopup('/bin/video/' + url + '.html','frozen','bare','420','650','5','5','top','dmwin');
}
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function out_of_frame()
{
if (window != top)
top.location.href = location.href;
}
function ss(w){window.status=w;return true;}
function cs(){window.status='';}
function ga(o,e){if (document.getElementById){a=o.id.substring(1); p = "";r = "";g = e.target;if (g) { t = g.id;f = g.parentNode;if (f) {p = f.id;h = f.parentNode;if (h) r = h.id;}} else{h = e.srcElement;f = h.parentNode;if (f) p = f.id;t = h.id;}if (t==a || p==a || r==a) return true;location.href=document.getElementById(a).href}}
// -->
</script>
<!-- End of head content -->
      <table width="100%" border="0">
        <tr>
          <td nowrap class="subhead">KSNT Local News</td>
        </tr>
      </table>
<table width="95%" cellPadding="2" cellSpacing="0" align="center"><tr><td class="headlineList" align="left">&nbsp; <a href="/news/stories/search.html" onMouseOver="window.status='Search for story'; return true" onMouseOut="window.status=''; return true"><img src="/images/searchstories.gif" width="20" height="14" align="absmiddle" border="0"></a> <a href="/news/stories/search.html" onMouseOver="window.status='Search for a news story'; return true" onMouseOut="window.status=''; return true">Search for story</a> &nbsp; <a href="javascript:printStory('<% $msnbc_id %>')" onMouseOver="window.status='Print this story'; return true" onMouseOut="window.status=''; return true"><img src="/images/printstory.gif" width="20" height="14" align="absmiddle" border="0"></a> <a href="javascript:printStory('<% $msnbc_id %>')" onMouseOver="window.status='Print this story'; return true" onMouseOut="window.status=''; return true">Print this story</a> &nbsp; <script>document.write('<a href=' + emailLink + ' onMouseOver="window.status=' + "'Email this story to a friend'" + '; return true" onMouseOut="window.status=' + "''" + '; return true">');</script><img src="/images/emailstory.gif" width="20" height="14" align="absmiddle" border="0"><script>document.write('</a>');</script> <script>document.write('<a href=' + emailLink +  ' onMouseOver="window.status=' + "'Email this story to a friend'" + '; return true" onMouseOut="window.status=' + "''" + '; return true">Email this story</a>');</script></td></tr></table>
<br><% $imageurl %><span class="StoryHeadlineTop"><% $ref->{headline} %></span><br>
<% ($ref->{subhead}) ? $ref->{subhead} . "<br>" : "" %>
<% ($byline ne "") ? '<br>' . $reporterimage . 'by ' . $byline . '<br>' : "<br>" %>
KSNT News<br>
<br clear="all"><br>
<b><% $ref->{city} %>, <% $ref->{state} %>, <% &fromMySQLdate($ref->{dateline}) %></b> --
<% $ref->{body} %>
</p>
% # Enter specific story tag snippets here
% if (-e "/cmp/snippets/tag/$msnbc_id.cmp") {
<% $m->comp("/cmp/snippets/tag/$msnbc_id.cmp") %>
% }
% # End of specific story tag snippets
<span class="copyleft">Last update: <i><% &fromMySQLdatetime($ref->{edittime}) %></i>
% if ($morelink) {
<% ($byline ne "") ? '<br>See more stories by ' . $byline : "" %>
% }
</span>
<br><br><table width="90%" style="border:#082E6D 1px solid;background-color:#C7D4E1" cellPadding="2" cellSpacing="0" align="center"><tr><td class="headlineList" width="33%" align="left">&nbsp; <a href="/news/stories/search.html" onMouseOver="window.status='Search for story'; return true" onMouseOut="window.status=''; return true"><img src="/images/searchstories.gif" width="20" height="14" align="absmiddle" border="0"></a> <a href="/news/stories/search.html" onMouseOver="window.status='Search for a news story'; return true" onMouseOut="window.status=''; return true">Search for story</a></td><td class="headlineList" width="33%" align="center">&nbsp; <a href="javascript:printStory('<% $msnbc_id %>')" onMouseOver="window.status='Print this story'; return true" onMouseOut="window.status=''; return true"><img src="/images/printstory.gif" width="20" height="14" align="absmiddle" border="0"></a> <a href="javascript:printStory('<% $msnbc_id %>')" onMouseOver="window.status='Print this story'; return true" onMouseOut="window.status=''; return true">Print this story</a></td><td class="headlineList" align="left" width="33%">&nbsp; <script>document.write('<a href=' + emailLink + ' onMouseOver="window.status=' + "'Email this story to a friend'" + '; return true" onMouseOut="window.status=' + "''" + '; return true">');</script><img src="/images/emailstory.gif" width="20" height="14" align="absmiddle" border="0"><script>document.write('</a>');</script> <script>document.write('<a href=' + emailLink +  ' onMouseOver="window.status=' + "'Email this story to a friend'" + '; return true" onMouseOut="window.status=' + "''" + '; return true">Email this story</a>');</script> &nbsp;</td></tr>
<% $m->comp('/cmp/commentform.cmp', url=>$url, title=>$EmailTitle, msnbc_id=>$msnbc_id, comment=>$comment) %>
</table>
<!-- Package showstory.cmp end -->
% } else {
<p>&nbsp;</p>
<p><b>Sorry, story not found. Please <a href="/news/">return to main story page</a> or <a href="/news/stories/search.html">search for story</a></b></p>
% }
<%once>
my $ck_web_dbh;
</%once>
<%init>
return if $m->cache_self(expire_in => '1 min', key => "$msnbc_id");
$ck_web_dbh = $m->comp("/cmp/KSNTWeb-connect.cmp");
if ($ck_web_dbh == -1) {
      return;
}
my $videodir = "/home/advanced/ksnt/public_html/ksnt.com/video";
my $bioimagedir = "/images/bios/video";
my $morelink = 0;
my $dateline = "";
my $videourl = "";
my $imageurl = "";
my $i = 0;
my $reporterimage = "";
my $sql = "";
my $sql2 = "";
my $successful_insert = 0;
my $byline = "";
my $updatevideo = 0;
my $updateimage = 0;
my ($headlinelink, $headlineinbody, $bodylink, $urllink, $EmailTitle) = "";
my $storyfound = 0;
my %reporters = $m->comp("/cmp/reporters.cmp");
my $sth;
my $ref;
my $digest;
my $data;
my $returnval = 0;
$sth = $ck_web_dbh->prepare ("SELECT * FROM NewsStories WHERE msnbc_id = ?");       # Prepare statement
$sth->execute ($msnbc_id);                                    # Execute SQL
$ref = $sth->fetchrow_hashref ();                        # Set return value
$sth->finish ();                                              # Clear $sth
$ck_web_dbh->disconnect ();                                    # Disconnect DB
$headlinelink = &URLEncode($ref->{headline});
$headlineinbody = &URLEncode("KSNT News Story: $ref->{headline}");
$EmailTitle = &URLEncode($ref->{headline});
$bodylink = &URLEncode($ref->{abstract});
$urllink = &URLEncode("http://treebeard.grokthis.net:8030/news/stories/" . $msnbc_id . ".html");
if (length($ref->{body}) >= 2) {
      $storyfound = 1;
      }
      $ref->{body} =~ s|<lb><b>|</p>\n<br><p><b>|gi;
      $ref->{body} =~ s|<lb>|</p>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|gi;
      $ref->{body} =~ s|&#8217; target=|' target=|gi;
      $ref->{body} =~ s|&#8217;>|'>|gi;
      $ref->{body} =~ s|=&#8217;|='|gi;
      if ($ref->{videoid} ne "") {
        if (-e "$videodir/$ref->{videoid}") {
              $videourl = ($ref->{videoid} =~ m|(.+?)\.wmv|x) ? $1 : "";
        }
      } else{
        if (-e "$videodir/$msnbc_id.wmv") {
              $updatevideo = 1;
              $videourl = $msnbc_id;
        }
      }      
      if ($ref->{mainimage} ne "") {

        if (-e "$videodir/thumbs/$ref->{mainimage}") {
            if ($videourl ne "") {
                  $imageurl  = '<table width="200" border="0" cellspacing="0" cellpadding="0" align="left">';
                  $imageurl .= '<tr align="left">';
                  $imageurl .= '<td><table width="200" border="0" cellspacing="0" cellpadding="0" class="popwin"><tr><td align="center"><a href="/news/stories/video/' . $videourl . '.html"><img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152" border="0" alt="Click image to view video"></a></td></tr></table>';
                  $imageurl .= qq|<a href="#" onClick="window.open('/news/stories/video/$videourl.html','vid','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=764,height=485,top=0,left=0')"><img src="/images/videosm.gif" width="60" height="10" alt="Click to watch video" border="0">Watch video online here</a></a><br><br>|;
            } else {
                    $imageurl = '<img src="/video/thumbs/' . $ref->{mainimage} . '" align="left" width="202" height="152">';
            }
        }
      } else {
        if (-e "$videodir/thumbs/$msnbc_id.jpg") {
              $updateimage = 1;
            if ($videourl ne "") {
                  $imageurl  = '<table width="200" border="0" cellspacing="0" cellpadding="0" align="left">';
                  $imageurl .= '<tr align="left">';
                  $imageurl .= '<td><table width="200" border="0" cellspacing="0" cellpadding="0" class="popwin"><tr><td align="center"><a href="/news/stories/video/' . $videourl . '.html"><img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152" border="0" alt="Click image to view video"></a></td></tr></table>';
                  $imageurl .= qq|<a href="#" onClick="window.open('/news/stories/video/$videourl.html','vid','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=764,height=485,top=0,left=0')"><img src="/images/videosm.gif" width="60" height="10" alt="Click to watch video" border="0">Watch video online here</a></a><br><br>|;
            } else {
                      $imageurl = '<img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152">';
            }
        }
      }
      my $count = 0;
      $byline = ($ref->{byline} =~ m|27News|) ? "" : $ref->{byline};
      if ($byline ne "") {
            $byline = ($ref->{byline} =~ m|27News|) ? "" : $ref->{byline};
      }
      if ($byline ne "") {
        foreach my $key (sort {$a <=> $b} keys %reporters) {
            if ($ref->{byline} =~ m|$reporters{$key}[0]|gi) {
                  $ref->{byline} =~ s|$reporters{$key}[0]|<a href="/bios/$reporters{$key}[1].html"><b>$reporters{$key}[0]</b></a>|gi;
                        if (-e "/home/advanced/ksnt/public_html/ksnt.com/bios/images/$reporters{$key}[1]_th.jpg") {
                        $reporterimage = '<a href="/bios/' . $reporters{$key}[1] . '.html"><img src="/images/bios/' . $reporters{$key}[1] . '_th.jpg" width="60" height="75" align="left" border="0" alt="More about ' . $reporters{$key}[0] . '"></a>';
                  }
                  if ($reporters{$key}[3] != 0) {
                        $morelink = 1;
                  }
                  $count++;
            }
        }
        $byline = $ref->{byline};
      }
      if ($count != 1) {
            $reporterimage = "";
      }
      if (($updateimage == 1) || ($updatevideo == 1)) {
        $sql  = "UPDATE NewsStories SET ";
        if (-e "$videodir/thumbs/$msnbc_id.jpg") {
          $sql2 .= "mainimage = '" . $msnbc_id . ".jpg\'";
        }
        if (-e "$videodir/thumbs/" . $msnbc_id . "sm.jpg") {
          $sql2 .= ($sql ne "") ? ", ":"";
          $sql2 .= "videoimage = '" . $msnbc_id . "sm.jpg\'";
        }
        if (-e "$videodir/" . $msnbc_id . ".asx") {
          $sql2 .= ($sql ne "") ? ", ":"";
          $sql2 .= "videoid = '" . $msnbc_id . ".wmv\'";
        }
        $sql .= $sql2 . " WHERE msnbc_id='" . $msnbc_id ."\'";;

        if ($sql2 ne "") {
          $successful_insert = $ck_web_dbh->do ($sql);
        }
      }
my $url = 'http://treebeard.grokthis.net:8030/news/stories/video/'. $msnbc_id . '.html';
sub fromMySQLdate
{
# --------------------------------------------------------
# Get MySQL date and convert to M/D/YY format
    my($inputtime) = @_;
    if (($inputtime) && ($inputtime ne "0000-00-00")) {
            my @months = ("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
            my ($year,$mon,$mday) = split('-',$inputtime);
            $mon = int($mon) - 1;
            return "$months[$mon] $mday, $year";
      } else {
            return "";
      }
}
sub fromMySQLdatetime
{
# --------------------------------------------------------
# Get MySQL date and convert to M/D/YY format
    my($inputtime) = @_;
    if (($inputtime) && ($inputtime ne "0000-00-00")) {
            my @months = ("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
            my $year=substr($inputtime,0,4);
            my $mon =int(substr($inputtime,5,2)) - 1;
            my $mday=substr($inputtime,8,2);
            my $hour=int(substr($inputtime,11,2));
            my $min =int(substr($inputtime,14,2));
            my $ampm = "am";
            if ($hour > 11) {
                  $ampm = "pm";
                  $hour = $hour - 10;
            }
            if ($hour > 10) {
                  $hour = $hour - 10;
            }
            if (int($hour) == 0) {
                  $hour = "12";
            }
            $min = sprintf("%02d", $min);
#            my $dst =  ($isdst) ? "CDT" : "CST";
            return "$months[$mon] $mday, $year, $hour:$min$ampm";
      } else {
            return "";
      }
}
sub URLEncode {
    my $theURL = $_[0];
   $theURL =~ s|&#8217;|'|gi;
   $theURL =~ s|&#34;|"|gi;
   $theURL =~ s/([\W])/"%" . uc(sprintf("%2.2x",ord($1)))/eg;
   return $theURL;
}
</%init>
<%args>
  $msnbc_id => ''
  $comment => 0
  $video => 0
</%args>
<%attr>
  title => "KSNT News story"
</%attr>
Avatar of amit_g
amit_g
Flag of United States of America image

Change

$reporterimage = '<a href="/bios/' . $reporters{$key}[1] . '.html"><img src="/images/bios/' . $reporters{$key}[1] . '_th.jpg" width="60" height="75" align="left" border="0" alt="More about ' . $reporters{$key}[0] . '"></a>';


to

$reporterimage = '<a href="/bios/' . $reporters{$key}[1] . '.html" onclick="window.open(this.href,'bios','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=764,height=485,top=0,left=0');return false;"><img src="/images/bios/' . $reporters{$key}[1] . '_th.jpg" width="60" height="75" align="left" border="0" alt="More about ' . $reporters{$key}[0] . '"></a>';
Avatar of ksntwebmaster
ksntwebmaster

ASKER

Thanks, but what I meant by the 'Main Image' no longer linking to the pop-up video window. is the 'Main' news story image is not popping up our JavaScript window when clicked upon not the reporter's cover image
I want the 202x152 pixel Main news image to have the same pop-up actions as the "Watch video online here" text link beneath it.  It was working until I made changes to my showstory.cmp file which then overwrote my 'working' version.
Oh ok. Change

$imageurl .= '<td><table width="200" border="0" cellspacing="0" cellpadding="0" class="popwin"><tr><td align="center"><a href="/news/stories/video/' . $videourl . '.html"><img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152" border="0" alt="Click image to view video"></a></td></tr></table>';

to

$imageurl .= '<td><table width="200" border="0" cellspacing="0" cellpadding="0" class="popwin"><tr><td align="center"><a href="/news/stories/video/' . $videourl . '.html" onClick="window.open(this.href,'vid','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=764,height=485,top=0,left=0');return false;><img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152" border="0" alt="Click image to view video"></a></td></tr></table>';
I replaced the original with the snippet above but now get  this error: http://treebeard.grokthis.net:8030/news/stories/8964359.html
There is a missing ". Change it to

$imageurl .= '<td><table width="200" border="0" cellspacing="0" cellpadding="0" class="popwin"><tr><td align="center"><a href="/news/stories/video/' . $videourl . '.html" onClick="window.open(this.href,'vid','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=764,height=485,top=0,left=0');return false;"><img src="/video/thumbs/' . $msnbc_id . '.jpg" align="left" width="202" height="152" border="0" alt="Click image to view video"></a></td></tr></table>';
ASKER CERTIFIED SOLUTION
Avatar of amit_g
amit_g
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You da' man!  Thanks so much!