I was wondering if anyone out there knew which js files from zurbs foundation requires Jquery. I am building my functions.php file in wordpress and I want to set the dependencies for the scripts if they have any, so that they are guaranteed to load after the Jquery file. Here is a list of the files
modernizer.js
foundation.js
app.js
Again which ones have dependancies on Jquery?
This question is a bit old, so the question wouldn't be exactly the same now:
modernizer.js doesn't require jQuery, I think foundation & app did, but zurb has significantly changed the javascript files, including made their own fork of modernizer (modernizr.foundation.js) - the current (foundation 2.2) "preferred" load order is:
<head>
<script src="js/modernizr.foundation.js"></script>
</head>
<body>
...
...
<!-- end of container/all content -->
<script src="js/jquery-1.7.2.js"></script>
<!-- all the jQuery dependent files begin with 'jquery.' and are separated so
you can remove what you don't use -->
<script src="js/jquery.reveal.js"></script>
<script src="js/jquery.orbit-1.4.0.js"></script>
<script src="js/jquery.customforms.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.tooltips.js"></script>
<!-- app.js is basic functions that you're supposed to edit -
it requires jQuery to start as well -->
<script src="js/app.js"></script>
</body>
Related
I'm new to react and started to hate it
there are literally no documents about how to use CSS frameworks offline with react.
I don't wanna use npm or CDN all the time because I'm usually offline
Is there any way to add materialize CSS and js to react like a normal project with link and script
yes, you can install the assets of materialize from the offical site
https://materializecss.com/getting-started.html
then you can add the files into public folder after that add the following scripts at public/index.html file like that:-
<head>
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<script type="text/javascript" src="%PUBLIC_URL%/js/materialize.min.js"></script>
</body>
but this isn't the best practice for react projects.
I have installed Angular (1) Material (v.1.1.5) via NuGet in my Visual Studio project and referenced it following their guide:
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/angular-aria.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-material.min.js"></script>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<link href="content/angular-material.min.css" rel="stylesheet" />
From their guide:
If you're using the Angular CLI, you can add this to your styles.css:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Alternatively, you can just reference the file directly. This would
look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
NuGet won't install the prebuilt themes .css files and I cannot find them on the Net. Or am I simply doing something wrong? Am I missing something? Should the prebuilt themes be part of the angular-material.min.css file?
EDIT:
#Edric:
I have already defined my mdThemeProvider:
<body ng-app="myApp" ng-controller="MainCtrl" md-theme="ccc" md-theme-watch="true">
&
var myApp = angular.module("MyApp", ['ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial', 'ngRoute', 'ngSanitize']);
rcaApp.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('ccc')
.primaryPalette('pink')
.accentPalette('orange')
.dark();
});
You're looking at the documentation for Angular Material. You should be looking at the docs for AngularJS Material instead.
Anyways, here's the correct way to define a theme using $mdThemeProvider:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
More info on theming
With node and browserify it's easy to manage js dependencies by just buttoning it all up into a bundle.js file and including that in the parent html.
What I'm wondering is how do you guys manage libs like bootstrap?
They download just fine to node_modules but how do you get them into your html files or asset folder?
Do you just reference them straight from node_modules? Have a task copy them in? Etc?
Caveat, I was hoping to do this without the browserify-css plugin because I want to keep my css and js separate.
I personally have a Gulp / Grunt workflow setup in which I included my js/css modules and then it automatically do all the important task and at the end I have only one css and js file. Then I import them to HTML.
I suggest you to make task for gulp or grunt which will check for changes in the folder that you decide ( where download of libraries will be ). If there is a change - it will automatically copy the .css files into another working directory.
I hope I understand what you want correctly.
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.
In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:
<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...
And then for production or staging I would like to have grunt output:
<script src="js/all-files-in-one.js"></script>
How to achieve this the simplest way?
You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.
Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.
<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->
<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->
Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:
<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>
The example and docs explain how you can configure this and use it for other assets, like css.
In app.html:
<body>
{{> index}}
</body>
<template name="index">
...
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js" type="text/javascript" />
<script src="animation.js" type="text/javascript" />
...
</template>
animation.js is inside /public along with all the html and jpeg's etc for a static site.
When I navigate to the app root, it all works right except that the Swiffy animation just doesn't show up. Perhaps something to do with Meteor not just serving JS from the /public directory? How can I fix this?
When I navigate to the very same code stored as /public/index.html, the animation shows up.
Note: Swiffy is just a way to automatically convert Flash animations into .JS that is run by the Swiffy runtime.
Client JS libraries should be placed in the client directory. This will make it available to meteor for inclusion into the minified app.
For more information see http://docs.meteor.com/#structuringyourapp
You can put your library to /client/compatibility directory. But you put there, all pages include your library. If you want some pages include your javascript you must use ext package. For example https://atmosphere.meteor.com/package/external-file-loader