Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interchange does not work on img & div #9054

Closed
hongc-cc opened this issue Jul 27, 2016 · 3 comments
Closed

Interchange does not work on img & div #9054

hongc-cc opened this issue Jul 27, 2016 · 3 comments

Comments

@hongc-cc
Copy link

hongc-cc commented Jul 27, 2016

Interchange at foundation 6.2.3 does not work on img and div
Console shows "Uncaught ReferenceError: We're sorry, 'interchange' is not an available method for this element."
Same DOM works on foundation 5.

How can we reproduce this bug?

  1. Set up the required dom structure, and js libraries.
  2. Check console

What did you expect to happen?
Change when you resize browser

What happened instead?
Nothing at all. No image, no change on DOM.

Test case:
Foundation 5 working example:
Foundation 6 Not working example

@Deckluhm
Copy link
Contributor

Multiple issues here.

First, as described in the Javascript section of the Foundation 6 documentation, reflow from Foundation 5 is now replaced by reInit in Foundation 6:

But actually you don't need to reInit anything here, since you don't inject HTML content after page load.

Another issue is your interchange syntax:

  • Foundation 5: [https://website.com/image_small.jpg, (small)]
  • Foundation 6: [https://website.com/image_small.jpg, small] (note that there is no parentheses)

Your last error is that you are using Foundation 5 CSS with Foundation 6 JS.

Here is a working CodePen: https://codepen.io/anon/pen/qNKXGV

@hongc-cc
Copy link
Author

hongc-cc commented Jul 28, 2016

I must be blind or something that i didnt see the parentheses syntax update. Now everything is good. However the syntax is really strict that:

[https://website.com/image_small.jpg, small] is okay but
[https://website.com/image_small.jpg,small] is not okay.

Thanks anyway

@ltmail
Copy link

ltmail commented May 10, 2017

Hi currently i am using data-interchange for images on different breakpoints,
issue is when i am not giving any image source to small screen(tablet),
and when i am resizing the window from tablet to desktop or tablet to mobile i am getting source unknown for desktop and mobile in-spite of having images for both the breakpoints
could anyone help me out in resolving the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants