<head>
<!-- Meta / Boilerplate Stuff -->
<meta charset="UTF-8">
<title>Hey</title>
<!-- END Meta / Boilerplate Stuff -->
<!-- LESS + CSS links -->
<link rel="stylesheet/less" type="text/css" href="/resource/css/style.less">
<!-- END LESS + CSS links -->
<!-- Imported JavaScript -->
<script type="text/javascript">
// Dev-environment only LESS debugging object
less = {
env: "development",
dumpLineNumbers: "all"
};
</script>
<script type="text/javascript" href="/resource/js/imports/less.min.js"></script>
<script type="text/javascript" href="/resource/js/imports/jquery.min.js"></script>
<!-- END Imported JavaScript -->
<!-- In-house JavaScript -->
<script type="text/javascript" href="/resource/js/custom.js"></script>
<!-- END In-house JavaScript -->
</head>
Here's my head element, and the URL: http://boilerplate.samstil.es/
My LESS isn't compiling and I can't for the life of me figure out why. I'm not getting any 404's in the console.
LESS doesn't like the space between the -webkit-linear-gradient and the ( in the vertical-gradient and horizontal-gradient mixins. Where you have:
background-image : -webkit-linear-gradient (left, #startColor, #endColor);
you should have
background-image : -webkit-linear-gradient(left, #startColor, #endColor);
Make sure you do this with the other background-image options. I tested this with the online less compiler, available at: http://winless.org/online-less-compiler
Hope this helps!
Related
I am using gulp-inject to inject some css and js files to the dist/index.html which are located at dist/css/*.css and dist/js/*.js
gulp.task('prep-index', function () {
var target = gulp.src('./dist/index.html');
var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false}, {relative: true});
return target.pipe(inject(sources))
.pipe(gulp.dest('./dist/'));
});
Currently it is injecting files from the base url of the project, but I want it to inject files links relative from target file i.e. dist/index.html
from /dist/css/*.css to css/*.css
and from /dist/js/*.js to js/*.js
But its generating like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Directi Task</title>
<!-- inject:css -->
<link rel="stylesheet" href="/dist/css/basscss.min.css">
<link rel="stylesheet" href="/dist/css/style.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/dist/js/jquery.min.js"></script>
<script src="/dist/js/script.min.js"></script>
<!-- endinject -->
</body>
</html>
Any tips on this?
Found the bug, the {relative: true} should be inside the inject() but not within src()
return target.pipe(inject(sources, {relative: true})) fixed the problem.
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
I'm playing around with Polymer 0.4. I'm trying to do a jsonp request using polymer-jsonp component which I've installed using bower.
But it's not working, it looks to me like the polymer-jsonp component is not compatible with Polymer 0.4 and it has been deprecated according to this https://github.com/PolymerLabs/polymer-jsonp/releases/tag/0.3.0
I can see in my network panel that the polymer-jsonp comoponent is being correctly imported but even though it has the "auto" parameter it does not make the request at all. I'm not running it throug any JS code, I'm expecting it to run automatically because of the auto param and to bind it results to the results param value.
May I wait for a compatible version to be released or is there any way to use it or some alternative?
EDIT:
Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
<style>
#drawer {
background-color: #CCC;
}
#main {
background-color: #EBFA6F;
}
#main site-table {
padding: 20px;
}
</style>
</head>
<body unresolved>
<template>
<polymer-jsonp url="http://127.0.0.1/abmonitor-server/Ajax.class.php?callback=" auto response="{{ sitelist }}"></polymer-jsonp>
</template>
<core-drawer-panel>
<div id="drawer" drawer>
<sites-menu></sites-menu>
</div>
<div id="main" main>
<header>
<core-toolbar>Toolbar</core-toolbar>
</header>
<site-table></site-table>
</div>
</core-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Thank you very much.
The jsonp element really should be updated for core, it's just a nuisance that is hasn't been yet. However, I looked at the code, and I believe the old one should work just fine. It's possible you just have a simple problem in your setup.
I can see in the browser console that it is not being imported.
Make sure you have a <link> tag in your application that imports the element. Probably something like:
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html>
Struts jquery anchor tag is not showing in the form
<head>
<sj:head jqueryui="true" jquerytheme="redmond" />
<!--
<link rel="stylesheet" href="css/jquery-ui.css"> -->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<s:form id="form">
........................
..........................
<s:url var="ajaxReport" value="/report.action"/>
<sj:a id="sumbit" formIds="form" buttonText="Sumbit" indicator="indicator"
button="true" buttonIcon="ui-icon-refresh" > Submit</sj:a>
</s:form>
In this only the submit text is displayed. Any idea what might be wrong here?
The <sj:head /> tag already includes the jQuery libraries. Including them again usually causes problems, and the JS console may provide a clue.
I am trying to integrate iTunes preview url (m4a file) using jplayer but running into issues
None of the files from Apple iTunes work. For example:
http://a1.phobos.apple.com/us/r1000/057/Music/fd/8b/40/mzm.staswrxu.aac.p.m4a
However these 2 m4a (non apple) links work:
http://jwdriggs.com/jagspodcast/m4a/%23116.m4a
They do work in iTunes player themselves.
What can I do to make them work? Does it have anything to do with iTunes encoding. It would be great if there is any workaround for this issue.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
/*
* Instance CirclePlayer inside jQuery doc ready
*
* CirclePlayer(jPlayerSelector, media, options)
* jPlayerSelector: String - The css selector of the jPlayer div.
* media: Object - The media object used in jPlayer("setMedia",media).
* options: Object - The jPlayer options.
*
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
*
* The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
* Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
* However, the OGA format would be used in this case with the HTML solution.
*/
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
//m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
m4a: "http://a1549.phobos.apple.com/us/r1000/026/Music/d8/01/eb/mzm.mxkkesne.aac.p.m4a"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li>play</li>
<li>pause</li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul>
</div>
</body>
</html>
Try using SoundManager2 - this library works fine for playing iTunes audio previews.