Adding event listeners to metro style grid application?

Question

I have just created a sample grid application using html5 and JavaScript.

What now I want to achieve is to give some animation when user click on group header.

For that I wrote two functions. One for mousedown event and one for mouse up event:

function animateDown() {
    WinJS.UI.Animation.pointerDown(this);
}
function animateUp() {
    WinJS.UI.Animation.pointerUp(this);
}

Now I want add these functions to event listeners for each header. There are many groups headers and they don't have any ids, just classnames.

So how can I add an eventlistener for all the headings?

Jim Wooley · Accepted Answer · 2013-02-26 15:45:34Z

1

You need to use event delegation. So if all elements are in a container you can do:

function toggle(event) {
   var header = event.target;
   if (header.classList.toggle("open") {
      WinJS.UI.Animation.pointerDown(header);
   } else {
      WinJS.UI.Animation.pointerDown(header);
   }
}

document.querySelectorAll(".container").addEventListener("click", toggle, false);

edited Feb 26, 2013 at 15:45

Jim Wooley

10.4k1 gold badge27 silver badges44 bronze badges

answered Feb 28, 2012 at 12:15

slashnick

26.6k10 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Null Pointer Over a year ago

thanks :) .It seems like more straight forward way ..But in which page will i give this code? I tried to give this in groupeditempage.js.. but its not working

Null Pointer Over a year ago

I tried to give this code in many place.. but all time container only contain basic html(means with winjs controls declerations ) even after i assigned every values

slashnick Over a year ago

According to msdn.microsoft.com/en-us/library/windows/apps/br212680.aspx you can pass a collection to pointerDown so maybe you can do WinJS.UI.Animation.pointerDown(document.querySelectorAll(".header")) if each of your headings has a class of header.

Collectives™ on Stack Overflow

Adding event listeners to metro style grid application?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related