Menu icon Foundation
interchange

Hi everyone,

just putting down a few thoughts.

I'm used to using the classes hide and show etc to display different content according to each respective screen size, however I've been reading up on interchange and it occurred to me that it's very similar to a PHP include only client side related and more geared towards device detection.

I normally just create several divs like the following to create separate content, but wondered if any of you have started using interchange and how you feel it is better or worse that what I'm using below.

eg

<div class="show-for-small hide-for-medium-up">
    <p>small content</p>
</div>

<div class="show-for-medium hide-for-small hide-for-large-up">
    <p>medium content</p>
</div>

<div class="show-for-large hide-for-medium-down">
    <p>large content</p>
</div>
            

         

interchange

Hi everyone,

just putting down a few thoughts.

I'm used to using the classes hide and show etc to display different content according to each respective screen size, however I've been reading up on interchange and it occurred to me that it's very similar to a PHP include only client side related and more geared towards device detection.

I normally just create several divs like the following to create separate content, but wondered if any of you have started using interchange and how you feel it is better or worse that what I'm using below.

eg

<div class="show-for-small hide-for-medium-up">
    <p>small content</p>
</div>

<div class="show-for-medium hide-for-small hide-for-large-up">
    <p>medium content</p>
</div>

<div class="show-for-large hide-for-medium-down">
    <p>large content</p>
</div>
            

         
Robin Cox over 5 years ago

Good point.

Craig Adams over 5 years ago

Hi Robin, just been playing around with interchange and I suppose I can see a real benefit, that being cleaner code and separation of content from the main HTML/PHP. Here is an example. As you can see interchange keeps the code in the page quite simple and means I can work on the individual elements for each screen size (small, medium, large) in a separate document.

<?php 

include('includes/header.php'); 

?>


<div data-interchange="[interchange/small_index.php, (small)], [interchange/medium_index.php, (medium)], [interchange/large_index.php, (large)]">
  <div data-alert class="alert-box secondary radius">
    This is the default content.
    <a href="#" class="close">&times;</a>
  </div>
</div>

<?php include('includes/footer.php'); ?>

Karl Ward over 5 years ago

I think interchange and the visibility classes have different usage areas. If it is just to show/hide various html content based on screen size like in your example, then the visibility classes are most effective. Interchange is required when you want to load modules, for example images, media or Google maps (as in the docs example). This should not be handled by visibility classes, as it would lead to loading multiple external data files, some of which will just be hidden.

If it is just for plain html content where it does not seem logical or necessary to load external partials or external files, then just use the visibility classes.

I also wanted to comment on your example code ... The visibility classes are already quite smart, and there is no need to add multiple visibility classes like you have done.

<div class="show-for-small hide-for-medium-up"> ...
<div class="show-for-medium hide-for-small hide-for-large-up"> ...
<div class="show-for-large hide-for-medium-down"> ...

... is the same as ...

<div class="show-for-small"> ...
<div class="show-for-medium"> ...
<div class="show-for-large"> ...

show-for-medium means it will show for medium, and hide for small and hide for large-up. No need to specify additional classes like that.

Robin Cox over 5 years ago

@Craig Adams: I don't think you can use interchange to load php scripts since interchange is javascript driven and theirfore all php stuff has been executed before any javaScript can be executed.

Karl Ward over 5 years ago

sure you can load a PHP script with interchange ... The PHP will just render to html anyway ...

Nemanja Milosavljevic over 5 years ago

I assume you need to use "reflow" option after loading php with interchange?

Did anyone manage to make this work? I'm having trouble with this.