Menu icon Foundation

My Posts






My Comments

Paul Hollyer commented on Stewart's post over 3 years

Hi All,
For anyone that finds this thread, I've been using Foundation 5 with Rails for well over a year now with no hassle, and am currently in the process of upgrading to F6 - albeit painfully :)
I use the foundation-rails gem - as of writing it is currently at 6.2.0.1.
Simply install the gem, run 'bundle install', and then 'rails g foundation:install' and you should be set to go.
I've uploaded a bare bones rails app that is set up to use F6 (it actually demonstrates a problem I've got with the topbar), but it will give anyone struggling with Foundation & Rails a place to start from or reference.
You can clone my rails app on github, it's here.
The Foundation Rails gem is here.
Now to get Angular working with Rails......
Regards
Paul
 

Paul Hollyer commented on Paul Hollyer's post over 3 years

This problem was resolved by removing turbolinks, so the bare bones app linked to above is now a working example for anyone else to reference.
Paul

Paul Hollyer commented on Paul Hollyer's post over 3 years

Update:

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(getCurrentOrientation()) {
        case 'landscape':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

var getCurrentOrientation = function() {
  var orientation = 'portrait';

  switch(window.orientation) {
    case 'landscape':
    case -90:
    case 90:
      orientation = 'landscape';
  }

  return orientation;
}

$(window).on('orientationchange', function(event) {
  updateColumns('small');
});

if(getCurrentOrientation() == 'landscape') {
  updateColumns('small');
}

Paul Hollyer commented on Paul Hollyer's post over 3 years

For anyone finding this, the following javascript solves my specific scenario, hopefully this can help someone else.

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');
  var orientation = window.orientation;

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(orientation) {
        case 'landscape':
        case -90:
        case 90:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
        case 0:
        case 180:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

$(window).on('orientationchange', function(event) {
  updateColumns('small'); // choose the breakpoint to target
  updateColumns('medium'); // target as many breakpoints as you wish
});

updateColumns('small');
updateColumns('medium');

HTML

<div class='small-5 columns' data-small-landscape='3'>
...
</div>

HTH someones else.

Paul

Paul Hollyer commented on Paul Hollyer's post over 3 years

Correction: the above css does work, I think gulp isn't always compiling the css so need to keep an eye on it.

edit: No it doesn't, the css produced doesn't appear to honour the media queries so going with javascript.

Paul Hollyer commented on Henckels's post over 3 years

Media queries are handled in the CSS, the JS file provides a set of helper functions. If you check the MediaQuery docs, you'll see, towards the bottom, that they are discussed there.

There's a lot of useful stuff in the docs ;)

Regards

Paul

Paul Hollyer commented on Paul Hollyer's post over 3 years

I just tried to edit my post to add the generated HTML, and when I click on Publish, I get an error saying a title, question and tag are required :(

Anyway, here's the html:

<section data-ng-hide="data.selectedOption.id == 0">
    <hr>
    <div class="subheader">Your contact information</div>
    <div class="row">
        <div class="small-2 columns">
            <label for="full-name" class="middle">Name</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="full-name" type="text" placeholder="Forename Surname" data-ng-model="fullName">
        </div>
        <div class="small-2 medium-2 columns">
            <label for="age" class="text-right-for-medium middle">Age</label>
        </div>
        <div class="small-4 medium-2 large-1 columns end">
            <input id="age" type="number" name="age">
        </div>
    </div>
    <div class="row">
        <div class="small-2 columns">
            <label for="email" class="middle">Email</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="email" type="email" placeholder="[email protected]" data-ng-model="emailAddress">
        </div>
        <div class="small-5 medium-2 columns">
            <label for="phone" class="middle">Phone Number</label>
        </div>
        <div class="small-7 medium-4 columns">
            <input id="phone" type="tel" data-ng-model="phone">
        </div>
    </div>
    <div class="row">
        <div class="small-5 medium-2 columns">
            <label for="houseNumber" class="middle">House Number</label>
        </div>
        <div class="small-7 medium-2 large-1 columns">
            <input id="houseNumber" type="number" data-ng-model="houseNumber">
        </div>
        <div class="small-5 medium-2 large-1 columns">
            <label for="postCode" class="middle">Post Code</label>
        </div>
        <div class="small-7 medium-2 columns end">
            <input id="postCode" type="text" data-ng-model="postCode">
        </div>
    </div>
    <hr>
</section>

Paul Hollyer commented on Henckels's post over 3 years

Hi Henckels,

AFAIK:

1) foundation.js and foundation.core.js are not the same. foundation.js includes all the foundation libraries, foundation.core.js is the base library all other libraries use.

2) I'm using Foundation Sites, and foundation.util.mediaQuery.js is located in bower_components/foundation-sites/js

3) I wasn't sure about what-input.js, so I googled and found out.

