Wow, cool. A thousand thanks for this. Really cool! I adapted the script a little bit, and it works great.
Two things that I realize only now (that this "étappe" has been achieved)... One is that the order of elements is different for each year. Ok, should be not too complicated to add that functionality (?!). The other is that I need to show/hide the tooltip too when the lines are being shown/disappear when moving up and down the column. Try to fiddle around for a couple of hours, but didn't succeed. Will further investigate. Thanks a lot for your help, and BTW, here is the URL to the app: http://geodata.grid.unep.ch/extras/data_vis_bars.php Best wishes, Stef --- In [email protected], yannick.bochatay@... wrote: > > Hi Stefan, > I think you confuse key events and mouse events. > I wrote something quickly, I hope it will help : > http://jsfiddle.net/ybochatay/xSeT2/1/ > First you have to click on the "result" frame to give the focus. > Then you can change the selected rect by clicking or using up and down arrows. > Cheers, > Yannick > > ----- Mail original ----- > De: "Stefan Schwarzer" <st.schwarzer@...> > Ã: [email protected] > Envoyé: Jeudi 5 Janvier 2012 10:06:40 > Objet: Re: [svg-developers] Use the cursor (arrows) to move up and down > elements? > > Hi there, > > after spending again some time on this subject, I found a first part of the > solution, which is how to access the "keydown", "keyup" part. > > However, I would need to somehow access the ID of the SVG elements (or/and > the ID of the next element) (in order to hide/show current and next line), > and after trying around for quite some time with e.target.id and other stuff, > I just can't find the solution. > > > In the moment the code looks like this: > > > // all SVG elements (lines) > var list_elements = ['g672','g668','g676','g680','g688','g684']; > > > // Use arrows to move up and down. Script partially extracted from > http://jsbin.com/iloxi/edit#javascript,html,live > var keys = { /*up*/38:0, /*down*/40:0 }; > > > document.addEventListener("keydown", function(e) > { > if(e.keyCode in keys) > { > var targ; > if (!e) var e = window.event; > if (e.target) targ = e.target; > else if (e.srcElement) targ = e.srcElement; // Microsoft > if (targ.nodeType == 3) // defeat Safari bug > targ = targ.parentNode; > > > alert("The selected SVG-ID is: " . xxxxx); > > } > }, false); > > > Thanks for any help! > > Stef > > > On Oct 17, 2011, at 7:25 AM, yannick.bochatay@... wrote: > > > Hi, > > in my example it was an array of DOM objects, but you can do it with an > > array of ID strings, then browse the array with > > document.getElementById(yourListOfElements[ind]). > > You can manage with only one click event listener by testing the target, > > instead of attaching to each element : > > > > document.addEventListener('click',function(e) { > > var ind = yourListOfElements.indexOf(e.target); //check if the target is in > > your array > > if (ind === -1) { return; } > > else { focusOnElement(ind); } > > },false); > > > > I think you have to master DOM events before going further, because this is > > not specific to SVG development. > > https://developer.mozilla.org/en/DOM/event > > > > Cheers, > > > > Yannick > > http://ybochatay.fr > > > > ----- Mail original ----- > > De: "Stefan Schwarzer" <st.schwarzer@...> > > Ã: [email protected] > > Envoyé: Vendredi 14 Octobre 2011 12:03:00 > > Objet: Re: [svg-developers] Use the cursor (arrows) to move up and down > > elements? > > > > Thanks a lot for that. > > > > Would the elements be listed in the first line as [g4, g8, g12....] or as > > ["g4", "g8", "g12"...]? > > > > Do I need to add a onclick event to the text elements from which then the > > navigation (up, down) be initiated? > > > > Stef > > > > On Oct 13, 2011, at 6:48 AM, yannick.bochatay@... wrote: > > > > > Hi, > > > I wrote something quickly (no test), are you looking for something like > > > that ? > > > Regards, > > > > > > Yannick Bochatay > > > http://ybochatay.fr > > > > > > var yourListOfElements = [ elmt1, elmt2 /*, etc */ ]; > > > var currentElement = false; > > > > > > var focusOnElement = function(ind) { > > > > > > if (currentElement) { /* code to blur yourListOfElements[currentElement] > > > */ } > > > /* code to focus on yourListOfElements[ind] */ > > > currentElement = ind; // > > > }; > > > > > > var keypressFunc = function(e) { > > > if (currentElement === false) { return; } //no action if no element is > > > displayed > > > if (e.keyCode === 38) { focusOnElement(currentElement-1); } //up arrow > > > else if (e.keyCode === 40) { focusOnElement(currentElement+1); } //down > > > arrow > > > }; > > > document.addEventListener('keypress',keypressFunc,false); > > > > > > yourListOfElements.forEach(function(elmt,ind) { > > > elmt.addEventListener('click',function() {focusOnElement(ind);},false); > > > }); > > > > > > ----- Mail original ----- > > > De: "luftikus_143" <st.schwarzer@...> > > > Ã: [email protected] > > > Envoyé: Mercredi 12 Octobre 2011 13:36:47 > > > Objet: [svg-developers] Use the cursor (arrows) to move up and down > > > elements? > > > > > > Hi there, > > > > > > I saw when searching around that there is the possibility that SVG > > > elements react on cursors. I would like that the user clicks on an > > > text-element, and then has the possibility to use the arrows (up, down) > > > of the keyboard to move up and down and display the next elements. > > > > > > Is that possible? And what do I need for this? > > > > > > Thanks a lot for any hints! > > > > > > > > > > [Non-text portions of this message have been removed] > > > > ------------------------------------ > > > > ----- > > To unsubscribe send a message to: [email protected] > > -or- > > visit http://groups.yahoo.com/group/svg-developers and click "edit my > > membership" > > ----Yahoo! Groups Links > > > > > > > > [Non-text portions of this message have been removed] > > > > ------------------------------------ > > ----- > To unsubscribe send a message to: [email protected] > -or- > visit http://groups.yahoo.com/group/svg-developers and click "edit my > membership" > ----Yahoo! Groups Links > ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
