Menu icon Foundation

Developer

My Posts

  • 6
    Replies
  • What is Compass used for?

    By Rubén Santacruz

    compassnoob

    Hi, I'm new to Sass and Compass. Until now I've just used Foundation with vanilla CSS. But lately I decided I wanted to know more about preprocessors and I've learned the basics of Sass and Compass in order to make the most out of Foundation. While I w... (continued)

    Last Reply by Asif over 5 years ago


  • NEW
  • Problem with dropdown styling

    By Rubén Santacruz

    dropdown

    Hi, I am using Foundation 5.2.2 and I am having an issue with the dropdown "nub" (the pip?, not sure how to call this small triangle). As you can see in the following image, sometimes it is positioned properly and sometimes it is not. Positioning top a... (continued)








My Comments

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

Thanks for your answers, Rafi and Zack. Yes, I already understand what both of you say. Maybe I didn't ask my question in the right form.

What I'd like to know is why I need to install Compass to run Foundation CLI if, as far as I know, Foundation isn't build on top of Compass but in plain Sass. I think it is neither needed to compile .scss files because it can be done with Sass alone.

Is it only installed in order to be used when customizing Foundation if I would like to use it?

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

Thanks, Alexander. Your answer pointed me in the right direction. Now I bind to the three events that can close the modal:

  1. ESC key.
  2. Clicking in the top-right ×
  3. Clicking in the background

And then I go a step back in history.

Rubén Santacruz commented on Wing-Hou Chan's post over 5 years

I'd love it could keep me logged in. The checkbox during login doesn't do anything.

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

I would love to see a little example, because:

· Docs doesn't provide one.
· With the little I know, I am not sure if Foundation provides functionality to open alert boxes or the only option is create one dynamically and then trigger the open event from my code. If I should trigger it from my code, it doesn't has to be 'open.fndtn.alert-box' necessarily (as the docs prompt). It could be 'foo' and it has nothing to do with Foundation.

I've made this little example, but I am not sure if I am missing something and there is a provided option with Foundation to 'open' alert boxes:

...
<a href="#" class="button" id="openAlert">Open alert box...</a>
<div id="appendHere"></div>
...
...
$(document).on('open.fndtn.alert-box', function(event) { // It could be $(document).on('foo',function...
  alert('An alert box has been opened!');
});

$('#openAlert').click(function(e) {
  e.preventDefault();
  var parent = $('#appendHere');
  var newNode = $(
            "<div data-alert class='alert-box' id='dynamicAlert'>" +
               "This is a <b>dynamically created</b> alert box." +
               "<a href='#' class='close'>&times;</a>" + 
            "</div>");
  parent.append(newNode);
  $('#dynamicAlert').trigger('open.fndtn.alert-box'); // It could be $('#dynamic').trigger('foo');
});
...

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

Is anybody there who can jump in?

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

1- Open a new browser tab or window. You have no history and you're at your default home page, let's say http://www.google.com
2- Navigate to the page in question. In my case it is http://localhost/reveal_and_history.html
3- Click the Show Modal button. Notice that the url at this point is http://localhost/reveal_and_history.html#modal
4- At this point it is working as expected: you can click back and forward in your browser and you will cycle between "original state" and "modal state" respectively.

But here is where the problem arises:
Repeat 1-3.
4- Now close the modal, for instance hitting the ESC key. The original state of the page is shown, this is without modal (this is obvious, you have closed it by hitting ESC). But the URL still is: http://localhost/reveal_and_history.html#modal
5- Click your browser back button.
6- Notice that you stay in the same page. The URL now is http://localhost/reveal_and_history.html. The result should have been going to your home page (http://www.google.com). But you have to click the back button once more in order to go to http://www.google.com

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

Alexander, I'm not sure I understood your comment. Do you mean that I should do something like that?

$(document).on('close', '#sampleModal', function () {
  history.back();
});

Rubén Santacruz commented on Rubén Santacruz's post over 5 years

Nobody?

Rubén Santacruz commented on Alana Bothun-Hill's post over 5 years

Hi, Alana and Rafi.

I also find this feature mandatory from an UX point of viewpoint.

Currently I am trying a workaround involving custom validators. It does not convince me at all, but is the best that came to my mind for a quick solution.

I handle validation through a custom function and there I change the error message according to the state of the validation. There are some cons, for example I have to write a new RegExp even if it is present in the provided patterns. I could improve it by parsing the "pattern" and "type" attributes from the input element but I think it would be still a a little messy because I should repeat in my custom function part of the code present in check_validation_and_apply_styles().

