Menu icon Foundation

Designer | Montreal, Quebec

My Posts

No Content

My Comments

Dominic Brown commented on Chris Williams's post over 4 years

Same thing here.

Dominic Brown commented on Rafi Benkual's post over 5 years

Okay, I went through a couple of articles on the web. Made a little modification to the code and it finally worked for me.
First I've let the ...foundation.abide.js as is or don't link it (it's already in the foundation.min.js).
Make sure $(document).foundation(); is placed after.

here is the code

 $('#myForm').submit(function(e) {
    //prevent default form submitting.
    e.preventDefault()

    $(this).on('valid', function() {
      var name = $("input#name").val();
      var email = $("input#email").val();
      var message = $("textarea#message").val();

      //Data for reponse
      var dataString = 'name=' + name +
        '&email=' + email +
        '&message=' + message;

      //Begin Ajax call
      $.ajax({
        type: "POST",
        url:"php/mail.php",
        data: dataString,
        success: function(data){
          $('.contactform').html("<div id='thanks'></div>");
            $('#thanks').html("<h2>Thanks!</h2>")
            .append("<p>Dear "+ name +", I will get back to you as soon as I can ;)</p>")
            .hide()
            .fadeIn(1500);
        },
      }); //ajax call
      return false;
    });
  });

Really, I'm just a designer, not sure why this way is actually working for me.

Dominic Brown commented on Rafi Benkual's post over 5 years

Same here, same problem!

But in my case, with or without jQuery, it is still refreshing the page and not sending emails...

Dominic Brown commented on Alex Plaza's post over 5 years

Is it possible to get a specific data-orbit-slide="name" from an other html page... okay let's rephrase this one:
I want to click on a "dropdown" link to load the page that contain the orbit and show the targeted slide.
How can I do that?

Menu code
HTML
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
<a href="#">Sponsorship</a>
<ul class="dropdown">
<li><a data-orbit-link="bronze" href="sponsorship.html">Bronze</a></li>
<li><a data-orbit-link="silver" href="sponsorship.html">Silver</a></li>
<li><a data-orbit-link="ambassador" href="sponsorship.html">Ambassador</a></li>
</ul>
</li>

Orbit slide code

<ul id="sponsor" data-orbit data-options="...">

          <li id="bronze" data-orbit-slide="bronze">

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Chris Williams's post over 4 years

Same thing here.

You commented on Rafi Benkual's post over 5 years

Okay, I went through a couple of articles on the web. Made a little modification to the code and it finally worked for me.
First I've let the ...foundation.abide.js as is or don't link it (it's already in the foundation.min.js).
Make sure $(document).foundation(); is placed after.

here is the code

 $('#myForm').submit(function(e) {
    //prevent default form submitting.
    e.preventDefault()

    $(this).on('valid', function() {
      var name = $("input#name").val();
      var email = $("input#email").val();
      var message = $("textarea#message").val();

      //Data for reponse
      var dataString = 'name=' + name +
        '&email=' + email +
        '&message=' + message;

      //Begin Ajax call
      $.ajax({
        type: "POST",
        url:"php/mail.php",
        data: dataString,
        success: function(data){
          $('.contactform').html("<div id='thanks'></div>");
            $('#thanks').html("<h2>Thanks!</h2>")
            .append("<p>Dear "+ name +", I will get back to you as soon as I can ;)</p>")
            .hide()
            .fadeIn(1500);
        },
      }); //ajax call
      return false;
    });
  });

Really, I'm just a designer, not sure why this way is actually working for me.

You commented on Rafi Benkual's post over 5 years

Same here, same problem!

But in my case, with or without jQuery, it is still refreshing the page and not sending emails...

You commented on Alex Plaza's post over 5 years

Is it possible to get a specific data-orbit-slide="name" from an other html page... okay let's rephrase this one:
I want to click on a "dropdown" link to load the page that contain the orbit and show the targeted slide.
How can I do that?

Menu code
HTML
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
<a href="#">Sponsorship</a>
<ul class="dropdown">
<li><a data-orbit-link="bronze" href="sponsorship.html">Bronze</a></li>
<li><a data-orbit-link="silver" href="sponsorship.html">Silver</a></li>
<li><a data-orbit-link="ambassador" href="sponsorship.html">Ambassador</a></li>
</ul>
</li>

Orbit slide code

<ul id="sponsor" data-orbit data-options="...">

          <li id="bronze" data-orbit-slide="bronze">

Posts Followed


Following

  • No Content

Followers

  • No Content