Menu icon Foundation

My Posts


My Comments

Neil Mastroianni commented on Steve Trask's post over 5 years

I was facing a similar issue and your post helped. I figured that I'd share my situation and solution.

I want to use Interchange to load a partial for medium and larger screen devices. In that partial was an orbit slider that wouldn't render properly. Here's the HTML for the index.html and then the partial, followed by the javascript in my app.js file that did the trick.

My index.html file (where the Interchange is called):

<div data-interchange="[interchange/content.html, (medium)], [interchange/content.html, (large)]" class="large-content hide-for-small">
</div>

My content.html file (loaded on medium and large devices):

<div class="row">
    <div class="large-12 columns">
    <ul data-orbit id="slider">
      <li><img src="http://placehold.it/1400x400&text=[ img 1 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 2 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 3 ]" /></li>
    </ul>

    <hr />
    </div>
</div>

My app.js file:

$(document).foundation();
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});

I noticed that the $('#slider').foundation('orbit'); made the slider look almost the way it was supposed to be but that the images were cut off. When I tried to do a $(document).foundation('interchange', 'reflow');, that made the slider display correctly but then made my other Interchange content stop changing on browser resizes. That was unacceptable.

I then noticed if I left out the $(document).foundation('interchange', 'reflow');, when I resized the browser the Orbit slideshow fixed itself. This leads me to believe that some sort of 'resize' event is causing this to happen. That is why my "fix" calls a 'resize()' on a timer like your suggestion.

The only thing left to figure out now is how to call this after the assets requested on an interchange event have successfully loaded and not to rely on a timer. Any ideas on that?

Neil Mastroianni commented on Steven Mapes's post almost 6 years

Hello Steven and Dylan,

I've been wrestling with pretty much the same problem. I feel I have, at least for now, found a solution. I inspected the Interchange documentation page and searched it for 'reflow' and came up empty also. However, when I searched for 'interchange', my results bore some fruit. See the code below that Foundation uses to load that map in their all.js file:
Javascript
$("#interchangeMarkup").on("replace", function() {
$.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false&callback=initializeMaps")
});

It appears that every time Interchange changes the content of the div#interchangeMarkup, it calls the maps API with the callback=initializeMaps parameter. For my purposes, I was trying to use Interchange to load a Foundation JS (top-bar) html partial. The reflow advice in the documentation provided no help. I then replaced the #interchangeMarkup with my own selector and the $.getScript(...) part with
Javascript
$(document).foundation();

This allows the drop down functionality of the top-bar to work again. My concern is that this might be messy on a large site.

Hope this helps.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Steve Trask's post over 5 years

I was facing a similar issue and your post helped. I figured that I'd share my situation and solution.

I want to use Interchange to load a partial for medium and larger screen devices. In that partial was an orbit slider that wouldn't render properly. Here's the HTML for the index.html and then the partial, followed by the javascript in my app.js file that did the trick.

My index.html file (where the Interchange is called):

<div data-interchange="[interchange/content.html, (medium)], [interchange/content.html, (large)]" class="large-content hide-for-small">
</div>

My content.html file (loaded on medium and large devices):

<div class="row">
    <div class="large-12 columns">
    <ul data-orbit id="slider">
      <li><img src="http://placehold.it/1400x400&text=[ img 1 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 2 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 3 ]" /></li>
    </ul>

    <hr />
    </div>
</div>

My app.js file:

$(document).foundation();
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});

I noticed that the $('#slider').foundation('orbit'); made the slider look almost the way it was supposed to be but that the images were cut off. When I tried to do a $(document).foundation('interchange', 'reflow');, that made the slider display correctly but then made my other Interchange content stop changing on browser resizes. That was unacceptable.

I then noticed if I left out the $(document).foundation('interchange', 'reflow');, when I resized the browser the Orbit slideshow fixed itself. This leads me to believe that some sort of 'resize' event is causing this to happen. That is why my "fix" calls a 'resize()' on a timer like your suggestion.

The only thing left to figure out now is how to call this after the assets requested on an interchange event have successfully loaded and not to rely on a timer. Any ideas on that?

You commented on Steven Mapes's post almost 6 years

Hello Steven and Dylan,

I've been wrestling with pretty much the same problem. I feel I have, at least for now, found a solution. I inspected the Interchange documentation page and searched it for 'reflow' and came up empty also. However, when I searched for 'interchange', my results bore some fruit. See the code below that Foundation uses to load that map in their all.js file:
Javascript
$("#interchangeMarkup").on("replace", function() {
$.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false&callback=initializeMaps")
});

It appears that every time Interchange changes the content of the div#interchangeMarkup, it calls the maps API with the callback=initializeMaps parameter. For my purposes, I was trying to use Interchange to load a Foundation JS (top-bar) html partial. The reflow advice in the documentation provided no help. I then replaced the #interchangeMarkup with my own selector and the $.getScript(...) part with
Javascript
$(document).foundation();

This allows the drop down functionality of the top-bar to work again. My concern is that this might be messy on a large site.

Hope this helps.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content