Menu icon Foundation

Coder | Brno, Czech republic

Developer of a nice front-end from Brno. I see beauty & good results in simple design and small details. Good coffee ♥ Moravian wine and hard sport required!

My Posts






My Comments

Martin Pešout commented on gtbsleepyhead's post over 4 years

Hi,

your question is probably outdated. But maybe my answer helps somebody else. First you need to switch off autofocus after invalid form-submit. You can do it by this:

$(document).foundation({
  abide: {
    focus_on_invalid: false
  }
});

And create small workaround to scroll on the first invalid field and do focus.

 $('form').on('invalid.fndtn.abide', function () {
  var invalid_fields = $(this).find('[data-invalid]');

  $('html, body').animate({
    scrollTop: $(invalid_fields[0]).offset().top - 40
  }, 1000, function() {
    $(invalid_fields[0]).focus();
  });
});

40 is offset from position of the first invalid field on the page.

Bye, Martin

Martin Pešout commented on Martin Pešout's post about 5 years

If you have Xcode and iOS Simulator on MacOS (Yosemitte), you can add iOS7 as another option to your iOS Simulator too. Open Xcode, go to the Preferences menu and click on tab Downloads. You can install iOS7 here and replicate this problem.

Martin Pešout commented on Martin Pešout's post about 5 years

The only working solution I've found is to disable swipe left and right by JS. But I don't know if this is ideal

Martin Pešout commented on Martin Pešout's post about 5 years

Hi guys,

thank you for your response.

Nehemiah I think that you are wrong and this doesn't work

<a name="build">

This can be used to create final anchor to some section on my the page. But I need to create another link, which is not part of my menu and which has also scroll effect related to section marked by this:

<a name="build">

Ercan Murat KISACA, you're right. This solution will be working. I was trying to find the same result only with Magellan plugin, but it seems that Magellan can be used only to create menus.

Martin

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on gtbsleepyhead's post over 4 years

Hi,

your question is probably outdated. But maybe my answer helps somebody else. First you need to switch off autofocus after invalid form-submit. You can do it by this:

$(document).foundation({
  abide: {
    focus_on_invalid: false
  }
});

And create small workaround to scroll on the first invalid field and do focus.

 $('form').on('invalid.fndtn.abide', function () {
  var invalid_fields = $(this).find('[data-invalid]');

  $('html, body').animate({
    scrollTop: $(invalid_fields[0]).offset().top - 40
  }, 1000, function() {
    $(invalid_fields[0]).focus();
  });
});

40 is offset from position of the first invalid field on the page.

Bye, Martin

You commented on Martin Pešout's post about 5 years

If you have Xcode and iOS Simulator on MacOS (Yosemitte), you can add iOS7 as another option to your iOS Simulator too. Open Xcode, go to the Preferences menu and click on tab Downloads. You can install iOS7 here and replicate this problem.

You commented on Martin Pešout's post about 5 years

The only working solution I've found is to disable swipe left and right by JS. But I don't know if this is ideal

You commented on Martin Pešout's post about 5 years

Hi guys,

thank you for your response.

Nehemiah I think that you are wrong and this doesn't work

<a name="build">

This can be used to create final anchor to some section on my the page. But I need to create another link, which is not part of my menu and which has also scroll effect related to section marked by this:

<a name="build">

Ercan Murat KISACA, you're right. This solution will be working. I was trying to find the same result only with Magellan plugin, but it seems that Magellan can be used only to create menus.

Martin

Posts Followed

Following

  • No Content

Followers

  • No Content