Menu icon Foundation

My Posts

  • NEW
  • Orbit and Interchange Workaround

    By Zack

    F6Orbitinterchange

    Hello, I dug through all the issues and forum posts on using interchange with an orbit slider for F6, and still had the issue with the arrow-sized slider on reload. I'd like to share my workaround to the problem in case it helps anyone else or anyone has... (continued)





My Comments

Zack commented on Zack's post almost 4 years

@Rafi Benkual Yep! It's an update from 5.5.3 (I think) to 6! A lot of the code I'm re-writing to make it fit better as mobile-first and accessible (the first version of the program was squeezed out pretty quick, so more of the focus was on getting it working quickly). This time around, I've got some time to make sure it's a little more clean and usable.

Zack commented on Zack's post almost 4 years

@Rafi Benkual Thanks! Right now, I'm working on the admin panel for an inspection company, so there's a lot of times and dates--received, processed, sent, etc. A lot of the times get used a lot, too, from a human perspective. I'm using CodeIgniter as the backend, so I wrote a helper to crunch dates into more relative and kind of Gmail-esque times (e.g. "10:42a Yesterday", or "Jan 1st" instead of 2016-01-06T10:42 or 2016-01-01T20:39). Business-wise, the time matters a lot while the inspection is current, but as soon as it's in the past, we pretty much only look at days.

Zack commented on Zack's post almost 4 years

If you were using inline lists:
SCSS
ul.inline-list{
@include menu-base;
}

Zack commented on Alexander Chekspir's post over 4 years

It's not the classiest solution, but what I did was hide the side nav "hide-for-small" and then added in a top bar which was "show-for-small-only". It's not terribly DRY, but it works.

Zack commented on Effe's post over 5 years

If you're having the same problem of me, you can get "under" the JQuery stuff with:

 $('#form').get(0).submit();

Complements of ceejayoz at StackOverflow
http://stackoverflow.com/questions/24189316/foundation-5-abide-normal-submit?noredirect=1#comment37341135_24189316

Zack commented on Lynda Spangler's post over 5 years

Here's my latest solution. Keep in mind this is a total hack, and is probably no the best way to do things, but since I'm validating server-side, too, I'm going to allow it.

The subsections of my form are split up into fieldsets, and they're all single level (no fieldsets are embedded in other fieldsets), so you may have to adjust for your needs.

 //blur all the required fields to hit the abide live validation
