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" <[email protected]> À: [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, [email protected] 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" <[email protected]> > À: [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, [email protected] 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" <[email protected]> > > À: [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/