I wasn't sure about the environment set up either (for a nodeJS project), so initially, i copied the JS files my own JS folder, but then decided to follow the example index.html and just reference what I need in the bower_components/foundation-sites folder.

HTH

Paul

Paul Hollyer commented on Paul Hollyer's post over 3 years

Hi Rafi,

Thanks for the reply.

It only appears to be a problem in Safari when testing locally. I have now pushed it to my server, and this particular issue has gone away when accessing the pages remotely.

I've briefly tried position: fixed; but this throws up more problems with content scrolling over the top bar rather than behind. I'm no css guru, obviously. I'm mainly self taught (Ruby, RoR, NodeJS and friends etc), so any tips you can offer would be greatly appreciated. I started using Foundation 5 precisely because it gave me the tools without requiring much 'clever' CSS knowledge.

I've have just set up my server with Nginx and NodeJS for a bunch of new projects, so installed Foundation 6 in order to keep up to date. As I said before, I didn't have this problem with the topbar in Foundation 5.

There is one issue though. When I pull the page down in Safari, the unused space on the top bar between .top-bar-left and .top-bar-right disappears, displaying any scrolled content that is behind the topbar and between the edges of these two elements.

This is restricted to Safari, and only happens when I access the page over the internet, rather than locally (the original issue takes over when accessing the page locally in Safari).

Thanks

Paul

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Stewart's post over 3 years

Hi All,
For anyone that finds this thread, I've been using Foundation 5 with Rails for well over a year now with no hassle, and am currently in the process of upgrading to F6 - albeit painfully :)
I use the foundation-rails gem - as of writing it is currently at 6.2.0.1.
Simply install the gem, run 'bundle install', and then 'rails g foundation:install' and you should be set to go.
I've uploaded a bare bones rails app that is set up to use F6 (it actually demonstrates a problem I've got with the topbar), but it will give anyone struggling with Foundation & Rails a place to start from or reference.
You can clone my rails app on github, it's here.
The Foundation Rails gem is here.
Now to get Angular working with Rails......
Regards
Paul
 

You commented on Paul Hollyer's post over 3 years

This problem was resolved by removing turbolinks, so the bare bones app linked to above is now a working example for anyone else to reference.
Paul

You commented on Paul Hollyer's post over 3 years

