0 Replies Latest reply on Mar 30, 2009 1:41 PM by sbudlong

    HTML overlay on top of Flash

    sbudlong Level 1
      I see that using a javascript library like JQuery, I can create overlays from one HTML page to another (code below). Our Flash designer is suggesting that perhaps the JQuery function could be modified to include the names of the external HTML pages so that he could just reference this function to call up the overlays. Is something like this possible? If not, is there an established way of calling HTML overlays from a Flash .swf perhaps using ActionScript?


      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="overlay_external.aspx.cs" Inherits="overlay_external" %>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns=" http://www.w3.org/1999/xhtml">
      <head id="Head1" runat="server">
      <title>Overlay as New Page</title>

      <script src="jquery-1.3.1.js" type="text/javascript"></script>
      <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


      <!-- include overlay script -->
      <script src=" http://static.flowplayer.org/js/jquery.overlay-1.0.1.min.js"></script>

      <script src="jquery.expose-1.0.0.js" type="text/javascript"></script>

      <link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>

      <!-- make all links with rel attribute to open overlays -->

      <style type="text/css">

      /* use a semi-transparent image for overlay */
      #overlay {
      background-image:url(images/transparent.png);
      color:#efefef;
      }

      /* container for external content. uses vertical scrollbar if needed */
      div.wrap {
      height:441px;
      overflow-y:auto;
      }
      </style>

      </head>
      <body>
      <form id="form1" runat="server">
      <!-- external page is given in href- attribute (as it should be) -->
      <a href="ExtOverlay.aspx" rel="#overlay">

      <!-- remember that you can use any element inside anchor tag -->
      <button type="button">Show external page in overlay</button>
      </a><br />
      <a href="ExtOverlayRegister.aspx" rel="#overlay">

      <!-- remember that you can use any element inside anchor tag -->
      <button type="button">Show Register external page in overlay</button>
      </a><br />
      <a href="ExtOverlayVote.aspx" rel="#overlay">

      <!-- remember that you can use any element inside anchor tag -->
      <button type="button">Show Vote external page in overlay</button>
      </a>
      <!-- overlayed element -->
      <div class="overlay" id="overlay">

      <!-- the external content is loaded inside this tag -->
      <div class="wrap"></div>


      </div>

      <!-- make all links with rel attribute to open overlays -->
      <script>

      $(function() {

      // if function argument is given to overlay it is assumed onBeforeLoad event listener
      $("a[rel]").overlay(function() {

      // grab wrapper element inside content
      var wrap = this.getContent().find("div.wrap");

      // load only for the first time it is opened
      {
      wrap.load(this.getTrigger().attr("href"));
      }
      });
      });
      </script>


      </form>
      </body>
      </html>