Menu icon Foundation

Designer | Kelowna, BC, Canada

My Posts






My Comments

Neil Haskins commented on Neil Haskins's post over 2 years

OK, that makes sense.
That line is at the bottom of my compiled app.js. As a workaround, I edited src/assets/js/app.js as:
$(document).ready(function(){
$(document).foundation();
});
And now everything works without any javascript at page bottom.
Thanks.

Neil Haskins commented on Emily Mentzer's post over 2 years

li{
word-break: keep-all;
}
For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Neil Haskins commented on Tom Ta's post over 4 years

I would suggest a slight change to the above. Currently, if multi_expand is false then clicking on an accordion link in any accordion will close all other accordian .content on the page.
So as to scope the closeing of other panels to only within the accordion being clicked, change

if(!options.multi_expand) {
$targets.not(':eq('+i+')')

to

if(!options.multi_expand) {
$targets.eq(i).parent().siblings().children('.content').not(':eq('+i+')')

Perhaps that could be optimized somehow, but it gets the job done anyway :)

Neil Haskins commented on Daniel Wild's post over 4 years

I had a similar problem http://foundation.zurb.com/forum/posts/2518-modal-in-ajax-loaded-tabs

To see if the issue is that your reflow is running before your new content is ready you could try creating a separate link which would just run the reflow when clicked.

For Hot Belgo, try limiting the scope of the reflow from (document) to just the element you need to reflow, e.g. $('#reflowMe').foundation(reflow)

Neil Haskins commented on Neil Haskins's post over 4 years

I've found my solution. In my initial javascript the reflow was taking place before the new html had loaded. My new Javascript is:

$(document).ready(function() {
$("dl.tabs.bios dd a").click(function() {
var split = $(this.href.split('#'));
var target = split[1];
if (!$( "#" + target ).hasClass("loaded")) {
$( "#" + target ).load( target + ".html", function(){
$(this).foundation( 'reflow' );
});
$( "#" + target ).addClass("loaded");
};
});
});

This causes the reflow to take place after the load has completed. Also I've targeted the reflow to "this" (the element where the content has been loaded) as opposed to the whole document.

I will also note that either "$this.foundation('reflow')", or "$this.foundation('reveal')" work, but "$this.foundation('reveal', 'reflow')" does not.

Neil Haskins commented on Tom Schreck's post over 4 years

I had set html{overflow: hidden;} as a firefox specific hack (I believe to fix an issue with breakpoints and the scrollbar).
After commenting out the above rule, the modal positions itself properly.

Neil Haskins commented on Tom Schreck's post over 4 years

I'm having the same issue (and yes, setting position: fixed; does solve it), but I'm wondering what's causing the problem.
In the docs they have several modals which launch correctly, but on my site the javascript isn't working to calculate the vertical position of the modal. It always is given top: 100px;.
Is an earlier version of the js being used in the docs?

I'll post my page code here in case I'm doing something wrong. (I've included several paragraphs of lorum ipsum text, just so there's something to scroll down through.)

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title here</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../stylesheets/app.css" />

  <script src="../bower_components/foundation/js/vendor/modernizr.js"></script>
</head>
<body>
  <div class="row">
    <div class="small-12 columns">
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Nulla molestie turpis fringilla lacus adipiscing bibendum. Etiam accumsan quam vel quam eleifend, eu auctor dui aliquam. Maecenas in nisi sed felis auctor vestibulum. Donec a mi a dui posuere sodales. Nam vehicula purus augue, quis imperdiet enim posuere non. Proin ac est felis. Praesent consectetur pretium est, at facilisis nunc aliquet in. Pellentesque interdum tempus libero vel bibendum. Nunc facilisis facilisis elit, id tincidunt nisl tincidunt ac. Sed placerat ornare rutrum. Nam laoreet congue faucibus. Proin luctus, nisl vel feugiat luctus, tortor tortor elementum lorem, eget tempor velit tellus vel orci. Quisque pellentesque pellentesque magna eget porttitor. Sed ultrices, nisl eget blandit pulvinar, nibh ante fermentum nulla, volutpat congue arcu risus ut felis. Donec sollicitudin eu velit at aliquet. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <a data-reveal-id="poNumbers" class="button" href="#">Launch the Modal</a>
      <div id="poNumbers" class="reveal-modal" data-reveal>
        <p>This is a modal.</p>
        <a class="close-reveal-modal">&#215;</a>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Ut vitae lorem a ligula laoreet elementum sit amet at ante. Sed egestas pharetra luctus. Praesent at nisi eget justo euismod pellentesque id vitae odio. Nunc at vulputate metus. Donec pretium ligula vestibulum varius molestie. Duis tempor, diam quis consectetur consectetur, eros purus varius tellus, ac euismod leo urna eget arcu. Nunc rutrum sodales tortor ut dictum. Nulla vel augue libero. Aliquam nulla dui, tempor in purus pretium, laoreet molestie arcu. Quisque mattis lacinia nibh sed rutrum. Phasellus pharetra libero vitae dolor pretium lobortis. Aliquam in orci id urna accumsan vulputate. Curabitur at vestibulum odio. Integer fermentum semper dapibus. Suspendisse a adipiscing lectus. Ut justo odio, sodales eu orci sed, vehicula mattis magna. </p>
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
    </div>
  </div>
<script src="../bower_components/foundation/js/vendor/jquery.js"></script>
<script src="../bower_components/foundation/js/foundation.min.js"></script>
<script>$(document).foundation();</script>>
</body>
</html>

Thanks

Neil Haskins commented on Neil Haskins's post almost 5 years

Unless I'm mistaken this solution is for foundation 4.3.2.

I'm asking if this is possible in foundation 5.

Thanks

Neil Haskins commented on Neil Haskins's post almost 5 years

This was because the upgrade process didn't update _settings.scss, so it still had the old emCalc code.

Neil Haskins commented on ccumulus's post almost 5 years

Did you receive an error message? If so what was it?

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Neil Haskins's post over 2 years

OK, that makes sense.
That line is at the bottom of my compiled app.js. As a workaround, I edited src/assets/js/app.js as:
$(document).ready(function(){
$(document).foundation();
});
And now everything works without any javascript at page bottom.
Thanks.

You commented on Emily Mentzer's post over 2 years

li{
word-break: keep-all;
}
For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

You commented on Tom Ta's post over 4 years

I would suggest a slight change to the above. Currently, if multi_expand is false then clicking on an accordion link in any accordion will close all other accordian .content on the page.
So as to scope the closeing of other panels to only within the accordion being clicked, change

if(!options.multi_expand) {
$targets.not(':eq('+i+')')

to

if(!options.multi_expand) {
$targets.eq(i).parent().siblings().children('.content').not(':eq('+i+')')

Perhaps that could be optimized somehow, but it gets the job done anyway :)

You commented on Daniel Wild's post over 4 years

I had a similar problem http://foundation.zurb.com/forum/posts/2518-modal-in-ajax-loaded-tabs

To see if the issue is that your reflow is running before your new content is ready you could try creating a separate link which would just run the reflow when clicked.

For Hot Belgo, try limiting the scope of the reflow from (document) to just the element you need to reflow, e.g. $('#reflowMe').foundation(reflow)

You commented on Neil Haskins's post over 4 years

I've found my solution. In my initial javascript the reflow was taking place before the new html had loaded. My new Javascript is:

$(document).ready(function() {
$("dl.tabs.bios dd a").click(function() {
var split = $(this.href.split('#'));
var target = split[1];
if (!$( "#" + target ).hasClass("loaded")) {
$( "#" + target ).load( target + ".html", function(){
$(this).foundation( 'reflow' );
});
$( "#" + target ).addClass("loaded");
};
});
});

This causes the reflow to take place after the load has completed. Also I've targeted the reflow to "this" (the element where the content has been loaded) as opposed to the whole document.

I will also note that either "$this.foundation('reflow')", or "$this.foundation('reveal')" work, but "$this.foundation('reveal', 'reflow')" does not.

You commented on Tom Schreck's post over 4 years

I had set html{overflow: hidden;} as a firefox specific hack (I believe to fix an issue with breakpoints and the scrollbar).
After commenting out the above rule, the modal positions itself properly.

You commented on Tom Schreck's post over 4 years

I'm having the same issue (and yes, setting position: fixed; does solve it), but I'm wondering what's causing the problem.
In the docs they have several modals which launch correctly, but on my site the javascript isn't working to calculate the vertical position of the modal. It always is given top: 100px;.
Is an earlier version of the js being used in the docs?

I'll post my page code here in case I'm doing something wrong. (I've included several paragraphs of lorum ipsum text, just so there's something to scroll down through.)

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title here</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../stylesheets/app.css" />

  <script src="../bower_components/foundation/js/vendor/modernizr.js"></script>
</head>
<body>
  <div class="row">
    <div class="small-12 columns">
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Nulla molestie turpis fringilla lacus adipiscing bibendum. Etiam accumsan quam vel quam eleifend, eu auctor dui aliquam. Maecenas in nisi sed felis auctor vestibulum. Donec a mi a dui posuere sodales. Nam vehicula purus augue, quis imperdiet enim posuere non. Proin ac est felis. Praesent consectetur pretium est, at facilisis nunc aliquet in. Pellentesque interdum tempus libero vel bibendum. Nunc facilisis facilisis elit, id tincidunt nisl tincidunt ac. Sed placerat ornare rutrum. Nam laoreet congue faucibus. Proin luctus, nisl vel feugiat luctus, tortor tortor elementum lorem, eget tempor velit tellus vel orci. Quisque pellentesque pellentesque magna eget porttitor. Sed ultrices, nisl eget blandit pulvinar, nibh ante fermentum nulla, volutpat congue arcu risus ut felis. Donec sollicitudin eu velit at aliquet. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <a data-reveal-id="poNumbers" class="button" href="#">Launch the Modal</a>
      <div id="poNumbers" class="reveal-modal" data-reveal>
        <p>This is a modal.</p>
        <a class="close-reveal-modal">&#215;</a>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Ut vitae lorem a ligula laoreet elementum sit amet at ante. Sed egestas pharetra luctus. Praesent at nisi eget justo euismod pellentesque id vitae odio. Nunc at vulputate metus. Donec pretium ligula vestibulum varius molestie. Duis tempor, diam quis consectetur consectetur, eros purus varius tellus, ac euismod leo urna eget arcu. Nunc rutrum sodales tortor ut dictum. Nulla vel augue libero. Aliquam nulla dui, tempor in purus pretium, laoreet molestie arcu. Quisque mattis lacinia nibh sed rutrum. Phasellus pharetra libero vitae dolor pretium lobortis. Aliquam in orci id urna accumsan vulputate. Curabitur at vestibulum odio. Integer fermentum semper dapibus. Suspendisse a adipiscing lectus. Ut justo odio, sodales eu orci sed, vehicula mattis magna. </p>
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
    </div>
  </div>
<script src="../bower_components/foundation/js/vendor/jquery.js"></script>
<script src="../bower_components/foundation/js/foundation.min.js"></script>
<script>$(document).foundation();</script>>
</body>
</html>

Thanks

You commented on Neil Haskins's post almost 5 years

Unless I'm mistaken this solution is for foundation 4.3.2.

I'm asking if this is possible in foundation 5.

Thanks

You commented on Neil Haskins's post almost 5 years

This was because the upgrade process didn't update _settings.scss, so it still had the old emCalc code.

You commented on ccumulus's post almost 5 years

Did you receive an error message? If so what was it?

Posts Followed


Following

  • No Content

Followers

  • No Content