Update:

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(getCurrentOrientation()) {
        case 'landscape':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

var getCurrentOrientation = function() {
  var orientation = 'portrait';

  switch(window.orientation) {
    case 'landscape':
    case -90:
    case 90:
      orientation = 'landscape';
  }

  return orientation;
}

$(window).on('orientationchange', function(event) {
  updateColumns('small');
});

if(getCurrentOrientation() == 'landscape') {
  updateColumns('small');
}

You commented on Paul Hollyer's post over 3 years

For anyone finding this, the following javascript solves my specific scenario, hopefully this can help someone else.

 var updateColumns = function(breakpoint) {
  var elems = $('div[data-' + breakpoint + '-landscape]');
  var orientation = window.orientation;

  elems.each(function(index) {
    var target = $(this);
    var classes = target.attr('class').split(' ');

    for(var i = 0; i < classes.length; i++) {
      if(classes[i].match(/small/g)) {
        var targetClass = classes[i];
        var columnNum = targetClass.split('-')[1];

        switch(orientation) {
        case 'landscape':
        case -90:
        case 90:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-landscape'));
          target.data(breakpoint + '-portrait',columnNum);
          break;
        case 'portrait':
        case 0:
        case 180:
          target.removeClass(targetClass);
          target.addClass(breakpoint + '-' + target.data(breakpoint + '-portrait'))
          target.data(breakpoint + '-landscape',columnNum);
        }
      }
    }
  })
}

$(window).on('orientationchange', function(event) {
  updateColumns('small'); // choose the breakpoint to target
  updateColumns('medium'); // target as many breakpoints as you wish
});

updateColumns('small');
updateColumns('medium');

HTML

<div class='small-5 columns' data-small-landscape='3'>
...
</div>

HTH someones else.

Paul

You commented on Paul Hollyer's post over 3 years

Correction: the above css does work, I think gulp isn't always compiling the css so need to keep an eye on it.

edit: No it doesn't, the css produced doesn't appear to honour the media queries so going with javascript.

You commented on Henckels's post over 3 years

Media queries are handled in the CSS, the JS file provides a set of helper functions. If you check the MediaQuery docs, you'll see, towards the bottom, that they are discussed there.

There's a lot of useful stuff in the docs ;)

Regards

Paul

You commented on Paul Hollyer's post over 3 years

I just tried to edit my post to add the generated HTML, and when I click on Publish, I get an error saying a title, question and tag are required :(

Anyway, here's the html:

<section data-ng-hide="data.selectedOption.id == 0">
    <hr>
    <div class="subheader">Your contact information</div>
    <div class="row">
        <div class="small-2 columns">
            <label for="full-name" class="middle">Name</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="full-name" type="text" placeholder="Forename Surname" data-ng-model="fullName">
        </div>
        <div class="small-2 medium-2 columns">
            <label for="age" class="text-right-for-medium middle">Age</label>
        </div>
        <div class="small-4 medium-2 large-1 columns end">
            <input id="age" type="number" name="age">
        </div>
    </div>
    <div class="row">
        <div class="small-2 columns">
            <label for="email" class="middle">Email</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="email" type="email" placeholder="[email protected]" data-ng-model="emailAddress">
        </div>
        <div class="small-5 medium-2 columns">
            <label for="phone" class="middle">Phone Number</label>
        </div>
        <div class="small-7 medium-4 columns">
            <input id="phone" type="tel" data-ng-model="phone">
        </div>
    </div>
    <div class="row">
        <div class="small-5 medium-2 columns">
            <label for="houseNumber" class="middle">House Number</label>
        </div>
        <div class="small-7 medium-2 large-1 columns">
            <input id="houseNumber" type="number" data-ng-model="houseNumber">
        </div>
        <div class="small-5 medium-2 large-1 columns">
            <label for="postCode" class="middle">Post Code</label>
        </div>
        <div class="small-7 medium-2 columns end">
            <input id="postCode" type="text" data-ng-model="postCode">
        </div>
    </div>
    <hr>
</section>

You commented on Henckels's post over 3 years

Hi Henckels,

AFAIK:

1) foundation.js and foundation.core.js are not the same. foundation.js includes all the foundation libraries, foundation.core.js is the base library all other libraries use.

2) I'm using Foundation Sites, and foundation.util.mediaQuery.js is located in bower_components/foundation-sites/js

3) I wasn't sure about what-input.js, so I googled and found out.

I wasn't sure about the environment set up either (for a nodeJS project), so initially, i copied the JS files my own JS folder, but then decided to follow the example index.html and just reference what I need in the bower_components/foundation-sites folder.

HTH

Paul

You commented on Paul Hollyer's post over 3 years

Hi Rafi,

Thanks for the reply.

It only appears to be a problem in Safari when testing locally. I have now pushed it to my server, and this particular issue has gone away when accessing the pages remotely.

I've briefly tried position: fixed; but this throws up more problems with content scrolling over the top bar rather than behind. I'm no css guru, obviously. I'm mainly self taught (Ruby, RoR, NodeJS and friends etc), so any tips you can offer would be greatly appreciated. I started using Foundation 5 precisely because it gave me the tools without requiring much 'clever' CSS knowledge.

I've have just set up my server with Nginx and NodeJS for a bunch of new projects, so installed Foundation 6 in order to keep up to date. As I said before, I didn't have this problem with the topbar in Foundation 5.

There is one issue though. When I pull the page down in Safari, the unused space on the top bar between .top-bar-left and .top-bar-right disappears, displaying any scrolled content that is behind the topbar and between the edges of these two elements.

This is restricted to Safari, and only happens when I access the page over the internet, rather than locally (the original issue takes over when accessing the page locally in Safari).

Thanks

Paul

Posts Followed

Following

  • No Content

Followers

  • No Content