Also I think it wouldn't work with some special cases involving radio buttons or checkboxes because they appear before custom validation in the execution flow of check_validation_and_apply_styles().

Definitely this feature should be provided in an easy way from Abide's core.

Rafi, I haven't seen this feature request on Github. Should I fill a new issue?

<!doctype html>
<html class="no-js" lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Foundation | Abide</title>
   <link rel="stylesheet" href="css/normalize.css" />    
   <link rel="stylesheet" href="css/foundation.css" />   
   <script src="js/vendor/modernizr.js"></script>
</head>
<body>
   <div class="row">
      <div class="small-12 columns">
         <h1>Abide form validator</h1>
         <h2>Custom validator</h2>
         <p></p>
         <form data-abide id="myForm">
            <div id="name-field">
               <label for="name">Name <small>required</small>
                  <input type="text" required id="name" data-abide-validator="myValidator">
               </label>
               <small class="error" id="error_message">Your name is required. It can only contain letters and whitespaces.</small>
            </div>            
            <button type="submit">Submit</button>
         </form>         
      </div>
   </div>
   <script src="js/vendor/jquery.js"></script>
   <script src="js/vendor/fastclick.js"></script>
   <script src="js/foundation/foundation.js"></script>
   <script src="js/foundation/foundation.abide.js"></script>
   <script type="text/javascript">
      $(document).foundation({
         abide: {
            validators: {
               myValidator: function(el, required, parent) {
                  var emptyStringRegEx = /^$/;
                  var validRegExp = /^[A-Za-z ]+$/;
                  var result = false;                  
                  if (emptyStringRegEx.test(el.value.trim())) {
                     console.log("The input is empty. Input value: '" + el.value + "'");
                     if (required) {
                        $("#error_message").text("Your name cannot be empty.");
                     }
                     else {
                        result = true;
                     }
                  }
                  else {
                     if (validRegExp.test(el.value)) {
                        console.log("The input is valid. Input value: '" + el.value + "'");
                        result = true;
                     }
                     else {
                        console.log("The input is invalid. Input value: '" + el.value + "'");
                        $("#error_message").text("Your name can only contain letters and whitespaces.");
                     }
                  }
                  return result;
               }
            }
         }
      });
   </script>
</body>

Rubén Santacruz commented on Bruno Couto's post over 5 years

I think that login form is not using Abide.

Posts Followed






  • 9
    Replies
  • Topbar text input too big

    By Brett Hambridge

    topbarinput

    Hi, I've got a new project on the go and have created a top bar (trying to emulate sexy topbar in the documentation). The problem is that the form input is bigger than the submit button (see attached image). Can you take a look at my code and see... (continued)

    Last Reply by Zachary Lyons about 5 years ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Rubén Santacruz's post over 5 years

Thanks for your answers, Rafi and Zack. Yes, I already understand what both of you say. Maybe I didn't ask my question in the right form.

What I'd like to know is why I need to install Compass to run Foundation CLI if, as far as I know, Foundation isn't build on top of Compass but in plain Sass. I think it is neither needed to compile .scss files because it can be done with Sass alone.

Is it only installed in order to be used when customizing Foundation if I would like to use it?

You commented on Rubén Santacruz's post over 5 years

Thanks, Alexander. Your answer pointed me in the right direction. Now I bind to the three events that can close the modal:

  1. ESC key.
  2. Clicking in the top-right ×
  3. Clicking in the background

And then I go a step back in history.

You commented on Wing-Hou Chan's post over 5 years

I'd love it could keep me logged in. The checkbox during login doesn't do anything.

You commented on Rubén Santacruz's post over 5 years

I would love to see a little example, because:

· Docs doesn't provide one.
· With the little I know, I am not sure if Foundation provides functionality to open alert boxes or the only option is create one dynamically and then trigger the open event from my code. If I should trigger it from my code, it doesn't has to be 'open.fndtn.alert-box' necessarily (as the docs prompt). It could be 'foo' and it has nothing to do with Foundation.

I've made this little example, but I am not sure if I am missing something and there is a provided option with Foundation to 'open' alert boxes:

...
<a href="#" class="button" id="openAlert">Open alert box...</a>
<div id="appendHere"></div>
...
...
$(document).on('open.fndtn.alert-box', function(event) { // It could be $(document).on('foo',function...
  alert('An alert box has been opened!');
});

