I'm trying to achieve a tab animation such as the one in this example:
http://codepen.io/calendee/pen/IAjoL
<html ng-app="ionicApp">
<head>
....
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
........
</body>
</html>
but if i try this using the includes of the current version 1.0.0 it does not work.
Any clue?
Thanks!
I just stumbled upon this yesterday: http://ionicmaterial.com/ and find it quite cool. Take a look, you may find it useful - ping back if indeed you do.
Related
I've been trying to understand how can I use Angular 5 (or 2 or 4) together with Spring thymeleaf template together. My problem is that Angular 5 runs on CLI and it resolves as it's own project (app folder). But that makes it SPA and to be honest I do not like full SPA applications. In my opinion it makes them slow when huge data is there to be processed.
Instead I want to make multi page applications (which means page refresh and server side rendering). And I want to use some Angular 5 features (for example two way data binding). But how exactly I can achieve that? In Angular 1 (AngularJS) all I had to do was include it's source and done. But how about with Angular 5?
Its not much different from AngularJS. You just need to include compilation of the typescript to javascript in your build using something like frontend-maven-plugin. In your thymeleaf templates you would need to point to your generated js files.
Check out the following:
http://justincalleja.com/2016/04/17/serving-a-webpack-bundle-in-spring-boot/
http://blog.gerardin.info/archives/824
I used Thymeleaf to serve a common header and footer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
</head>
<body>
<header th:replace="header.html :: headerContent">header content</header>
<app-root></app-root>
<footer th:replace="footer.html :: footerContent">footer content</footer>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
I am wondering how Apache Mesos implements the front-end web ui (localhost:port) in which users can track the system's current status and the submitted jobs. Is there any library for this? How does Mesos do this (in C++)?
Well, having a look at the source code reveals what it's using:
<!DOCTYPE html>
<html lang="en" ng-app="mesos">
<head>
...
<link href="/static/css/bootstrap-3.3.6.min.css" rel="stylesheet">
...
</head>
<body>
...
<script src="/static/js/jquery-1.7.1.min.js"></script>
<script src="/static/js/underscore-1.4.3.min.js"></script>
<script src="/static/js/zeroclipboard-1.1.7.js"></script>
<script src="/static/js/angular-1.2.3.min.js"></script>
<script src="/static/js/angular-route-1.2.3.min.js"></script>
<script src="/static/js/ui-bootstrap-tpls-0.9.0.min.js"></script>
...
</body>
</html>
So, it's using
Angular
jQuery
Bootstrap
I am trying to use summernote in my web app, after i followed the steps provided here http://summernote.org/getting-started/#installation
When i test in browser, it only shows the resize handle at the bottom of the editor, toolbars are not loaded at all. I dont know if there is anything outside the steps provided by the sunnernote instructions. Pls help me out cos am stock here, i dont want to use another editor. Thanks for stopping by..
Thanks for reporting. Could you try below link again?
http://summernote.org/getting-started/#installation
Actually I'm creator of summernote. I updated library path with protocol.
If It's still not working, save below contents with index.html and open it with browser again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
PROBLEM SOLVED
I had the bootstrap.js refrenced before jquery.min.js,
all i did was to reference jquery before any other .js file
enter link description here
It helped me but it will help you too
<div class="container pt-2">
<div id="makeMeSummernote">
</div>
<div class="mt-2 text-center">
<button id="btnToggleStyle" class="btn btn-primary">Toggle Corrected Styles</button></div>
I'm trying to embed a Vimeo video using fancyBox 2. I'm able to make the lightbox pop up, but all I get is a spinning loading icon that lasts forever.
I did a bunch of searching on similar Vimeo questions here on StackExchange, but implementing things others suggested has not solved the issue.
I've now even created a fresh test site (plain HTML doc with linked files in local directory), and then used the code listed in the fancyBox documentation section on using Media Helpers (Extended Functionality) line-for-line, but that's not working either. Same loading spinner, stuck forever.
Does anyone have any ideas why this is not working? Testing in both Safari 7 and Chrome. In Safari I get the stuck loading spinner. In Chrome I get an error page within the lightbox that says "The file or directory could not be found."
Here's my code:
<!DOCTYPE HTML>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Add fancyBox media helpers -->
<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>
</body>
All I get with that is a stuck spinner and an error page.
Any help and suggestions are greatly appreciated! Thank you!
Ensure your page has a valid DOCTYPE and most importantly, note that the case seems to impact on whether the video actually gets loaded when the popup is displayed. (You need lowercase 'html' in the doctype declaration)
ie. Using:
<!DOCTYPE html>
<html>
<head>
fixed it for me... This is probably why your example works in jsfiddle.
After updating dartium to 0.4.7.1_r21548 (same for 0.5.0.1_r21823) i am unable to debug anymore. I have written a small test and discovered that the breakpoints are hit if i call the file direct. But if i use a server and call the page (http://localhost:8080/test.html) the dart code works perfectly, but the breakpoints are missed!
I am not debugging with dart-editor. Only dartium is used.
Here is my test:
test.dart
void main() {
print("hallo");
}
test.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="packages/browser/dart.js"></script>
<script type="application/dart" src="test.dart"></script>
</head>
<body>
Hallo
</body>
</html>
This appears to be a bug in the Dart Editor that a bunch of people have run into.
We're currently looking into it.
You can follow the bug about this, here: https://code.google.com/p/dart/issues/detail?id=10215