I'm pretty new at this. I'm trying to use Super Scrollorama with Zurb Foundation 4. According to:
http://johnpolacek.github.io/superscrollorama/
First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama.
However, I can't seem to get past the first step? When I try to add Super Scrollorama to a Foundation 4 project, just importing JQuery seems to break Foundation 4. TweenMax.js links just fine.
I'm using this code to link it:
<script src="js/superscrollorama/greensock/TweenMax.min.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Any ideas? Is this possible? I did a search on Google and there doesn't seem to be any tutorials showing how to use Super Scrollorama with Zurb Foundation 4.
I finally figured it out.
This script link:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Muse appear BEFORE the Zurb Foundation 4 script link:
<script src="js/foundation.min.js"></script
So, the correct implementation would look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/foundation.min.js"></script>
Such a crazy small, stupid detail cause such a huge waste of time!
If you add the link AFTER, then Zurb Foundation 4 WILL NOT WORK.
Related
Is there a way to use the newest version of the chart-annotation-plugion as an inline plugin?
How I currently do it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#1.0.0-rc/dist/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-beta.1/chartjs-plugin-datalabels.min.js" ></script>
But in newer versions of ChartJS you need to register your plugins, but I dont think the plugin has a global property to register it, like the datalabel plugin (https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation) has.
Here are the docs for the annotation plugin: https://www.chartjs.org/chartjs-plugin-annotation/guide/integration.html.
Any help is greatly appreciated.
Late to the party but I don't see a response yet and I was also having trouble figuring it out.
Simply include
<script>
Chart.register('chartjs-plugin-annotation');
Chart.register('chartjs-plugin-datalabels');
// ... rest of your code
</script>
somewhere near the top of your scripts after your CDN imports.
As per the Chartjs plugin documentation, this will work with any plugin that follows the naming convention chartjs-plugin-*
Edit:
Adding a working example; credit to #dennis-bauszus for most of the chart layout.
https://codepen.io/jarrilla/pen/OJjMVEo
I'm trying to add a truck restrictions layer to my map using Sygic's Leaflet 1.0.3, and their plugin 1.1.0 with an evaluation key. I'm receiving the following error in the FireFox JavaScript console:
TypeError: L.TileLayer.sygicRestriction is not a function
This makes me think that there's a new version of the plugin, but I don't know the URL since it's not in the documentation.
NOTE: It might be nice to always host the latest like:
https://maps.api.sygic.com/js/leaflet.sygic-latest.js
or just:
https://maps.api.sygic.com/js/leaflet.sygic.js
Here's an excerpt from my code, which is pretty much the same as the example in the online documentation:
<link rel="stylesheet" href="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.2.0/leaflet.sygic.css" />
<script src="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.js"></script>
<!-- *** Is there a newer version of the sygic leaflet plugin? ** -->
<script src="https://maps.api.sygic.com/js/leaflet.sygic-1.1.0.js"></script>
...
var map = L.map('mapContainer');
L.TileLayer.sygic('***MY KEY ***',{poi:true,restriction:true}).addTo(map);
L.TileLayer.sygicRestriction('*** MY KEY ****', {categories: ['NoTruck', 'MaxHeight']}).addTo(map);
Any ideas?
I found the updated plugin URL in the examples posted to GitHub:
<script src="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.js"></script>
I want to create a chat module in ionic platform then i got example from here, but this solution looks older and its using ionic 1 , using $scope and and code is written in .js files which is including below mentioned files...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
In my application .ts files are used and different methods for controlling and routing and this code is using different methods. and i'm unable to find example of using strophe.js with ionic 2 and typescript code. can anyone help me? by giving example, link or steps of using strophe.js in ionic 2 such as how to make connection, how to get archived messages, manage presense, get contact list etc.
Is there a way of using Material-UI without having to go through installing all of the dependencies using NodeJS. I would love to use this in an ASP.NET Project but dont know where to begin as per installing dependencies and all of that.
Technically using Material UI without any frontend infrastructure is possible, but it's not recommended.
If you really don't want to use npm and other JS build/bundling tools you can use the UMD distribution of Material UI.
The Getting started (#CDN) page should help.
In short, you can add React, Babel, and Material UI using plain old script tags in your HTML:
<head>
<script
src="https://unpkg.com/react#latest/umd/react.development.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/react-dom#latest/umd/react-dom.development.js"></script>
<script
src="https://unpkg.com/#mui/material#latest/umd/material-ui.development.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/babel-standalone#latest/babel.min.js"
crossorigin="anonymous"
></script>
<!-- Fonts to support Material Design -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
then write your JS in a <script type="text/babel"> tag:
<script type="text/babel">
const {
Button,
ThemeProvider,
createTheme
} = MaterialUI;
const theme = createTheme();
function App() {
return (
<Button>Hello, world</Button>
);
}
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
</script>
<div id="root"></div>
See https://github.com/mui/material-ui/tree/master/examples/cdn for a working example.
This solution is great for prototyping, but not suitable for production apps. The primary reason for this is low performance. Browsers must download the whole library (including the parts you don't use in your application) and Babel must compile your React app on the fly.
A much better approach is to have an ASP.NET API application and a separate frontend application using React and Material UI that is built using JS tools.
it's very easy.. Follow the below steps.
Commit all the existing changes to your source control or backup existing code.
delete or comment twitter bootstrap bundles in bundle config.
using NPN .. install material design lite package.
add all the .css and .js references to bundles.
add new bundles you added to the layout page.
Remember to change all the class that uses twitter bootstrap to material design lite.
useful sources:
Learning Material Design
MDL Website
I am trying to load coffee script inside a sample.coffee file along with the coffee-script.js file and perform some simple operations on the HTML. But i am not able to load the sample.coffee file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="sample.coffee" type="text/coffeescript"></script>
<script src="coffee-script.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Here is the coffeescript code inside sample.coffee
message = "Welcome to Coffeescript"
alert message
I referred the blog http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/
I trying to run this in MVC4 project on .cshtml. So I am running under MS world.
I am not sure if this is possible or not? any insight into this would be greatly appreciated.
I am able to solve this issue by using the CoffeeSharp http://tomlokhorst.github.com/CoffeeSharp/ It gives handler for .coffee files also converts the coffeescript to javascript on the browser.
Also I am able to compile the coffeescript to javascript during the build event itself which solves deployment and performance related issues.
I dont think this will work like you tried it.
You will need something like requirejs and the coffeescript loader
at https://github.com/jrburke/require-cs.
However I would strongly discourage this and rather have it compiled before loading into the browser (require.js is encouraged though). You might find grunt.js helpful for "building" your app before deploying.
That html works fine for me. I used the coffee-script.js found here: https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js and my sample.coffee is:
x = ->
alert("hi")
x()
If you open the Javascript console, do you see any errors?