Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 1:03 am



Reply to topic  [ 8 posts ] 
 Attach/detach without interaction 
Author Message

Joined: Thu Feb 14, 2013 2:24 pm
Posts: 5
Post Attach/detach without interaction
I recently made the switch from PIE.js to PIE.htc for the performance improvements, however I'm finding one issue to be rather troubling.

I see that the JS version sets up listeners for mouse events and only mouse events. Is there no way to attach / detach PIE without mouse interaction?

For instance, I have a menu system that applies a linear gradient background to the active selection. When clicking a new selection, the new one gets the linear background, however the old one still has it because my mouse has not interacted with this element.

Is there no way around this behavior?


Thu Feb 14, 2013 2:35 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach/detach without interaction
I'm a bit confused by your description of your problem. PIE does not use mouse events for attachment -- it does listen for them to pick up dynamic changes, but that happens after it is attached.

In your menu example, how does the old selection have its style changed? Is some script setting styles directly? Is it adding/removing a class on the styled element, or on an ancestor of the element?

Do you have a URL where I can see what you're talking about?


Fri Feb 15, 2013 11:03 am
Profile

Joined: Thu Feb 14, 2013 2:24 pm
Posts: 5
Post Re: Attach/detach without interaction
Sorry, I typed that in a hurry and realize now that I wasn't very descriptive. Here goes...

The tab structure is pretty simple: div.tabs > ul.nav-tree > li.has-child (for nested options, otherwise no class) > a > span

If the li has a child, then the structure follows the same ul pattern, but with ul.nested as the base and residing as a sibling to the a that triggered it. We only allow our menus to go 2 levels deep at this time. So at most, 2 nested uls.

While clicking around, JS will apply an "active" class to the ancestor LI of whatever A link represents the page you're on (content is AJAXed in, so the menu relies on JS for class setting). Additionally, if clicking a tab with nested items, an "open" class is applied to the LI in the same manner.

Now the problem I'm having is this... PIE styles are applied to the A directly underneath the dynamic LI. So, I have pie set to watch ancestors, and it does. However, it's having trouble attaching properly. When traversing the menu, the last element properly detaches, however the new one doesn't attach immediately.

For instance, if I click a new link and don't move my mouse at all, immediately the old link will lose pie styling as it should. The new link, however, will display non-styled until I mouseout / focusout of the element. If I can understand WHY it's doing this, I can fix the multiple other instances (outside of tabs) where similar behavior is happening... Because this issue is happening randomly throughout the site.

For reference, I'm using 2.0beta.


Fri Feb 15, 2013 11:58 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach/detach without interaction
That sounds very strange. My initial thought was -pie-watch-ancestors but you say you're already using it.

Would you mind swapping out 2.0 beta for 1.0.0 and see if you have the same behavior? That would help narrow down if this is a new 2.0 bug.


Fri Feb 15, 2013 12:35 pm
Profile

Joined: Thu Feb 14, 2013 2:24 pm
Posts: 5
Post Re: Attach/detach without interaction
Yea, unfortunately it's happening with both versions.

I have noticed that PIE.htc can get a little wonky when code is set in multiple CSS blocks (where it overrides lines from other blocks). I've been digging through our code trying to explicitly set certain code blocks.


Fri Feb 15, 2013 1:04 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach/detach without interaction
You say that your page content is ajax'ed in -- is the menu's DOM structure similarly generated on the client side in JS?

If you have a URL you could share that would allow me to actually dig in rather than just making blind guesses. ;)


Fri Feb 15, 2013 1:50 pm
Profile

Joined: Thu Feb 14, 2013 2:24 pm
Posts: 5
Post Re: Attach/detach without interaction
Trust me, I wish I could post it too. Sadly, this is for a corporate site, so everything is locked down to the public.

All of our navigation is static, just AJAX'd content. Granted, our site does use server side includes to build out the HTML page, but as far as the browser is concerned, there is no difference.


Fri Feb 15, 2013 2:45 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach/detach without interaction
OK... well, I'm happy to help but unfortunately I don't think I can do so without anything to look at. :/ If you were able to build a simple standalone HTML page that replicates your problem, then I could use that as a testcase.


Fri Feb 15, 2013 5:49 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: Majestic-12 [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.