Menu icon Foundation
Interchange - is there a way to use HTML code blocks rather than HTML pages?

Hi,
in interchange the sample code shows us that we would require it to specify html pages for each type of media-query.
is it possible to specify some HTML code blocks instead ?

interchangemedia-query

Hi,
in interchange the sample code shows us that we would require it to specify html pages for each type of media-query.
is it possible to specify some HTML code blocks instead ?

Alok Jethanandani over 5 years ago

Hey Asif, from what i understand you want to interchange small chunks of code (partials) at different breakpoints, yes?

If so, follow this code:

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]">
   <!-- Insert default view here. This could be a desktop, tablet or mobile view depending on the platform you're optimizing for. ---> 
  </div>
</div>

http://foundation.zurb.com/docs/components/interchange.html

If you can describe your problem in detail, then I'd love to offer a more specific and targeted solution.

Asif over 5 years ago

Dear Alok,
I see that in the docs and the sample code the HTML partials are fetched from HTML files like small.html, medium.html, large.html.
My Question is that why cant we do away with the HTML pages and use html blocks or content inside divs like we do in accordion or tabs? specifying which div block to use for small, medium or large screens?
My problem is that I'm trying to build a dynamic component with interchange. the admin part would take in data for different media queries and on the user side this would generate the interchange code to display the html blocks as per the settings.
Now as per the document and the sample code we would have to take those HTML code blocks and create HTML pages out of them, now that is very tedious and I don't think a good solution. but if we have some sort of a structure like the accordion or the tabs, we could then do away with the HTML pages and have the code blocks right in there which could be shown as per the media queries settings.
I hope whatever I said made sense :).

Thanks,

Oliver Beck over 5 years ago

Hi Asif

I've got the same problem... did you find a solution?