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 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/
