I use EmberJS 1.0.0 RC3. Those files are based on this tutorial: http://www.youtube.com/watch?feature=player_embedded&v=Ga99hMi7wfY#! (from emberjs.com/guides/).
My index.html is:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="app/Ressources/public/css/normalize-2.1.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-responsive-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/jquery.mobile.structure-1.3.1.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="app/Ressources/public/css/style.css">
</head>
<body>
<script type="text/x-handlebars" >
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Bloggr</a>
<ul class="nav">
<li>Posts</li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="about">
<div class="about">
<p>Test</p>
</div>
</script>
<script src="vendor/jquery/jquery-2.0.0.min.js"></script>
<script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
<script src="vendor/handlebars/handlebars-1.0.0-rc.3.js"></script>
<script src="vendor/ember/ember-1.0.0-rc.3.min.js"></script>
<script src="vendor/ember/ember-data-12.js"></script>
<script src="vendor/bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="vendor/moment/moment-2.0.0.min.js"></script>
<script src="app/main2.js"></script>
</body>
</html>
My main2.js file is:
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
});
When I am in : my_app.local/index.html, it's working fine, I could see my menu. The link in About is my_app.local/index.html#/about so it's correct.
However, when I click on it, I go to my_app_client.local/about and the server cannot find this file (it's correct it doesn't find it, by the way only index.html exist).
In this example, I used WAMP with vhost. I tried with file://My_path_to_my_app/index.html, I could go to index.html#/about but chrome didn't find it.
Could you guess where is my error ?
I just delete this line in index.hmtl:
<script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
and now it's working. I don't know what is the problem of compatibility but it's working this way.
Related
I'm working on Django project with Materializecss design - Built a page with floating button for example.
Why is it not working?
I started using exactly the template from the website: https://materializecss.com/getting-started.html
and updated from the CDN part in the page:
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Thanks a lot!
The full HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After reading some posts, I use a suggestion to add the below, and it worked:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
If someone know to explain the below, it'll be great:
Why the updated version of the files is not working?
What's the right way to install it for production?
The full HTML with the 'ADDED PART THAT MAKE IT WORK':
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
ADDED PART THAT MAKE IT WORK:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
I followed the documentation for off-canvas use and it didn't work at all. F6 Forum returned 403 when I tried to create a post at theri forum :(.
Here is the HTML code I tried:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
Welcome !
</div>
</div>
<!-- Compressed JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is only "Welcome' displayed, no off-canvas. What am I doing wrong here ? Thank you.
Are you sure there is nothing there?
It looks like you are just missing a click handler to open your off canvas content - as per the docs.
Try and adding:
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
within your
<div class="off-canvas-content" data-off-canvas-content>
I have the following question/problem:
I want to "build" a templating system where I can aggregte the page to be shown from a couple of different *.html files. For example I have a layout.html with basic page structure and I want to fill it with content from header.html, content.html and footer.html.
I tried it using the Thymeleaf fragment mechanism but that always failed when it comes to aggregate the head definitions (css, js) from the different input files.
I Also tried the Thymeleaf layout dialect mechanism that aggregates the head definitions correctly but it seems only capable of working with one layout and one content file using the layout:decorate directive. Am I right?
The following code snippets are simple and straighforward ... I just want to include header.html, column1.html, column2.html and footer.html into layout.html as described above. Problem is that I only can include the according content sections using ThymeLeafs replace/fragment mechanism. But how can I process the head and script sections to include them into the layout?
layout.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thyme Fiddling</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/styles/main.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/styles/layout.css}"/>
<script type="text/javascript" th:src="#{/scripts/jquery-3.1.0.js}"></script>
</head>
<body>
<div id="layout">
<div id="headerWrapper">
<div th:replace="~{header :: content}">placeholder for header</div>
</div>
<div id="contentWrapper">
<div id="column1Wrapper">
<div th:replace="~{column1 :: content}">placeholder for column1</div>
</div>
<div id="column2Wrapper">
<div th:replace="~{column2 :: content}">placeholder for column2</div>
</div>
</div>
<div id="footerWrapper">
<div th:replace="~{footer :: content}">placeholder for footer</div>
</div>
</div>
</body>
header.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/header.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Header !!!</div>
</div>
column1.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column1.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column1 !!!</div>
</div>
column2.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column2.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column2 !!!</div>
</div>
footer.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/footer.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Footer !!!</div>
</div>
I am not sure why this basic reveal modal is not working... what am I missing?
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" />
<meta name="author">
<!-- Style Sheets -->
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- HTML% shiv -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<p class="lead">Lorem ipsum lorem.</p>
<p>Lorem ipsum lorem ipsum lorem ipsum.</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
And here are the files:
Your anchor should have the attribute data-open="myModal" or data-toggle="myModal". Your close button should also be data-close.
It appears that you are using the Foundation 5 reveal, it has changed for Foundation 6.
I have reformatted your reveal codeblock below adding the data-open to your open anchor and data-close to the close button and, the reveal block to have class="reveal":
Click Me For A Modal
<div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<a class="close-button" data-close aria-label="Close">×</a>
</div>
Zurb Foundation 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html
I downloaded the Ember.js starter kit from https://github.com/emberjs/starter-kit
I have not edited any of the files. Whether I open the included index.html from file or over a server (SimpleHTTPServer), the h2 "Welcome to Ember.js" does not appear in the browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/ember-template-compiler-1.11.0.js"></script>
<script src="js/libs/ember-1.11.0.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
The ul works perfectly. Why doesn't the h2?
I think this is some regression in Ember 1.11.0. I updated both ember and ember-template-compiler to the latest release and it seems to work. You can get these from here.
Here is a link to this bug reported.