Menu icon Foundation

Developer | Elgin, IL

Webmaster/Front-End Developer at Benedictine University in Lisle, IL. LOVE this framework and integrating it into our CMS.

My Posts




My Comments

Kevin D. Sherman commented on Kevin D. Sherman's post over 4 years

Here's how I got around it, I used the event functionality in the plugin to scroll to the error:

   $('#admissionsInquiryForm')
    .on('invalid.fndtn.abide', function () {
      var invalid_fields = $(this).find('[data-invalid]');
      console.log(invalid_fields);
    $(document).ready(function() {
        $("html, body").animate({scrollTop: $(invalid_fields).offset().top}, 500);
    });
    })
    .on('valid.fndtn.abide', function () {
      $('input:submit').attr("disabled", true);
      $('#submit_form').addClass('disabled').hide();
      $('#sending_form').css( "display", "block");
      });

I hope this helps!

You can see the form in production now:
http://ben.edu/admissions/inquire/main-form.cfm

Kevin D. Sherman commented on Kevin D. Sherman's post about 5 years

Whoops, didn't even see that there were replies.

I'm still having this issue, newest version of Chrome on Windows. I've had a few other random users on campus tell me they're having this issues as well. Even in an Incognito window, still doesn't work for me. Modernizr is being loaded, I just uploaded the newer version in the Foundation vendor package.

Not really sure how to track this down...

Kevin D. Sherman commented on Norman Khine's post over 5 years

I think all you need to do is add padding to the left and right sides to a container inside each slide. in your css, on .row.slide, it might work to put the padding on those selectors, something wide enough to make the content appear inside the arrows.

I do something similar on these slides: http://ben.edu/springfield/ to keep the description text inside the arrows.

Kevin D. Sherman commented on RichardCPD's post over 5 years

I preferred doing some quick design mock ups with AI as well. Even as photographer, I find Photoshop to be pretty tough to wrangle. You can use AI to make a few artboards at different sizes to sora make a game plan, but I wouldn't reply on them like the old days of web design/development.

Especially with the power of a framework like Foundation, designing in the browser is the trend.

Kevin D. Sherman commented on RichardCPD's post over 5 years

All of these are somewhat variable as it depends what you want.

On the download page you can get most of the defaults:
http://foundation.zurb.com/develop/download.html

note: convert em to px, simply multiply the em x base px ( which is 16px ). For example, in the default, max width of 62.5em is 62.5 x 16 = 1000px

To get some of the other sizes, it might be easier to set up what you're looking for on the download page, download the framework and open it in Chrome and use the inspector to weed through the various column widths.

Hope that helps a little... You might have a hard time really designing for responsive in Photoshop.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Kevin D. Sherman's post over 4 years

Here's how I got around it, I used the event functionality in the plugin to scroll to the error:

   $('#admissionsInquiryForm')
    .on('invalid.fndtn.abide', function () {
      var invalid_fields = $(this).find('[data-invalid]');
      console.log(invalid_fields);
    $(document).ready(function() {
        $("html, body").animate({scrollTop: $(invalid_fields).offset().top}, 500);
    });
    })
    .on('valid.fndtn.abide', function () {
      $('input:submit').attr("disabled", true);
      $('#submit_form').addClass('disabled').hide();
      $('#sending_form').css( "display", "block");
      });

I hope this helps!

You can see the form in production now:
http://ben.edu/admissions/inquire/main-form.cfm

You commented on Kevin D. Sherman's post about 5 years

Whoops, didn't even see that there were replies.

I'm still having this issue, newest version of Chrome on Windows. I've had a few other random users on campus tell me they're having this issues as well. Even in an Incognito window, still doesn't work for me. Modernizr is being loaded, I just uploaded the newer version in the Foundation vendor package.

Not really sure how to track this down...

You commented on Norman Khine's post over 5 years

I think all you need to do is add padding to the left and right sides to a container inside each slide. in your css, on .row.slide, it might work to put the padding on those selectors, something wide enough to make the content appear inside the arrows.

I do something similar on these slides: http://ben.edu/springfield/ to keep the description text inside the arrows.

You commented on RichardCPD's post over 5 years

I preferred doing some quick design mock ups with AI as well. Even as photographer, I find Photoshop to be pretty tough to wrangle. You can use AI to make a few artboards at different sizes to sora make a game plan, but I wouldn't reply on them like the old days of web design/development.

Especially with the power of a framework like Foundation, designing in the browser is the trend.

You commented on RichardCPD's post over 5 years

All of these are somewhat variable as it depends what you want.

On the download page you can get most of the defaults:
http://foundation.zurb.com/develop/download.html

note: convert em to px, simply multiply the em x base px ( which is 16px ). For example, in the default, max width of 62.5em is 62.5 x 16 = 1000px

To get some of the other sizes, it might be easier to set up what you're looking for on the download page, download the framework and open it in Chrome and use the inspector to weed through the various column widths.

Hope that helps a little... You might have a hard time really designing for responsive in Photoshop.

Posts Followed

Following

  • No Content

Followers

  • No Content