hi I am trying to get an instagram feed onto my website showing my user photos. I have put the javascript at the top of my page as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tomsaxby.com</title>
<!-- CSS ------------------------------------------------------------------------------------------- -->
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- EDITS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/neuzeit/MyFontsWebfontsKit.css" type="text/css" />
<!-- CSS ------------------------------------------------------------------------------------------- -->
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 904401907,
accessToken: '904401907.1677ed0.27d4a579f194430cbe77c28af165aae1'
});
userFeed.run();
</script>
</head>
I have then put a div with he id of "instafeed" into the body of my page. but nothing displays either locally or when i upload my files? Does anyone know why this is?
The most likely cause of your problem, is that instafeed.js is trying to run before your page has been completely loaded.
To resolve this, make sure you have put <div id="instafeed"></div> on your page, and that you are loading instafeed.js after the page has been completely loaded:
$(document).ready(function() {
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: clientId
});
feed.run();
});
One other thing...something the instafeed page does NOT seem to mention...is to add a "limit"...this tells instagram how many images to drop in.. otherwise i suppose the default is zero...
I made mine: limit: '4'
would be a pretty helpful piece of info to put into the instructions!
see below:
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'cool',
clientId: '916c01b8624d43c7b4b76369aruc86a0',
limit: '4'
});
feed.run(); </script>
Your instafeed.js file is not properly being called up.
You have put this:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
The path/to/ before the instafeed.min.js needs to actually be a working path with your website info.
Related
I am trying to add css file dynamically in ejs tempelate.
I know how to include ejs file but not getting how to add css file dynamically.
Code :-
Index.js
router.get('/', function(req, res, next) {
res.render('template', { title: 'abc',page:'index',cssa:'home'});
});
template.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<!-- Here I want to add home.css file -->
</head>
<body>
<!-- including my ejs file -->
<%- include(page) %>
</body>
</html>
I tried :
<link rel="stylesheet" type="text/css" href="/stylesheets/\<%= cssa %>\" >
<% include %><%= cssa %><% .css %>
Goal:
to pass the server side received variable(cssa) in stylesheet source.
Don't need to concat the css path and variable, you can also do it as follows:
<link rel='stylesheet' href='/stylesheets/<%= yourVariableName %>.css' />
Method to include :
<% var css_link = '/stylesheets/' + cssa + '.css'; %>
<link rel="stylesheet" type="text/css" href="<%= css_link %>" >
Credit goes to #SpiRT
Alternatively :
<link rel="stylesheet" type="text/css" href="/stylesheets/<%=cssa%>.css">
I've found it most convenient to inject custom css scripts through an array which can then be processed in the ejs template.
This method would allow you to render any amount of CSS files that are additionally required (example, you have a site that uses 1 standard css across all pages but have 1 or 2 page specific ones which can then be included in the model passed through the ejs renderer to that specific page/route).
In the example it's a given that the css files are in the same folder, however that can be changed to each one's liking:
router side:
router.get( ... {
model = {};
model.Stylesheets = [];
model.Stylesheets.push("stylefile");
res.render("view",{model:model});
});
with the custom stylesheets being pushed though to the view, then the ejs files can be something like:
<%
var customStylesheets = "";
model.Stylesheets.forEach(function(style){
customStylesheets+='<link type="text/css" rel="stylesheet" href="css/'+style+'.css">';
})
%>
<!DOCTYPE html>
<html>
<head>
<title><%= model.title %></title>
<link type="text/css" rel="stylesheet" href="css/standard.css">
<%- customStylesheets %>
...
</head>
use html-webpack-plugin output html page , but in output page lost body inner html element , like <div id="app"></div> , here is my input output and webpack.config file :
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" href="static/pic/logo.png" type="image/x-icon">
<link rel="stylesheet" href="static/weui/weui.min.css">
<link rel="stylesheet" href="static/index.css">
<title>APP</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/vendor.js"></script>
<script src="./dist/app.js"></script>
</body>
</html>
output
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SPA</title>
<link href="/dist/style.df241090c6a9e0a6bf26.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="/dist/vendor.df241090c6a9e0a6bf26.js"></script><script type="text/javascript" src="/dist/app.df241090c6a9e0a6bf26.js"></script></body>
</html>
part webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new htmlWebpackPlugin({
title:'SPA',
filename: 'assets/index.html'
})
],
The filename option is simply used as the output file, it won't read and modify the existing file, if one exists. Because if it did that, every new build would just append to it, unless you cleaned it manually. To use your input as the base, you need to use it as a template.
new htmlWebpackPlugin({
title:'SPA',
filename: 'assets/index.html',
template: 'path/to/template/index.html'
})
The template should not be the same as the output filename, otherwise it gets overwritten. See also Writing Your Own Templates. The template can be a regular HTML file and it will inject the necessary assets.
I'm starting to use Angular Material and a problem occur: I have this simple page, built with Angular Material, with a NavBar but it doesn't appear, and I don't know why.
This is my page:
<html lang="it">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="MyApp" ng-cloak>
<!-- NavBar -->
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<span>{{currentNavItem}}</span>
</md-content>
</div>
<!-- End NavBar -->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
angular.module('MyApp', ['ngMaterial']);
</script>
</body>
The result is a blank page.
Thanks for help!
There are many things you did wrong in this code. First use ng-app at only in body tag. You also tried to use it in div element so remove that.
You defined MyApp two times in your javascript so remove the last definition.
Remove material.svgAssetsCache import since it is not avaliable. and try to use the below code for in your angular javascript file.
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.currentNavItem = 'page1';
});
I have developed single page application using Angular 2, node , express. It is running fine on chrome and firefox. but same is now working on IE 11. Used following code
Giving error to System in script tag. SCRIPT5009: 'System' is undefined
<html class="ng-scope">
<head>
<base href="/"/>
<title>Test application</title>
<!-- 1. Load libraries -->
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.dev.js"></script>
<script src="libs/angular2/bundles/router.dev.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bootstrap')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- End wrapper-->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
</body>
</html>
thanks in advance.
Finally I got the solution using following link.
I have added two javascript reference es6-shim.min.js and shims_for_IE.js
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/systemjs/dist/system-polyfills.js"></script>
<script src="libs/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
https://github.com/angular/angular/issues/7144
Note : In this reference libs = node_modules
Try adding
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>
as first script library
Prettify needs class="prettyprint" to be add to <pre> or <code>. How to let WMD do this?
Take a look at the PageDown Markdown editor...
AFAIK, WMD is dead, but PageDown is a fork based on the WMD source.
It's an active project based on the work done in WMD. That takes care of the Markdown editor. To get syntax highlighting working you'll also need to download source from the Google-Code-Prettify project.
Combine the demo.html, demo.css, prettify.js, prettify.css into the same folder.
Modify the imports accordingly:
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="prettify.css" />
<script src="../Markdown.Converter.js"></script>
<script src="../Markdown.Sanitizer.js"></script>
<script src="../Markdown.Editor.js"></script>
<script src="prettify.js"></script>
Note: This assumes that the PageDown source files are in the parent directory.
To enable syntax highlighting, you'll need to do two things:
Add the 'prettyprint' class to all 'code' elements generated by the editor.
Fire the prettyPrint() event after a change is made.
If you take a look at the code, I modified the non-sanitized converter to do both:
var converter2 = new Markdown.Converter();
converter2.hooks.chain("postConversion", function (text) {
return text.replace(/<pre>/gi, "<pre class=prettyprint>");
});
var editor2 = new Markdown.Editor(converter2, "-second");
editor2.hooks.chain("onPreviewRefresh", function () {
prettyPrint();
});
editor2.run();
To give you an idea of the flexibility. Google-Code-Prettify is the same library that enables syntax highlighting on code.google.com and stackoverflow.com.
It took me a little while to figure out how to get it to work but it's amazing how easy it is to implement. This is only a demo example but it shouldn't be too hard to extend it further.
With the help of jquery and using the timer plugin this can be done in the following way.
<html>
<head>
<title>My Page Title</title>
<link rel="stylesheet" type="text/css" href="wmd/wmd.css" />
<script type="text/javascript" src="wmd/showdown.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wmd-input').keydown(function() {
$(this).stopTime();
$(this).oneTime(1000, function() { styleCode(); });
});
});
function styleCode(){
$("#wmd-preview pre").addClass("prettyprint");
$("#wmd-preview code").html(prettyPrintOne($("#wmd-preview code").html()));
}
</script>
</head>
<body onload="prettyPrint()">
<div style="width:400px;min-height: 500px;">
<div id="wmd-button-bar" class="wmd-panel"></div>
<br/>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<br/>
<div id="wmd-preview" class="wmd-panel"></div>
<br/>
<div id="wmd-output" class="wmd-panel"></div>
</div>
<script type="text/javascript" src="lib/wmd/wmd.js"></script>
</body>
The mechanism of the above is described here
Hope it helps.
You may be interested in the Stack Overflow version of WMD on Github. This version may have the feature you're looking for in it (but I'm not certain).