Menu icon Foundation

My Posts

No Content

My Comments

K Lim commented on Donovan Ng's post over 5 years

Hmm...

Are you declaring your form as data-abide="ajax"?

What I would do:
a) declare your form with data-abide="ajax".
b) handle the submit event yourself with javascript.
c) in your javascript handling code, make an ajax call to your mysql db to authenticate the password entered.

hope that helps.

K Lim commented on David Jackson's post over 5 years

I noticed that if you use a form declared with data-abide, each of your inputs in the form has to be followed by a HTML element that has the class error. If you don't, you will see the bunching effect you described.

See the e.g. here
http://foundation.zurb.com/docs/components/abide.html

K Lim commented on Wee S.'s post over 5 years

hmm... if you need to override the default styling, you are better off defining them in your own scss and if necessary use the !important tag to override the default button style.

K Lim commented on Paul Vollmar's post over 5 years

check out the documentation:
http://foundation.zurb.com/docs/components/reveal.html

you are missing an attribute in the div where the reveal class is declared.

K Lim commented on K Lim's post over 5 years

thx for the response. In my project, elements in the DOM are dynamically added with javascript. Using data-options is unfortunately not an option (pardon the unintended pun) for me.

K Lim commented on Aria Rajasa's post almost 6 years

Not sure if there are other ways to "skin the cat", but here is what I do:

  1. set an id to your dropdown button/div.
  2. set a class or id to each of your element contained in the dropdown.
  3. write code to handle a click event for each of the class/id.
  4. within the code in 3., trigger a click event to the dropdown button/div.

e.g.

       $('.choice-from-dropdown').click(function(evt) {
            evt.stopImmediatePropagation();
            evt.preventDefault();
            $('.dropdown-btn').trigger('click');
        });

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Donovan Ng's post over 5 years

Hmm...

Are you declaring your form as data-abide="ajax"?

What I would do:
a) declare your form with data-abide="ajax".
b) handle the submit event yourself with javascript.
c) in your javascript handling code, make an ajax call to your mysql db to authenticate the password entered.

hope that helps.

You commented on David Jackson's post over 5 years

I noticed that if you use a form declared with data-abide, each of your inputs in the form has to be followed by a HTML element that has the class error. If you don't, you will see the bunching effect you described.

See the e.g. here
http://foundation.zurb.com/docs/components/abide.html

You commented on Wee S.'s post over 5 years

hmm... if you need to override the default styling, you are better off defining them in your own scss and if necessary use the !important tag to override the default button style.

You commented on Donovan Ng's post over 5 years
You commented on Paul Vollmar's post over 5 years

check out the documentation:
http://foundation.zurb.com/docs/components/reveal.html

you are missing an attribute in the div where the reveal class is declared.

You commented on K Lim's post over 5 years

thx for the response. In my project, elements in the DOM are dynamically added with javascript. Using data-options is unfortunately not an option (pardon the unintended pun) for me.

You commented on Aria Rajasa's post almost 6 years

Not sure if there are other ways to "skin the cat", but here is what I do:

  1. set an id to your dropdown button/div.
  2. set a class or id to each of your element contained in the dropdown.
  3. write code to handle a click event for each of the class/id.
  4. within the code in 3., trigger a click event to the dropdown button/div.

e.g.

       $('.choice-from-dropdown').click(function(evt) {
            evt.stopImmediatePropagation();
            evt.preventDefault();
            $('.dropdown-btn').trigger('click');
        });

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content