Loading ...
Sorry, an error occurred while loading the content.

Re: [OLmws] Screen Vector Graphics (was: Newbie help please)

Expand Messages
  • Foteos Macrides
    ... Jacqai, That error is associated with browsers such as Firefox and Opera which have native SVG support instead of using an SVG viewer plug-in such as
    Message 1 of 1 , Apr 16 1:08 AM
    View Source
    • 0 Attachment
      > At first I got a different error. overlib is not defined but
      > after reading a few posts on this excellent site I called
      > parent.overlib() and hey presto excellent tooltips.
       
      Jacqai,
       
      That error is associated with browsers such as Firefox and Opera which have native SVG support instead of using an SVG viewer plug-in such as Adobe's for IE and MAC.  The native SVG support implemented via an embed element ends up functioning in a manner that is homologous to an iframe.  You not only need to indicate the parent for overlib, nd and any cClick calls, but also for the overlib commands (e.g., parent.SHADOW).  Also, the parent's onmousemove handler is inoperative over the SVG graphic, so you need to use frame-based (MIDX or RELX and MIDY or RELY) or REF-based positioning of the popups.
       
      Using parent.foo with popup functions and commands is not a problem for SVG viewer plug-ins because in their case parent and self are the same.  But it is better to deal with this via conditional re-definition of the popup functions and use of the overlibmws_regCore.js module. 
       
      I've been playing with this some more, with a chart.html:
       
      <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
       "http://wwww.w3org/TR/xhtml11/DTD/xhtml11.dtd"
      >
      <html>
      <head>
      <script type="text/javascript" src="overlibmws.js"></script>
      <script type="text/javascript" src="overlibmws_iframe.js"></script>
      <script type="text/javascript" src="overlibmws_shadow.js"></script>
      <script type="text/javascript" src="chart.js"></script>
      <title>Grape Type Chart</title>
      </head>
      <body>
      <div id="svgDiv">
      </div>
      <script type="text/javascript">
      //<![CDATA[
      embedChart('svgDiv', 'SVD1');
      //]]>
      </script>
      </body>
      </html>
       
      that is served as text/html via:
       
       
      and a chart.xhtml:
       
      <?xml version="1.0" encoding="ISO-8859-1"?>
      <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
       "http://wwww.w3org/TR/xhtml11/DTD/xhtml11.dtd"
      >
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
      <script type="text/javascript" src="overlibmws.js"></script>
      <script type="text/javascript" src="overlibmws_iframe.js"></script>
      <script type="text/javascript" src="overlibmws_shadow.js"></script>
      <script type="text/javascript" src="chart.js"></script>
      <title>Grape Type Chart</title>
      </head>
      <body>
      <div id="svgDiv">
      </div>
      <script type="text/javascript">
      //<![CDATA[
      embedChart('svgDiv', 'SVD1');
      //]]>
      </script>
      </body>
      </html>
       
      that is served as application/xhtml+xml (and thus not useable by IE) via:
       
       
      The chart.js:
       
      function embedChart(idDiv, idSvg)
      {
       var dId = (idDiv || 'svgDiv'), sId = (idSvg || 'SVG1'),
       o = OLgetRef(dId) ;
       if (o) o.innerHTML =
        '<embed'
       +' name="'+sId+'"'
       +' id="'+sId+'"'
       +' src="chart.svg"'
       +' type="image/svg+xml"'
       +' width="800"'
       +' height="700"'
       +' wmode="transparent"'
       +(OLie5 || OLmac?
         ' pluginspage="http://www.adobe.com/svg/viewer/install/"':'')
       +' />';
      }
       
      now uses a div content replacement instead of document.write, so that it will also work with true xhtml.
       
      The chart.svg:
       
      <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
       "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="800px"
       height="700px"
       onload="init(evt)"
      >
      <script type="text/ecmascript" xlink:href="overlibmws_regCore.js" />
      <script type="text/ecmascript" xlink:href="buildGraph.js" />
      <text x="200" y="20">Chart for Wine Site (hover over bars for values)</text>
      </svg>
       
      now imports the overlibmws_regCore.js module in addition to my version of your buildGraph.js.  The latter still includes debugging code which one wouldn't normally include, but in the absence of any problems works like yours in getting the data for the vector graphics via AJAX.  The conditional re-definitions of popup functions and commands is done at the top of its init(evt) function that is called via the svg's onload event:
       
      . . . 
      function init(evt)
      {
          // use parent's overlibmws modules if needed
          if (parent != self && typeof overlib == 'undefined')
          {
              overlib = parent.overlib ;
              nd = parent.nd ;
              cClick = parent.cClick ;
              OLregisterPlugins('iframe','shadow');
          }
      . . . 
       
      and REF-based positioning is used for the popups on hovers over the chart bars.
       
      Fote
      --
       
    Your message has been successfully submitted and would be delivered to recipients shortly.