I'm porting iOS PhoneGap project to android.
However, ng-click event in OnsenUI does not fire on Android simulator.
Here is an example code.
module.controller('LCtrl', function($scope) {
$scope.login = function() { // doesn't work!!!
// some process...
};
ons.ready(function() {
// works
});
});
<ons-navigator var="loginNavigator">
<ons-page ng-controller="LCtrl" id="loginPage">
<ons-list>
<ons-list-item class="list__item ons-list-item-inner" modifier="tappable" ng-click="login()">
<ons-icon icon="link" size="20px" fixed-width="false"></ons-icon>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
And also, sliding-menu on OnsenUI doesn't work.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width"/>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="css/ext/style.ccs" type="text/css" />
<link rel="stylesheet" href="css/ext/github.css" type="text/css" />
<link rel="stylesheet" href="css/ext/widearea.css" type="text/css" />
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/ext/zepto.js"></script>
<script type="text/javascript" src="js/ext/forcetk.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/ext/mustache.js"></script>
<script type="text/javascript" src="js/ext/marked.js"></script>
<script type="text/javascript" src="js/ext/highlight.pack.js"></script>
<script type="text/javascript" src="js/ext/widearea.js"></script>
<style>
.page--menu-page__background {
background-color: #333;
}
.page--menu-page__content {
color: white;
}
.menu-close,
.menu-close > .toolbar-button {
color: #999;
}
.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
background-color: transparent;
background-image: none !important;
border-color: transparent;
color: #fff;
}
.menu-item {
padding: 0 0 0 20px;
line-height: 52px;
height: 52px;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}
.menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-notification {
display: inline-block;
margin-top: 12px;
font-size: 14px;
height: 16px;
line-height: 16px;
min-width: 16px;
font-weight: 600;
}
.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
border-color: #393939;
background-color: transparent;
background-image: none !important;
color: #ccc;
}
.bottom-menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<ons-sliding-menu
menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="false">
</ons-sliding-menu>
</body>
</html>
I have no idea to solve these problems.
If you have any idea, please tell me how to solve them.
Thanks.
Thanks!!
It's a problem in swipeable=false.
<ons-sliding-menu
menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
But, I couldn't page transition when revealed menu.
For example, page transition doesn't occur when I tapped "Tapped" menu.
<ons-page modifier="menu-page" ng-controller="Tapped">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('tapped.html', {closeMenu: true})">
Tapped
</ons-list-item>
</ons-list>
</ons-page>
Please give me ideas.
Related
I have 3 games in this current code, I got the first 2 to work but the third has been elusive. I would like to have it all run simultaneously but it doesn't have to. The last 2 games are from the same compiler. These are interactive games like crosswords and word searches. Also, I'm new to js, I'm still learning. Here's my code.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<br></br>
<center><p style="font-size:20px">Word Match Game</p></center>
<br></br>
<link rel="stylesheet" href="/s/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/s/mayavocabagjQtest.js"></script>
</head>
<body>
<div id="cardslots">
<div id="draggableBlocks"></div>
<div id="targetArea"></div>
<div id="message">Match!</div>
<div id="successMessage">Success!</div>
</div>
</body>
<br></br>
<br></br>
<center><p style="font-size:20px">Crossword Puzzle</p></center>
<br></br>
<TITLE>Crossword Puzzle</TITLE>
<br></br>
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz {
position: fixed;
transform: scale(1.4);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Crossword Puzzle</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/mayaagcw.js"></script>
<script>
$(function(){
$("#CrosswordCompilerPuz").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",SUBMIT : "",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz"></div>
<center><P><BLOCKQUOTE><A CLASS="PDFURL" HREF="testcwp.pdf">PDF</A></BLOCKQUOTE></center>
<HR>
<SPAN CLASS="CopyTag">Web page created by Crossword Compiler.</SPAN>
</BODY>
<BODY>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz1 {
position: fixed;
transform: scale(1.0);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Wordsearch</TITLE>
</BODY>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/1.js"></script>
<script>
$(function(){ $("#CrosswordCompilerPuz1").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz1"></div>
<HR>
</BODY>
</HTML>
any input is appreciated
Hello I have this working example from the iron-list demo with cakephp:
<?php
use Cake\Routing\Router;
?>
<!doctype html>
<html>
<head>
<title>iron-list and paper-scroll-header-panel demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html">
<style is="custom-style">
paper-scroll-header-panel {
#apply(--layout-fit);
#apply(--layout-vertical);
#apply(--paper-font-common-base);
}
paper-toolbar.tall .title {
font-size: 40px;
margin-left: 60px;
-webkit-transform-origin: left center;
transform-origin: left center;
overflow: visible;
}
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: white;
}
iron-list {
background-color: var(--paper-grey-200, #eee);
padding-bottom: 16px;
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.item:focus {
outline: 0;
border-color: #666;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
#apply(--layout-flex);
#apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar>
<paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
<div class="bottom title">iron-list</div>
</paper-toolbar>
<iron-list items="[[data.user]]" as="item">
<template>
<div>
<div class="item" tabindex="0">
<img class="avatar" src="[[item.image]]">
<div class="pad">
<div class="primary">[[item.email]]</div>
<div class="secondary">[[item.phone]]</div>
<div class="secondary dim">[[item.token]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
};
</script>
</body>
</html>
This is the same example that comes in the demo if iron-list, I just changed some basic stuff to make it work with my cakephp architecture.
Now I want to have all these inside a custom Polymer element. So I did it like this:
<dom-module id="proto-element">
<template>
<style is="custom-style">
paper-scroll-header-panel {
#apply(--layout-fit);
#apply(--layout-vertical);
#apply(--paper-font-common-base);
}
paper-toolbar.tall .title {
font-size: 40px;
margin-left: 60px;
-webkit-transform-origin: left center;
transform-origin: left center;
overflow: visible;
}
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: white;
}
iron-list {
background-color: var(--paper-grey-200, #eee);
padding-bottom: 16px;
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.item:focus {
outline: 0;
border-color: #666;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
#apply(--layout-flex);
#apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
</style>
<iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar>
<paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
<div class="bottom title">iron-list</div>
</paper-toolbar>
<iron-list items="[[data.user]]" as="item">
<template>
<div>
<div class="item" tabindex="0">
<img class="avatar" src="[[item.image]]">
<div class="pad">
<div class="primary">[[item.email]]</div>
<div class="secondary">[[item.phone]]</div>
<div class="secondary dim">[[item.token]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
// register a new element called proto-element
Polymer({
is: "proto-element",
iconForItem: function (item) {
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
}
});
</script>
</dom-module>
Then in my html file I imported the needed polymer elements/files and used the element like this:
<?php
use Cake\Routing\Router;
?>
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html">
<?= $this->element('Polymer/proto-element');?>
</head>
<body unresolved>
<proto-element></proto-element>
</body>
</html>
When I look at the result in my laptop the result is exactly the same. But the problem comes when I open the page from my phone. The first option renders nicely as expected:
But the second option (when I wraped the list inside a custom element) shows the list zoomed out, everything tiny and not usable:
Am I doing something wrong? How can I use this iron-list example inside my custom Polymer element?
Thank you
I found the problem. So simple...
You need to add the meta tags!
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
I am trying to set up a grid view for a widget I'm building with angular matirial.
Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px);
Here is a plunker I have setup.
Plunker
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layot="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layot="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
JS:
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
Right now my content view does not appear at all (width of 0). I think I am missing something with angular material, but what?
Also I added draggable and resizable options from jquery-ui but I dont think that is the problem.
Thanks for the help.
Edit 1:
Just a typo, the plunker is fixed and working, hope it would help someone.
You made a typo.
In the div which has class my-main change layot="column to layout="column". The same mistake is made in the div which has class my-sidebar.
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layout="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layout="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I tried integrate wordpress in ONSEN UI but i dont know where i made a mistake.
I folowed this example
https://www.youtube.com/watch?v=YUpWq9_LeEo
Im trying to create almost same thing but i want to use ONSEN UI
This is my code.
I personaly think somthing wrong with index.js script.
I used INDEX.JS file to genarate feeds from my wordpress site
I'm getting error on line 2 when i delete this atribute ng-app="app" i'm getting error on line 181
ERROR
Uncaught SyntaxError: Unexpected token }
INDEX.JS
function listPost (data) {
var output='<ons-list>';
$.each(data.posts,function(key,val){
output+='<ons-list-item onclick="myNavigator.pushPage("page3.html", { animation : "slide" } )">';
output+='<img src="'+val.thumbnail_images.full.url+'" alt="" width="100%">';
output+='<h1>'+ val.title +'</h1>';
output+='</ons-list-item>';
});
output+='</ons-list>';
$('#postlist').html(output);
}
**INDEX.HTML**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
var module = angular.module('app', ['onsen']);
</script>
<style>
.page--menu-page__content {
background-color: #333;
color: white;
}
.menu-close,
.menu-close > .toolbar-button {
color: #999;
}
.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
background-color: transparent;
background-image: none !important;
border-color: transparent;
color: #fff;
}
ul{
list-style: none;
margin: auto;
padding: 0;
}
.menu-item {
padding: 0 0 0 20px;
line-height: 52px;
height: 52px;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}
.menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-notification {
display: inline-block;
margin-top: 12px;
font-size: 14px;
height: 16px;
line-height: 16px;
min-width: 16px;
font-weight: 600;
}
.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
border-color: #393939;
background-color: transparent;
background-image: none !important;
color: #ccc;
}
.bottom-menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<ons-sliding-menu
above-page="page1.html"
behind-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
</ons-page>
</ons-template>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="right"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></div>
</ons-toolbar>
<!--Listas 2 puslapyje-->
<ons-navigator title="" var="myNavigator">
<ons-page>
<div id="postlist">
</div>
</ons-page>
</ons-navigator>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
<script src="http://kksa.lt/?json=get_recent_posts&callback=listPost" type="text/javascript"></script>
</body>
</html>
The problem you have is how you used the single quote (') and double quote ('') incorrectly. Copy and paste below code to your index.js file, then there will be no more error.
function listPost (data) {
var output='<ons-list>';
$.each(data.posts,function(key,val){
output+='<ons-list-item onclick="myNavigator.pushPage(\'page1.html\', { animation : \'slide\' } )">';
output+='<img src=\"'+val.thumbnail_images.full.url+'\" alt="" width="100%">';
output+='<h1>'+ val.title +'</h1>';
output+='</ons-list-item>';
});
output+='</ons-list>';
$('#postlist').html(output);
}
Tip: If you want to use (') inside ('), please write it as (/'). Same goes for (""), you need to write as (/").
I hope it helps. Good luck.
I'm trying to create a register/login overlay for users although when trying to use the JQuery .toggle() I have no luck. I can't see any obvious issues and any minor tweaks I've made have been unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle(slow);
});
});
</script>
</body>
CSS:
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
Check it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
<style>
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle('slow');
});
});
</script>
</body>
You are calling .toggle() with an undefined variable called slow:
$('.register').toggle(slow);
You need to pass the string "slow":
$('.register').toggle("slow");
And you may need to cancel the default click behaviour and/or change the link's href="" to href="#":
$('#toggle-reg').click(function(e) {
$('.register').toggle("slow");
e.preventDefault();
});
Demo: http://jsfiddle.net/PDaej/1