Menu icon Foundation
F5 Interchange behaving strangely

Hi,

I'm new to the Foundation. So far everything did what I expected it to do, but Interchange... man...

I know that it should be pretty straight forward.

For large screen

But when I refresh the page, it takes everything there is on the page, and starts repeating it and adding it to the dom.

I have no idea why it does that and how to use this functionality.

Unfortunately for me, this is the reason why I chose Foundation 5 in the first place, and I would really like to know how to make it work.

Any idea on this part?

btw, this is my setup:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Foundation 5 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/css/foundation.css" />

    <!-- Modernizr -->
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/vendor/modernizr.js"></script>
</head>
<body>
            

         
    <div data-interchange="[partials/vertical_scroll_pager.php, (large)]"></div>

    <!-- Lib -->
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/vendor/jquery.js"></script>
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/foundation.js"></script>
    
    <script>
        $(document).foundation();
    </script>
    
    
    
</body>
</html>

interchange

Hi,

I'm new to the Foundation. So far everything did what I expected it to do, but Interchange... man...

I know that it should be pretty straight forward.

For large screen

But when I refresh the page, it takes everything there is on the page, and starts repeating it and adding it to the dom.

I have no idea why it does that and how to use this functionality.

Unfortunately for me, this is the reason why I chose Foundation 5 in the first place, and I would really like to know how to make it work.

Any idea on this part?

btw, this is my setup:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Foundation 5 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/css/foundation.css" />

    <!-- Modernizr -->
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/vendor/modernizr.js"></script>
</head>
<body>
            

         
    <div data-interchange="[partials/vertical_scroll_pager.php, (large)]"></div>

    <!-- Lib -->
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/vendor/jquery.js"></script>
    <script src="<?php echo base_url(); ?>client/views/js/app/lib/foundation_5/js/foundation.js"></script>
    
    <script>
        $(document).foundation();
    </script>
    
    
    
</body>
</html>
Nemanja Milosavljevic over 5 years ago

Ah, forget it.

I found out that custom build is... well I wouldn't suggest it to anyone. Simply download everything, or Sass, and use that.
Custom build is too buggy.

Cheers,