Menu icon Foundation

Developer | Fairfax, VA

Web. Tech. Geek.

My Posts

No Content

My Comments

Stephen Sauceda commented on Alley Hector's post about 5 years

Looks like the bowser can't find the Foundation JavaScript.

http://cl.ly/WbEN

Stephen Sauceda commented on Luca Spanò's post over 5 years

It looks like the form is actually passing validation because there is a value assigned to the first option

<option value="Seleziona categoria">Seleziona colore...</option>

Remove the value of the value attribute and it should register as invalid if something else from the list is not chosen:

<option value>Seleziona colore...</option>

Stephen Sauceda commented on Rebecca Chapman's post over 5 years

Hi Rebecca,

You can still set it up for the 'click' event of the submit button on the form and just wait to actually submit the form until after the modal fires. Maybe this would work for you? :)

  var $form = $('#myForm'); // #myForm = the ID of the form
  var $modal = $('#myModal'); // #myModal = the ID of the modal
  var $button = $('#submitButton'); // #submitButton = the ID of the submit button

  // When the submit button is clicked
  $button.on('click', function(e){

    // stop the form from submitting
    e.preventDefault();

    // open the modal
    $modal.foundation('reveal', 'open');

    // wait 2 seconds before closing the modal
    setTimeout(dismissModal, 2000);

    function dismissModal(){
      $modal.foundation('reveal', 'close');

      // Finally, submit the form
      $form.submit();
    }

  });

Stephen Sauceda commented on Paul Jordan's post over 5 years

You'll need a specific media query to target a device in landscape orientation. The actual resolution of the device doesn't change, just the orientation, so technically the device's width is still 480px.

So you'd need to customize the media queries in _settings.scss to pick up the orientation change of mobile devices when you want. In this case, at 40em, you'd change the $medium-up variable to read:

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)}), #{$landscape}";

This got the result you were describing above (the menu icon in portrait orientation and the full menu in landscape).

Stephen Sauceda commented on roy bottomley's post over 5 years

I looks like you're missing the section wrapper for the ul. So your haml would be:
HAML
.fixed.contain-to-grid
%nav.top-bar
%section
%ul.right
%li
%a{:href => "#"}Sign In
%li
%a{:href => "#"}Sign Up

For newer versions of Foundation, the section should have a class of .top-bar-section. This fixed the issue in Foundation 4/5 (http://cdpn.io/fohak). I didn't have a copy of v3 to test on but give it a shot. :)

Stephen Sauceda commented on metalmadgear's post over 5 years

The stylesheets directory isn't created when you run the foundation new mysite command. It's created when you run compass compile for the first time. The compass command compiles Sass down to normal CSS, creating the stylesheets folder and app.css in the process.

Posts Followed





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Alley Hector's post about 5 years

Looks like the bowser can't find the Foundation JavaScript.

http://cl.ly/WbEN

You commented on Luca Spanò's post over 5 years

It looks like the form is actually passing validation because there is a value assigned to the first option

<option value="Seleziona categoria">Seleziona colore...</option>

Remove the value of the value attribute and it should register as invalid if something else from the list is not chosen:

<option value>Seleziona colore...</option>

You commented on Rebecca Chapman's post over 5 years

Hi Rebecca,

You can still set it up for the 'click' event of the submit button on the form and just wait to actually submit the form until after the modal fires. Maybe this would work for you? :)

  var $form = $('#myForm'); // #myForm = the ID of the form
  var $modal = $('#myModal'); // #myModal = the ID of the modal
  var $button = $('#submitButton'); // #submitButton = the ID of the submit button

  // When the submit button is clicked
  $button.on('click', function(e){

    // stop the form from submitting
    e.preventDefault();

    // open the modal
    $modal.foundation('reveal', 'open');

    // wait 2 seconds before closing the modal
    setTimeout(dismissModal, 2000);

    function dismissModal(){
      $modal.foundation('reveal', 'close');

      // Finally, submit the form
      $form.submit();
    }

  });

You commented on Paul Jordan's post over 5 years

You'll need a specific media query to target a device in landscape orientation. The actual resolution of the device doesn't change, just the orientation, so technically the device's width is still 480px.

So you'd need to customize the media queries in _settings.scss to pick up the orientation change of mobile devices when you want. In this case, at 40em, you'd change the $medium-up variable to read:

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)}), #{$landscape}";

This got the result you were describing above (the menu icon in portrait orientation and the full menu in landscape).

You commented on roy bottomley's post over 5 years

I looks like you're missing the section wrapper for the ul. So your haml would be:
HAML
.fixed.contain-to-grid
%nav.top-bar
%section
%ul.right
%li
%a{:href => "#"}Sign In
%li
%a{:href => "#"}Sign Up

For newer versions of Foundation, the section should have a class of .top-bar-section. This fixed the issue in Foundation 4/5 (http://cdpn.io/fohak). I didn't have a copy of v3 to test on but give it a shot. :)

You commented on metalmadgear's post over 5 years

The stylesheets directory isn't created when you run the foundation new mysite command. It's created when you run compass compile for the first time. The compass command compiles Sass down to normal CSS, creating the stylesheets folder and app.css in the process.

Posts Followed

Following

  • No Content

Followers