javascript - Add node navigation inside a SVG object -



want navigate 1 object/node smoothly inside svg file. used javascript library: http://flesler.blogspot.de/2009/06/jqueryserialscroll-122-released.html seems work fine. problem that, library seems work references (#nodeid) links defined outside <.svg> objects, if use reference link on object inside svg node, act incorrect, meaning not scroll smoothly defined node id. sample(the sample work fine javascript libs referenced):

<?xml version="1.0" encoding="utf-8" standalone="no"?>  <!doctype html public "-//w3c//dtd svg 1.1//en"   "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">  <!-- generated graphviz version 2.38.0 (20140413.2041)   -->  <!-- title: sr_glo_main pages: 1 -->    <html>  <head>  <link type="text/css" rel="stylesheet" href="css/style.css" />  	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  	<script type="text/javascript" src="./js/jquery.scrollto.min.js"></script>  	<script type="text/javascript" src="./js/jquery.localscroll.js"></script>  	<script type="text/javascript">  		jquery(function( $ ){  			/**  			 * jquery.localscroll's settings, belong jquery.scrollto, check it's demo example of each option.  			 * @see http://demos.flesler.com/jquery/scrollto/  			 * can use every single setting of jquery.scrollto, in settings hash send jquery.localscroll.  			 */  			  			// default axis 'y', in demo, want scroll both  			// can modify default  			$.localscroll.defaults.axis = 'xy';  			  			/**  			 * note: use $.localscroll instead of $('#navigation').localscroll()  			 * affect >> , << links. want every link in page scroll.  			 */  			$.localscroll({  				//target: '#content', // selector or jquery object too.  				queue:true,  				duration:1000,  				hash:true,  				lazy:true,  				onbefore:function( e, anchor, $target ){  					// 'this' settings object, can modified  				},  				onafter:function( anchor, settings ){  					// 'this' contains scrolled element (#content)  				}  			});  		});    </script>  </head>  <body>    <a href="#node1">section 1</a>    <svg width="3249pt" height="2200pt" viewbox="0.00 0.00 3249.00 2200.00" >    <g id="nodex">   <a xlink:href="#node1">  	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />   </a>   </g>     <g id="node1">   <circle cx="1880" cy="1580" r="40" stroke="green" stroke-width="4" fill="red" />   </g>     </svg>    </body>

so when clicking "section 1", html center smooth transition red circle(with id node1) when press yellow circle has link reference #node1 not working , html not focused. want make work behaviour when pressing "section 1"
thank you

after investigations came solution. so, navigate inside svg 1 sub-node can:
1. use ecmascript inside html file holds svg node. need use interact svg elements. focus specific element need use "focusable" attributes described here: http://www.w3.org/tr/svgtiny12/interact.html#focusable-attr sample can find here: http://www.w3.org/tr/svgtiny12/examples/navigation.svg 'tab' can navigate 1 menu another. seems not work fine, seems there no browsers support navigation focus in manner. think in future when browsers support can use this.
in meantime can use solution 2
2. use above javascript library navigate 1 node another. modifications added that:

<script type="text/javascript">  		jquery(function( $ ){  			/**  			 * jquery.localscroll's settings, belong jquery.scrollto, check it's demo example of each option.  			 * @see http://demos.flesler.com/jquery/scrollto/  			 * can use every single setting of jquery.scrollto, in settings hash send jquery.localscroll.  			 */  			  			// default axis 'y', in demo, want scroll both  			// can modify default  			$.localscroll.defaults.axis = 'xy';  			  			$.localscroll({  				//target: '#content', // selector or jquery object too.  				queue:true,  				duration:1000,  				hash:true,  				lazy:true,  				onbefore:function( e, anchor, $target ){  					// 'this' settings object, can modified  				},  				onafter:function( anchor, settings ){  					// 'this' contains scrolled element (#content)  				}  			});  			  			$('#nodex').click(function() {  				$('html, body').scrollto(document.getelementbyid('node1'), 1000);  			});  		});    </script>


Comments

Post a Comment

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

i'm running strange behavior powershell start-process call. here call: $process = start-process ` "c:\somepath\mybinary.exe" ` -passthru ` -credential $defaultcredential ` -wait ` -workingdirectory "c:\somepath" ` -loaduserprofile if ($process.exitcode -ne 0) { #do } this call return exit code - 1073741502 . after quick search, exit code seems related generic error when program not load required dll (aka. status_dll_init_failed ). when run without -credential $credential program runs correctly. in order isolate problem, manually launched some.exe in prompt target credential , runs smoothly. so problem seems come way start-process cmdlet launch process. i found potential solutions problem tried apply no luck : link , link . would have idea of what's going on here ? edit 1: run proc mon monitoring program activities when launched directly or via powershell script. problem seems occur when loading kernelbase
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent()
Read more

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -

i have hashset's each stores t, have written test application compares different relation algorithms can think of, i'm not pleased results getting. does there exist more efficient ways of achieving object relations, once testing? using system; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.diagnostics; namespace linqtests { class program { static void main(string[] args) { hashset<user> usertable = new hashset<user>(); hashset<userproperty> userpropertytable = new hashset<userproperty>(); #region lets create dummy data. console.writeline("please wait while creating dummy data, can take while..."); console.writeline(""); int rows = 1000000; for(int x = 0; x < rows; x++) { random rnd = new random(); // ad
Read more