ebollens / efx

CSS-based target-trigger effects library powered by jQuery.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

efx awareness of webblocks breakpoints

lnicks opened this issue · comments

Right now, efx toggle will hide an element as desired, however I only want to use it at a certain breakpoint.

To remedy this, I've set a media query to display:none on the menu at a smaller breakpoint, hoping that efx would toggle it to visible, but the button with the effect attached to it does not have an effect.

When I remove the media query, behavior returns to normal.

Is there a better way to do this?

/cc @ebollens @chris4ucla

Interesting request. The drivers, as they currently stand, do not support knowledge of things like window size. Let me think on this.

I think we're relatively able to get around the contextual issue with webblocks itself. I do think this feature will be helpful, especially in future projects that involve more data oriented information, especially anything with tabs as they will need to be responsive etc.

I am wondering if there's more of a bug involved with media queries in efx. The item is loading as visible, then when it hits a breakpoint it vanishes. My initial hopes were that the script would just change the display state, ignoring everything else.

I've decided that Efx is not going to have media query awareness. Doing so is simply outside the score of providing a target-trigger mechanism, instead being more about responsive design. You do have the ability to sniff screen size and simply not call $(..).efx() if it's the wrong size - or to show an Efx-enabled element at one size and a different one at another (this latter approach is used by the WebBlocks documentation, for instance).

Closing this issue as not a feature Efx will provide.