Menu icon Foundation

My Posts





My Comments

Stef Tock commented on Stef Tock's post almost 3 years

Thanks Erik.

I find it confusing that clone and fork effectively seem to do the same thing? (fork is pretty much a github server-side clone right?)

Anyhow, going to have a go updating a fork and sending a pull request today – fingers crossed.

Thanks for the encouragement!

Stef

Stef Tock commented on Stef Tock's post almost 3 years

Great reply - thank you Erik.

Glad I haven't missed an obvious 'trick'!

Yeah, I a was wondering about including all the js files within the gulpfile instead of the catch-all wildcard that's there now.

Mind you it's not a massive issue to have to manually manage and move the js files either - part of me is lazy and part of me wants to see just how easy / quick / automated the process can be.!

I'll look into forking the repo instead - I'm still learning all the ins and outs of git / version control too. So forking would be considered best practice? Thanks for the links. Whilst f6 was in beta, and in the past few days thee have so many changes ( you've all been super busy! ) it felt important to keep up to date. I guess that will be less imperative as time moves on and f6 settles in even more!

Thanks again
Stef

Stef Tock commented on Stef Tock's post over 3 years

Hiya - thanks for that.

It's not what I had in mind – however your codepen is really very useful & helpful.

I was originally trying to find a way to add or remove classes to nav items at exactly the same point the navbar becomes sticky (to auto-close drop downs and stop them working when nav is sticky).

I can follow your js easily and I have requirement to utilise something similar elsewhere so very helpful!

Thanks very much!
S

Stef Tock commented on Stef Tock's post almost 4 years

On the off-chance that this might help someone else one day, I've solved my problem with a little JS.

The JS effectively watches for the browser window to be resized. If it is resized it checks to see if a specific CCS attribute is present on a specific element (the specific CSS attribute I'm checking against is applied only through the $medium media-query).

The JS then removes the 'data-equalizer-watch' data attributes and inline style from one element, add adds the 'data-equalizer-watch' to the element I need.

Finally, as per the F5 docs, I've used '$(document).foundation('equalizer','reflow');' to re-fire the Equaliser and line up my divs as I need.

Hope all that makes sense.

I'm a JS novice, so this probably doesn't follow the best logic and I'm sure could be written far more concisely. Non-the-less:

Foundation.utils.S(document).ready(function () {
  "use strict";

  // run test on initial page load
  checkSize();

  // run test on resize of the window
  Foundation.utils.S(window).resize(checkSize);

  });


// Function to check css rule on element and then manipulate data attributes as needed
function checkSize() {
  "use strict";

  if (Foundation.utils.S(".feature-box-right").css('position') === 'absolute') {

    Foundation.utils.S('#feature-rows').removeAttr('data-equalizer-watch').removeAttr('style');
    Foundation.utils.S('#feature-top-row').attr('data-equalizer-watch', '');
    Foundation.utils.S(document).foundation('equalizer','reflow');
    }

  else {
    Foundation.utils.S('#feature-top-row').removeAttr('data-equalizer-watch').removeAttr('style');
    Foundation.utils.S('#feature-rows').attr('data-equalizer-watch', '');

    Foundation.utils.S(document).foundation('equalizer','reflow');
    }
}


Please do show me how to write the above JS / query correctly!?

NB. I'm using Foundation.utils.S instead of jQuery's '$' as the F5 docs indicate that method should be 20% faster when selecting elements.

Stef Tock commented on Adam S Gerhard's post almost 4 years

Haven't dug too deeply but the issue is in your CSS file.

Take a look this codepen:
http://codepen.io/_Stef/pen/wBpOvO

It's a direct copy and paste of your code.
The only change I've made is swapping-out your CSS for the Foundation CSS stored on cdn.jsdelivr.net. That makes me think your CSS isn't compiling properly (if you are using SCSS), is missing something or you have an over-riding CSS attribute.

I think your JS links are okay, but I did remove on of them:

<script src="js/foundation/foundation.equalizer.js"></script>

Your code works with or without it, but it's not needed as you're loading the full blown Foundation JS just above it.

Hope that helps!

Stef Tock commented on Stef Tock's post almost 4 years

Yep, that's pretty much it. But to be a little more precise it's not that Row B flows behind C, but that the bottom of C doesn't line up with the bottom of A.

I understand why Equalizer isn't working there, but need to find a work-around.

My JS is not good (I'm learning as I go), but currently investigating Modernizr.mq.. maybe something like this;

if (Modernizr.mq('only screen and (min-width:40.063em) and (max-width:64em)')) {
  Foundation.utils.S('.test').attr('data-test', 'it-works');

}

or using jquery to detect a change in a CSS rule triggered my a media query.:

$(document).ready(function () {
  "use strict";

    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize() {
  "use strict";

    if (Foundation.utils.S(".feature-box-right").css("position") === "absolute") {
        // your code here
    $('.test').attr('data-test', 'is-this-working');

    }
}

Neither quite do it for me yet. Trying to figure out how to get the JS to 'watch' or listen' for the media query change without a page reload so I can dynamically add or remove the equalizer-watch data attributes for Equalizer as needed. I presume I'd need to find some way to to 're-fire' Equalizer too?

Would either of these routes be advisable?

At the top of the CSS that's generated by the SCSS I've also noticed rules like these:

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/";
  width: 40.063em; }

meta.foundation-mq-large {

etc

so presuming I can use these to scrape the media-query sizes?

Thanks
S

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Stef Tock's post almost 3 years

Thanks Erik.

I find it confusing that clone and fork effectively seem to do the same thing? (fork is pretty much a github server-side clone right?)

Anyhow, going to have a go updating a fork and sending a pull request today – fingers crossed.

Thanks for the encouragement!

Stef

You commented on Stef Tock's post almost 3 years

Great reply - thank you Erik.

Glad I haven't missed an obvious 'trick'!

Yeah, I a was wondering about including all the js files within the gulpfile instead of the catch-all wildcard that's there now.

Mind you it's not a massive issue to have to manually manage and move the js files either - part of me is lazy and part of me wants to see just how easy / quick / automated the process can be.!

I'll look into forking the repo instead - I'm still learning all the ins and outs of git / version control too. So forking would be considered best practice? Thanks for the links. Whilst f6 was in beta, and in the past few days thee have so many changes ( you've all been super busy! ) it felt important to keep up to date. I guess that will be less imperative as time moves on and f6 settles in even more!

Thanks again
Stef

You commented on Stef Tock's post over 3 years

Hiya - thanks for that.

It's not what I had in mind – however your codepen is really very useful & helpful.

I was originally trying to find a way to add or remove classes to nav items at exactly the same point the navbar becomes sticky (to auto-close drop downs and stop them working when nav is sticky).

I can follow your js easily and I have requirement to utilise something similar elsewhere so very helpful!

Thanks very much!
S

You commented on Stef Tock's post almost 4 years

On the off-chance that this might help someone else one day, I've solved my problem with a little JS.

The JS effectively watches for the browser window to be resized. If it is resized it checks to see if a specific CCS attribute is present on a specific element (the specific CSS attribute I'm checking against is applied only through the $medium media-query).

The JS then removes the 'data-equalizer-watch' data attributes and inline style from one element, add adds the 'data-equalizer-watch' to the element I need.

Finally, as per the F5 docs, I've used '$(document).foundation('equalizer','reflow');' to re-fire the Equaliser and line up my divs as I need.

Hope all that makes sense.

I'm a JS novice, so this probably doesn't follow the best logic and I'm sure could be written far more concisely. Non-the-less:

Foundation.utils.S(document).ready(function () {
  "use strict";

  // run test on initial page load
  checkSize();

  // run test on resize of the window
  Foundation.utils.S(window).resize(checkSize);

  });


// Function to check css rule on element and then manipulate data attributes as needed
function checkSize() {
  "use strict";

  if (Foundation.utils.S(".feature-box-right").css('position') === 'absolute') {

    Foundation.utils.S('#feature-rows').removeAttr('data-equalizer-watch').removeAttr('style');
    Foundation.utils.S('#feature-top-row').attr('data-equalizer-watch', '');
    Foundation.utils.S(document).foundation('equalizer','reflow');
    }

  else {
    Foundation.utils.S('#feature-top-row').removeAttr('data-equalizer-watch').removeAttr('style');
    Foundation.utils.S('#feature-rows').attr('data-equalizer-watch', '');

    Foundation.utils.S(document).foundation('equalizer','reflow');
    }
}


Please do show me how to write the above JS / query correctly!?

NB. I'm using Foundation.utils.S instead of jQuery's '$' as the F5 docs indicate that method should be 20% faster when selecting elements.

You commented on Adam S Gerhard's post almost 4 years

Haven't dug too deeply but the issue is in your CSS file.

Take a look this codepen:
http://codepen.io/_Stef/pen/wBpOvO

It's a direct copy and paste of your code.
The only change I've made is swapping-out your CSS for the Foundation CSS stored on cdn.jsdelivr.net. That makes me think your CSS isn't compiling properly (if you are using SCSS), is missing something or you have an over-riding CSS attribute.

I think your JS links are okay, but I did remove on of them:

<script src="js/foundation/foundation.equalizer.js"></script>

Your code works with or without it, but it's not needed as you're loading the full blown Foundation JS just above it.

Hope that helps!

You commented on Stef Tock's post almost 4 years

Yep, that's pretty much it. But to be a little more precise it's not that Row B flows behind C, but that the bottom of C doesn't line up with the bottom of A.

I understand why Equalizer isn't working there, but need to find a work-around.

My JS is not good (I'm learning as I go), but currently investigating Modernizr.mq.. maybe something like this;

if (Modernizr.mq('only screen and (min-width:40.063em) and (max-width:64em)')) {
  Foundation.utils.S('.test').attr('data-test', 'it-works');

}

or using jquery to detect a change in a CSS rule triggered my a media query.:

$(document).ready(function () {
  "use strict";

    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize() {
  "use strict";

    if (Foundation.utils.S(".feature-box-right").css("position") === "absolute") {
        // your code here
    $('.test').attr('data-test', 'is-this-working');

    }
}

Neither quite do it for me yet. Trying to figure out how to get the JS to 'watch' or listen' for the media query change without a page reload so I can dynamically add or remove the equalizer-watch data attributes for Equalizer as needed. I presume I'd need to find some way to to 're-fire' Equalizer too?

Would either of these routes be advisable?

At the top of the CSS that's generated by the SCSS I've also noticed rules like these:

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/";
  width: 40.063em; }

meta.foundation-mq-large {

etc

so presuming I can use these to scrape the media-query sizes?

Thanks
S

Posts Followed

Following

  • No Content

Followers

  • No Content