Menu icon Foundation
How to add custom jQuery

So I finally got around to learning jQuery and would love to test it on Foundation...but nothing I do works for some reason.

Do I add the code in the $(document).foundation(); or create my own $(document).ready(function() {});? Either way nothing works and I'm positive I'm writing the jQuery right, because I literally copied off the API page (http://api.jqueryui.com/bounce-effect/). Am I not suppose to add this to the app.js file at all?

Any and all help is appreciated, thank you for your time.

jqueryjavascriptAJAXcustom

So I finally got around to learning jQuery and would love to test it on Foundation...but nothing I do works for some reason.

Do I add the code in the $(document).foundation(); or create my own $(document).ready(function() {});? Either way nothing works and I'm positive I'm writing the jQuery right, because I literally copied off the API page (http://api.jqueryui.com/bounce-effect/). Am I not suppose to add this to the app.js file at all?

Any and all help is appreciated, thank you for your time.

Karl Ward about 4 years ago

You don't add your code inside $(document).foundation();, but you can add your code where you want, and adding Foundation does not usually dictate where your custom js is. Do you have your JS directly in the html document? ... or is it loaded in a separate file?

If you have a link I could check ... Else, you should familiarize yourself with web inspectors (I use chrome) and the console.log() command, to trace events that occur in your JS. That would make it easy to see if your JS fires ...

Ryan about 4 years ago

Karl Ward,

It is currently in the same html file loaded after all other scripts. I have tried placing it in the separate app.js file, and neither have worked.

I have attached the html file I am working on. I realize the code is sloppy, but this is only a test file that was meant to take 2 minutes, not two days. Is there something wrong with my jQuery?

<!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</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  <style>
    #container {
      position:relative;
      top:35%;
      left:25%;
    }

    #one, #two, #three {
      height:150px;
      width:150px;
      display:inline-block;
      margin-left:2em;
      border:2px solid black;
      -webkit-border-radius: 45px;
      -moz-border-radius: 45px;
      border-radius: 45px;
    }

    #one {background-color:red;}

    #two {background-color:green;}

    #three {background-color:blue;}
  </style>
  </head>
  <body>
  <div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  <script>
    $(document).ready(function() {
      $('#one').click(function() {
        $(this).effect('explode');
      });

      $('#two').click(function() {
        $(this).effect('bounce', {times:3}, 500);
      });

      $('#three').click(function() {
        $(this).effect('slide');
      });
    });
  </script>
  </body>
</html>

Wing-Hou Chan about 4 years ago

Hey Ryan!

Try writing your script like this instead, unwrapping it from your function triggered by document ready:

$('#one').click(function() {
  $(this).effect('explode');
});
$('#two').click(function() {
  $(this).effect('bounce', {times:3}, 500);
});
$('#three').click(function() {
  $(this).effect('slide');
});

Also you will need jQuery UI linked into your document as well.

jQuery UI can be downloaded here: http://jqueryui.com/download/

reenan about 4 years ago

You'll need to add jquery-ui in order to use those effects. You can either download it and place it somewhere in your application, like next to jquery:

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Otherwise you can use a CDN like google, more info here: https://developers.google.com/speed/libraries/devguide#jquery-ui

It be something like

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

If you want to use bower:
http://learn.jquery.com/jquery-ui/environments/bower/
Should be something like:

<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>

Other than that, your javascript should work as-is.

Ryan about 4 years ago

reenan arbitrario and Wing-Hou Chan,

Thank you for your responses. I skimmed through the jQuery folder and assumed the UI was included since they seemed to have everything else...

I will download the UI and post back here later tonight when I have access to my computer again (posting from my mobile).

Thank you again.

Ryan about 4 years ago

reenan arbitrario,

Thank you for your download links, I was unaware that I could use bower for the ui installation.

Wing-Hou Chan,

May I ask why I should remove the $(document).ready() ? After installing the ui everything works fine with and without it. Should I not be using it at all in foundation?

Wing-Hou Chan about 4 years ago

If you have two options to do something but one requires more code than the other then it is obvious to use the option with less code.

Also reading it, it doesn't really make sense. What you are saying is "on document ready on element on click". Why not write it like this: "on element click".

Saves code, reduces file size, reduces bandwidth, reduces page loading time and is good practice.

Taylor Shaw 4 months ago

The answers shared here gave me a better idea regarding How to add custom jQuery. I have been wondering about the same for quite a while now. Thanks for sharing the question here. Do share more such relevant questions.  Tours of Washington DC

ritariya 2 months ago

I was thinking about this situation that how to add custom jQuery. Accidentally I have seen the post and I could find the solution to the problem. Finally I got around to learning jQuery. I want to add .js file to my app. It’s really informative. over 55 senior rv campground

Botox Tunisie 2 months ago

thank you

stevelarsc 2 months ago

Thanks for helping us learn how to create our own custom jQuery plugin. I know how to create a basic jquerry plugin,compare internet providers zip code and the code format. I have tried to run the code you have shared and seems to be working fine. Thanks for sharing.