Search the web
Sign In
New User? Sign Up
svg-developers · SVG Developers
  • Members Only
  • Post
  • Files
  • Photos
  • Links
  • Polls
  • Promote
  • Groups Labs (Beta)
  • Chat

Group Information

  • Members: 5414
  • Category: Data Formats
  • Founded: Aug 16, 1999
  • Language: English
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Message search is now enhanced, find messages faster. Take it for a spin.

Messages

   Messages Help
Message #
Search:
Advanced
problem adding multiple SVG's containing event listeners in HTML5   Message List  
Reply Message #65515 of 65551 |
Re: problem adding multiple SVG's containing event listeners in HTML5

Thanks very much for your help Yannick! That change fixed the problem for me.

Donna

--- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
>
> Hi,
> your variables are declared as global, so when you call the init function a
second time, they are overwritten.
> Just move these variables and functions inside the Init constructor and it
will be fine (see below).
> Yannick
>
> function Init(anchor) {
>
> var SVGRoot = null;
> var viewBox = null;
> var TrueCoords = null;
> var singleTip = null;
> var singleBox = null;
> var singleText = null;
> var tiptspan = null;
>
> function GetTrueCoords(evt)
> {
> var p1 = SVGRoot.createSVGPoint();
> var p2;
> var m = SVGRoot.getScreenCTM();
> p1.x = evt.clientX;
> p1.y = evt.clientY;
> p2 = p1.matrixTransform(m.inverse());
>
> TrueCoords.x = Math.round(p2.x*100) / 100;
> TrueCoords.y = Math.round(p2.y*100) / 100;
> }
>
> function HideTooltip( evt )
> {
> tiptspan.firstChild.nodeValue = null;
> singleTip.setAttributeNS(null, 'visibility', 'hidden');
> }
>
> function ShowTooltip( evt )
> {
> GetTrueCoords( evt );
> var targetElement = evt.target;
>
> var targetTspan = targetElement.getElementsByTagName('desc').item(0);
>
> if ( targetTspan) {
> if (targetTspan.firstChild != null)
> tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }
>
> if ( '' != tiptspan.firstChild.nodeValue )
> {
> var outline = singleText.getBBox();
>
> singleTip.setAttributeNS(null, 'visibility', 'visible');
>
> xPos = TrueCoords.x;
> yPos = TrueCoords.y-20;
>
> singleBox.setAttributeNS(null, 'height', outline.height + 10);
> singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' +
yPos + ')');
> }
> }
>
> SVGRoot = document.getElementById(anchor);
> TrueCoords = SVGRoot.createSVGPoint();
>
> singleTip = document.getElementById(anchor + '_singleTip');
>
> singleBox = document.getElementById(anchor + '_singlebox');
>
> singleText = document.getElementById(anchor + '_singleText');
> tiptspan = document.getElementById(anchor + '_tiptspan');
>
> SVGRoot.addEventListener('mousemove', ShowTooltip, false);
> SVGRoot.addEventListener('mouseout', HideTooltip, false);
>
> if (navigator.appName == 'Microsoft Internet Explorer') {
> if (singleText != null) {singleText.setAttributeNS(null, 'class',
'ietiptext' ); }
> }
> }
>
>
> ----- Mail original -----
> De: "Donna Antle" <Donna.Antle@...>
> À: svg-developers@yahoogroups.com
> Envoyé: Mercredi 25 Janvier 2012 20:30:59
> Objet: [svg-developers] problem adding multiple SVG's containing event
listeners in HTML5
>
>
>
>
>
>
> Hi all,
>
> I've got some SVG files that contain mousemove event listeners to invoke a
script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,
only the last page shows the tooltips when I run in most browsers. In IE9, I get
the tooltips across all the SVG's. This is my sample HTML file containing the
script and 2 child SVG elements. Any idea what I need to do to get each SVG to
display their unique tooltips?
>
> Thanks!
>
>
> <!DOCTYPE html >
> <html>
> <head>
> <meta charset="windows-1252"/>
> <meta name="generator" content="SAS 9.4"/>
> <title>SVG Inlined in HTML5</title>
>
> <script type="text/ecmascript">
> var SVGRoot = null;
> var viewBox = null;
> var TrueCoords = null;
> var singleTip = null;
> var singleBox = null;
> var singleText = null;
> var tiptspan = null;
> function Init(anchor) {
> SVGRoot = document.getElementById(anchor);
> TrueCoords = SVGRoot.createSVGPoint();
>
> singleTip = document.getElementById(anchor + '_singleTip');
>
> singleBox = document.getElementById(anchor + '_singlebox');
>
> singleText = document.getElementById(anchor + '_singleText');
> tiptspan = document.getElementById(anchor + '_tiptspan');
>
> SVGRoot.addEventListener('mousemove', ShowTooltip, false);
> SVGRoot.addEventListener('mouseout', HideTooltip, false);
>
> if (navigator.appName == 'Microsoft Internet Explorer') {
> if (singleText != null)
> singleText.setAttributeNS(null, 'class', 'ietiptext' );
> }
> }
>
> function GetTrueCoords(evt)
> {
> var p1 = SVGRoot.createSVGPoint();
> var p2;
> var m = SVGRoot.getScreenCTM();
> p1.x = evt.clientX;
> p1.y = evt.clientY;
> p2 = p1.matrixTransform(m.inverse());
>
> TrueCoords.x = Math.round(p2.x*100) / 100;
> TrueCoords.y = Math.round(p2.y*100) / 100;
> }
>
> function HideTooltip( evt )
> {
> tiptspan.firstChild.nodeValue = null;
> singleTip.setAttributeNS(null, 'visibility', 'hidden');
> }
>
> function ShowTooltip( evt )
> {
> GetTrueCoords( evt );
> var targetElement = evt.target;
>
> var targetTspan = targetElement.getElementsByTagName('desc').item(0);
>
> if ( targetTspan) {
> if (targetTspan.firstChild != null)
> tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }
>
> if ( '' != tiptspan.firstChild.nodeValue )
> {
>
> var outline = singleText.getBBox();
>
> singleTip.setAttributeNS(null, 'visibility', 'visible');
>
> xPos = TrueCoords.x;
> yPos = TrueCoords.y-20;
>
> singleBox.setAttributeNS(null, 'height', outline.height + 10);
> singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos +
')');
> }
> }
> </script>
>
>
> <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
> width="801" height="601"
> xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1"
onload='Init("SVGMain1")' >
> <desc></desc>
> <defs>
> <clipPath id="SVGMain_clipPage1">
> <rect x="-1" y="-1" width="801" height="601"/>
> </clipPath>
> </defs>
> <g id="SVGMain1_Page1">
> <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
> stroke-linejoin: round; "/>
> <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
> <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
> <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG1</text>
> <rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
> <desc>Graphics text slide 1</desc>
> </rect>
> </g>
> <g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none">
> <rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
> <text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
> <tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan>
> </text>
> </g>
> <defs>
> <style type="text/css"><![CDATA[
> text { white-space: pre }
> text.ietiptext { white-space: normal }
> text.tiptext { white-space: pre }
> ]]></style>
> </defs>
>
> </svg>
>
> <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink="
http://www.w3.org/1999/xlink "
> width="801" height="601" xml:space="preserve" baseProfile="full" version="1.1"
id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 601">
> <desc></desc>
> <defs>
> <clipPath id="SVGMain2_clipPage1">
> <rect x="-1" y="-1" width="801" height="601"/>
> </clipPath>
> </defs>
> <g id="SVGMain2_Page1">
> <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
> stroke-linejoin: round; "/>
> <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
> <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
> <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG2</text>
> <rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
> <desc>Graphics text slide 2</desc>
> </rect>
> </g>
> <g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none">
> <rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2" ry="2"
fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
> <text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial', sans-serif"
font-size="8" class="tiptext">
> <tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan>
> </text>
> </g>
>
> </svg>
>
> </body>
> </html>
>
Fri Jan 27, 2012 2:42 pm

Show Message Option
sasdza
Offline Offline
Send Email Send Email

Message #65515 of 65551 |
Expand Messages Author Sort by Date

Hi all, I've got some SVG files that contain mousemove event listeners to invoke a script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,... 		Donna Antle
sasdza Offline Send Email 		Jan 25, 2012
7:31 pm

Hi, your variables are declared as global, so when you call the init function a second time, they are overwritten. Just move these variables and functions...
yannick.bochatay@... Send Email Jan 26, 2012
1:15 pm

Thanks very much for your help Yannick! That change fixed the problem for me. Donna...
Donna Antle
sasdza Offline Send Email 		Jan 27, 2012
2:42 pm
< Prev Topic  |  Next Topic >
Message #
Search:
Advanced
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines NEW - Help