$('#myNextButton').click(function(){
$(this).parents('fieldset').find(':input[required]').blur();
if($(this).parents('fieldset').find(':input[data-invalid]').length==0){
//valid, move to next step
}
else
{
//invalid, don't move to next step (abide will display the errors)
});

Hope that helps you out!

Zack commented on Lynda Spangler's post over 5 years

I'm working on a very similar problem. Here are the solutions I can think of so far:
1. Break up the form into multiple forms
2. create a custom callback for each input or set of inputs in each "chunk" of the form (not quite sure if this would work or not)
3. Create a custom submit function which would, on valid, submit the form, but on invalid, it would relocate (AJAX) to the page/step the error is on. Then the next/back buttons wouldn't particularly matter other than semantically separating the information.

It would be nice to have a "$('input').abide(method: validate())" function, which would return a TRUE or array or objects with errors. But that doesn't seem to exist anywhere that I can see.

Zack commented on Danny Wahl's post over 5 years

Yeah, I'm running into a similar problem. Best solution I can think of is to make your submit button an anchor tag and run some jquery on click for that to submit the form. Something like this: (UNTESTED)
HTML
<a id="login_button" href="#" class="button split">Log in <span data-dropdown="drop">as</span></a>
<ul>
(dropdown stuff here)
</ul>

And then:

 $('#login_button').click(function(){
    $('#my_form').submit() //more details here if you need
});

You could even use jQuery to iterate over all the list items to do that same...either give them a "data-url" attirbute and use that for the url they send to or a "data-login-as" data for more post data to send

Hope that helps! I decided to just use two separate buttons for mine, but I would've done it this way if I had more things in my dropdown.

Good luck!
-Z

Zack commented on Zack's post almost 6 years

Turns out that in F5, the line should read:

 $('#your_form_id').foundation({bindings:'events'});

Posts Followed


Following

    No Content

Followers

My Posts




My Comments

You commented on Zack's post almost 4 years

@Rafi Benkual Yep! It's an update from 5.5.3 (I think) to 6! A lot of the code I'm re-writing to make it fit better as mobile-first and accessible (the first version of the program was squeezed out pretty quick, so more of the focus was on getting it working quickly). This time around, I've got some time to make sure it's a little more clean and usable.

You commented on Zack's post almost 4 years

@Rafi Benkual Thanks! Right now, I'm working on the admin panel for an inspection company, so there's a lot of times and dates--received, processed, sent, etc. A lot of the times get used a lot, too, from a human perspective. I'm using CodeIgniter as the backend, so I wrote a helper to crunch dates into more relative and kind of Gmail-esque times (e.g. "10:42a Yesterday", or "Jan 1st" instead of 2016-01-06T10:42 or 2016-01-01T20:39). Business-wise, the time matters a lot while the inspection is current, but as soon as it's in the past, we pretty much only look at days.

You commented on Zack's post almost 4 years

If you were using inline lists:
SCSS
ul.inline-list{
@include menu-base;
}

You commented on Alexander Chekspir's post over 4 years

It's not the classiest solution, but what I did was hide the side nav "hide-for-small" and then added in a top bar which was "show-for-small-only". It's not terribly DRY, but it works.

You commented on Effe's post over 5 years

If you're having the same problem of me, you can get "under" the JQuery stuff with:

 $('#form').get(0).submit();

Complements of ceejayoz at StackOverflow
http://stackoverflow.com/questions/24189316/foundation-5-abide-normal-submit?noredirect=1#comment37341135_24189316

You commented on Lynda Spangler's post over 5 years

Here's my latest solution. Keep in mind this is a total hack, and is probably no the best way to do things, but since I'm validating server-side, too, I'm going to allow it.

The subsections of my form are split up into fieldsets, and they're all single level (no fieldsets are embedded in other fieldsets), so you may have to adjust for your needs.

 //blur all the required fields to hit the abide live validation
$('#myNextButton').click(function(){
$(this).parents('fieldset').find(':input[required]').blur();
if($(this).parents('fieldset').find(':input[data-invalid]').length==0){
//valid, move to next step
}
else
{
//invalid, don't move to next step (abide will display the errors)
});

Hope that helps you out!

You commented on Lynda Spangler's post over 5 years

I'm working on a very similar problem. Here are the solutions I can think of so far:
1. Break up the form into multiple forms
2. create a custom callback for each input or set of inputs in each "chunk" of the form (not quite sure if this would work or not)
3. Create a custom submit function which would, on valid, submit the form, but on invalid, it would relocate (AJAX) to the page/step the error is on. Then the next/back buttons wouldn't particularly matter other than semantically separating the information.

It would be nice to have a "$('input').abide(method: validate())" function, which would return a TRUE or array or objects with errors. But that doesn't seem to exist anywhere that I can see.

You commented on Danny Wahl's post over 5 years

Yeah, I'm running into a similar problem. Best solution I can think of is to make your submit button an anchor tag and run some jquery on click for that to submit the form. Something like this: (UNTESTED)
HTML
<a id="login_button" href="#" class="button split">Log in <span data-dropdown="drop">as</span></a>
<ul>
(dropdown stuff here)
</ul>

And then:

 $('#login_button').click(function(){
    $('#my_form').submit() //more details here if you need
});

You could even use jQuery to iterate over all the list items to do that same...either give them a "data-url" attirbute and use that for the url they send to or a "data-login-as" data for more post data to send

Hope that helps! I decided to just use two separate buttons for mine, but I would've done it this way if I had more things in my dropdown.

Good luck!
-Z

You commented on Zack's post almost 6 years

Turns out that in F5, the line should read:

 $('#your_form_id').foundation({bindings:'events'});

Posts Followed

Following

  • No Content

Followers

  • No Content