$('#openAlert').click(function(e) {
  e.preventDefault();
  var parent = $('#appendHere');
  var newNode = $(
            "<div data-alert class='alert-box' id='dynamicAlert'>" +
               "This is a <b>dynamically created</b> alert box." +
               "<a href='#' class='close'>&times;</a>" + 
            "</div>");
  parent.append(newNode);
  $('#dynamicAlert').trigger('open.fndtn.alert-box'); // It could be $('#dynamic').trigger('foo');
});
...

You commented on Rubén Santacruz's post over 5 years

Is anybody there who can jump in?

You commented on Rubén Santacruz's post over 5 years

1- Open a new browser tab or window. You have no history and you're at your default home page, let's say http://www.google.com
2- Navigate to the page in question. In my case it is http://localhost/reveal_and_history.html
3- Click the Show Modal button. Notice that the url at this point is http://localhost/reveal_and_history.html#modal
4- At this point it is working as expected: you can click back and forward in your browser and you will cycle between "original state" and "modal state" respectively.

But here is where the problem arises:
Repeat 1-3.
4- Now close the modal, for instance hitting the ESC key. The original state of the page is shown, this is without modal (this is obvious, you have closed it by hitting ESC). But the URL still is: http://localhost/reveal_and_history.html#modal
5- Click your browser back button.
6- Notice that you stay in the same page. The URL now is http://localhost/reveal_and_history.html. The result should have been going to your home page (http://www.google.com). But you have to click the back button once more in order to go to http://www.google.com

You commented on Rubén Santacruz's post over 5 years

Alexander, I'm not sure I understood your comment. Do you mean that I should do something like that?

$(document).on('close', '#sampleModal', function () {
  history.back();
});

You commented on Rubén Santacruz's post over 5 years

Nobody?

You commented on Alana Bothun-Hill's post over 5 years

Hi, Alana and Rafi.

I also find this feature mandatory from an UX point of viewpoint.

Currently I am trying a workaround involving custom validators. It does not convince me at all, but is the best that came to my mind for a quick solution.

I handle validation through a custom function and there I change the error message according to the state of the validation. There are some cons, for example I have to write a new RegExp even if it is present in the provided patterns. I could improve it by parsing the "pattern" and "type" attributes from the input element but I think it would be still a a little messy because I should repeat in my custom function part of the code present in check_validation_and_apply_styles().

Also I think it wouldn't work with some special cases involving radio buttons or checkboxes because they appear before custom validation in the execution flow of check_validation_and_apply_styles().

Definitely this feature should be provided in an easy way from Abide's core.

Rafi, I haven't seen this feature request on Github. Should I fill a new issue?

<!doctype html>
<html class="no-js" lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Foundation | Abide</title>
   <link rel="stylesheet" href="css/normalize.css" />    
   <link rel="stylesheet" href="css/foundation.css" />   
   <script src="js/vendor/modernizr.js"></script>
</head>
<body>
   <div class="row">
      <div class="small-12 columns">
         <h1>Abide form validator</h1>
         <h2>Custom validator</h2>
         <p></p>
         <form data-abide id="myForm">
            <div id="name-field">
               <label for="name">Name <small>required</small>
                  <input type="text" required id="name" data-abide-validator="myValidator">
               </label>
               <small class="error" id="error_message">Your name is required. It can only contain letters and whitespaces.</small>
            </div>            
            <button type="submit">Submit</button>
         </form>         
      </div>
   </div>
   <script src="js/vendor/jquery.js"></script>
   <script src="js/vendor/fastclick.js"></script>
   <script src="js/foundation/foundation.js"></script>
   <script src="js/foundation/foundation.abide.js"></script>
   <script type="text/javascript">
      $(document).foundation({
         abide: {
            validators: {
               myValidator: function(el, required, parent) {
                  var emptyStringRegEx = /^$/;
                  var validRegExp = /^[A-Za-z ]+$/;
                  var result = false;                  
                  if (emptyStringRegEx.test(el.value.trim())) {
                     console.log("The input is empty. Input value: '" + el.value + "'");
                     if (required) {
                        $("#error_message").text("Your name cannot be empty.");
                     }
                     else {
                        result = true;
                     }
                  }
                  else {
                     if (validRegExp.test(el.value)) {
                        console.log("The input is valid. Input value: '" + el.value + "'");
                        result = true;
                     }
                     else {
                        console.log("The input is invalid. Input value: '" + el.value + "'");
                        $("#error_message").text("Your name can only contain letters and whitespaces.");
                     }
                  }
                  return result;
               }
            }
         }
      });
   </script>
</body>

You commented on Bruno Couto's post over 5 years

I think that login form is not using Abide.

Posts Followed

Following

  • No Content

Followers

  • No Content