Menu icon Foundation
jQuery

Hello,

The structure of my website :

<html>
<head>

<link rel="stylesheet" href="src/foundation-5.2.2.custom/css/normalize.css">
<link rel="stylesheet" href="src/foundation-5.2.2.custom/css/foundation.css">

</head>
<body>

INCLUDE PAGE WITH PHP

<script src="src/foundation-5.2.2.custom/js/vendor/modernizr.js"></script>
<script src="src/foundation-5.2.2.custom/js/vendor/jquery.js"></script>
<script src="src/foundation-5.2.2.custom/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

</body>
</html>

In this case, how use jQuery in my INCLUDE PAGE ?

Is it possible to put jQuery in the section or on the top of section ?

Thanks

jquery

Hello,

The structure of my website :

<html>
<head>

<link rel="stylesheet" href="src/foundation-5.2.2.custom/css/normalize.css">
<link rel="stylesheet" href="src/foundation-5.2.2.custom/css/foundation.css">

</head>
<body>

INCLUDE PAGE WITH PHP

<script src="src/foundation-5.2.2.custom/js/vendor/modernizr.js"></script>
<script src="src/foundation-5.2.2.custom/js/vendor/jquery.js"></script>
<script src="src/foundation-5.2.2.custom/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

</body>
</html>

In this case, how use jQuery in my INCLUDE PAGE ?

Is it possible to put jQuery in the section or on the top of section ?

Thanks

dims about 5 years ago

you can put jquery and modernizr in the head
and i think modernizr should be after jquery
as far as adding JS in include file,there shouldn't be any issues

Karl Ward about 5 years ago

I don't quite understand your question ... You mean you want jQuery interaction in the page? Why not just run any jquery-based functions inside the (document).ready(), which is normal procedure ...

 $(document).ready(function() {
      alert("document ready occurred!");
});

I can't see what critical JS you need to run before the jquery script has loaded, or before the document data has loaded ....

Lyn about 5 years ago

Hey there,

@Karl : I think he wants to run different javascript depending on the page, but as the page is loaded before his scripts, this doesn't work.

@Jimmy : As bimal suggested you can include your js files in the head tag but keep in mind this (from http://stackoverflow.com/a/5329895) :

If you include external js files at the bottom of your page, you give the priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics.
I believe, if you do not use a content delivery network to deliver images to the client then you are only allowed to process a maximum of 2 HTTP requests at a time.
You do not want to waste these requests on logic because we all know how impatient the end user is.

What I can advise you to do, is to make another external file like javascript.php that you could include in your alreadyIncludedPhpPage. That doesn't sound clear so here is an example :

Main structure :

<html>
     <head>
          <link rel="stylesheet" href="src/foundation-5.2.2.custom/css/normalize.css">
          <link rel="stylesheet" href="src/foundation-5.2.2.custom/css/foundation.css">
     </head>
     <body>

          INCLUDE PAGE WITH PHP

     </body>
</html>

Included Page :

<?php
     //All your Super PHP things
     include 'javascript.php';
     //Now you can do your javascript stuff here !
?>

javascript.php :

<script src="src/foundation-5.2.2.custom/js/vendor/modernizr.js"></script>
<script src="src/foundation-5.2.2.custom/js/vendor/jquery.js"></script>
<script src="src/foundation-5.2.2.custom/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

And there you go !
Actually I usually do the same for the head too so that when I change something I don't have to change it everywhere. But that's just me.

Kind regards to all,

Lyn.

Naina almost 2 years ago

You can place the jQuery file link on the page head but for faster processing it should be above the ending body tag.

This is how you should place your jQuery link in your website.

 

<body>

INCLUDE PAGE WITH PHP

<script src="src/foundation-5.2.2.custom/js/vendor/modernizr.js"></script>
<script src="src/foundation-5.2.2.custom/js/vendor/jquery.js"></script>
<script src="src/foundation-5.2.2.custom/js/foundation.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script>
    $(document).foundation();
    $(document).ready(function() {
      alert("jquery ready");
    });
</script>

I have placed the latest version of jQuery 3.2.1 minified from the cdn.

Mese henny about 1 year ago

Yes, It is possible to put jQuery in the section or on the top of section. telldunkin feedback

Dixa Limbani about 1 year ago

If you are using WordPress then you can easily compress and minify CSS and JS. To reduce the errors and combine CSS and JS you can use autoptimize plugin. Just install and activate the plugin. Go to plugin settings page > Go to advanced setting >  Check the box front of inline and defer CSS and put your critical CSS code and you are good to go. You can find this website with an active autooptimize plugin, so you can inspect its code in your browser.

Regards.