Polymer 1.0 mobile web app not looking right - javascript

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">

Related

Centering Image Container between two sections

I have been trying to center an image container between a div and a section. However, when I manipulate the box's margins or the figure, the size of the box changes along with the position of the image container. I want the image container to lie between the section and the box.
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<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>Document</title>
</head>
<body style="height: fit-content;">
<nav class="navbar" role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
<div class="navbar-brand">
<div class="navbar-item">
<img src="assets/Logo.png">
</div>
</div>
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Language
</button>
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Profile
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="box" style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 2%;">
<figure class="image is-96x96" style="margin: auto;">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</body>

Try this approach.
Place absolute positioned circle image inside your relative positioned navbar. Now give bottom: 0 to circle to make sure it remains at the bottom of the nav irrespective of what is its dimensions.
Now give translateY(50%) to move the circle 50% below its height while respecting the bottom: 0. This will make sure that the circle remains at its position.
Implementation:
*{box-sizing: border-box;margin:0;padding:0}
nav{
position: relative;
padding-block: 3rem;
background-color: lightgrey;
}
.circle{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
width: 8rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: seagreen;
}
<nav>
<div class='circle'></div>
</nav>

You should give the image an absolute position while giving the main dive relative position and a certain height where your image is located. In addition, you can add the features you want by giving the left, right and bottom properties to center. I created it as you requested below. I hope it works for you.
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<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>Document</title>
</head>
<body style="height: fit-content;">
<nav class="navbar" role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
<div class="navbar-brand">
<div class="navbar-item">
<img src="assets/Logo.png">
</div>
</div>
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Language
</button>
<button class="button is-primary is-small navbar-end" style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
Profile
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="box" style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 0%; position:relative; height:150px;">
<figure class="image is-96x96" style="margin: auto; position:absolute; left:0; right:0; bottom:-48px">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div style="background-color: #A020F0; color:white">
Hi everyone
</div>
</body>

How to create the instance of custom element on Polymer

I face a problem on creating an instance of Polymer custom element.
I create a custom element using paper-button and paper-toggle-button.
I want to create an instance of it using Javascript(createElement).
However its style is not kept.
I need your help.
button-status.html
<!-- button-status.html -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html">
<dom-module id="button-status">
<template>
<style>
.dname {
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
min-height: 50px;
max-height: 50px;
min-width: 300px;
width: 100%;
height: 50px;
position: relative;
display: block;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
.toggle {
width: 15%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
paper-button {
width: 80%;
height: 100%;
}
paper-toggle-button {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
}
#yourButton {
position: absolute;
top: 100px;
}
</style>
<div class="dname">
<paper-button>
<content></content>
</paper-button>
<div class="toggle">
<paper-toggle-button id="myButton"></paper-toggle-button>
</div>
</div>
</template>
<script>
Polymer({
is: 'button-status',
properties : {
deviceId: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta charset="UTF-8">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="/bower_components/gold-email-input/gold-email-input.html">
<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/cre_components/button-status/button-status.html">
<link rel="import" href="/cre_components/device-add-input/device-add-input.html">
<link rel="stylesheet" type="text/css" href="/css/dashboard.css">
<title>Create new account</title>
</head>
<body>
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span class="title">Test</span>
<a href="help.html">
<paper-button class="help">Button</paper-button>
</a>
</paper-toolbar>
<section>
<div id="statusList">
<button-status device-id = "A01" id="A01">status1</button-status>
<button-status device-id = "A02" id="A02">status2</button-status>
</div>
<div class="edit">
<paper-button raised onclick="dialog.open()">Add</paper-button>
<paper-button raised>Delet</paper-button>
<paper-dialog id="dialog">
<device-add-input></device-add-input>
</paper-dialog>
</div>
</section>
</body>
<script>
var newEl = document.createElement('button-status');
newEl.innerHTML = "status3";
newEl.id = "S03";
var l = document.getElementById('deviceList');
l.appendChild(newEl);
</script>
</html>

I don't know if I understood your question, but this newEl.innerHTML = "status3"; will override all html of your element.
Jsbin with added element working -->
https://jsbin.com/qeyareqemi/1/edit?html,console,output

Ripple effect and shadow not showing on Raised paper-button in Polymer

I'm having trouble showing the ripple effect and the raised shadow on a polymer paper-button (v1.0 of Polymer).
It is showing when I run the demonstration (..bower_components/paper-button/demo/index.html) so all the code must be downloaded. Must be missing either an import or some CSS but cannot spot what is different between the demo page and my site page, or if it is some typo.
My Elements document is
<script src='http://www.polymer-project.org/components/platform/platform.js'></script>
<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"/>
<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"/>
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"/>
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../bower_components/paper-input/paper-input.html"/>
<link rel="import" href="../bower_components/paper-styles/paper-styles.html"/>
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-button-behavior.html" />
<link rel="import" href="../bower_components/paper-behaviors/paper-inky-focus-behavior.html" />
<link rel="import" href="../bower_components/paper-button/paper-button" />
<link rel="import" href="../bower_components/paper-fab/paper-fab.html" />
<link rel="import" href="../bower_components/polymer/polymer.html"/>
My Page HTML is as follows
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GP and Practice search</title> <!-- Scripts -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html" />
<link rel="stylesheet" type="text/css" href="Styles/styles.css" />
<link rel="stylesheet" type="text/css" href="Styles/home.css"/>
<!-- google fonts definitions -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body unresolved class="fullbleed layout vertical">
<dom-module id="page-scafolding">
<template>
<paper-drawer-panel elevation="1">
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
<input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
<paper-material elevation="1">
<div id="Content" >
<span>
<paper-input class="searchBox" label="Search for:" />
</span>
<div style="text-align:center; padding:10px;">
<paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for GP Practice</paper-button>
</div>
</div>
</paper-material>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "page-scafolding",
ready: function () {
this.hideSearch = true;
this.$.searchText.keyup(function (e) {
alert('off to search for something!');
});
},
srchandler: function () {
// search for contents of search box is showing, otherwise show it.
if (!this.hideSearch)
{
alert('off to search for something!');
}
else {
this.hideSearch = !this.hideSearch;
if (!this.hideSearch) {
this.$.searchText.focus();
}
}
},
searchPractice: function () {
alert('clicking practice search');
}
});
</script>
</dom-module>
<page-scafolding />
</body>
</html>
There are two CSS files used by that page
Home.css
#searchText {
width:200px;
border: none;
line-height: 30px;
border-radius: 5px;
background: #3F59B5;
color: #fff;
outline: 0;
}
paper-material {
border-radius: 2px;
height: 100%;
padding: 16px 0px 16px 0px;
width: calc(98.66% - 16px);
margin: 16px;
background: white;
}
#Content
{
padding:16px;
}
paper-button {
display: block;
margin-bottom: 24px;
color: #fff;
background:#4285F4;
padding:5px;
width:175px;
}
paper-button paper-ripple {
color: var(--paper-pink-a200);
}
and
Styles.css
body {
margin:0px;
background:#e0e0e0;
font-family:Roboto;
}
Can anyone please see where I am going wrong.

Knew I'd missed something - the include for the paper-button was missing it's extension - it should read.
<link rel="import" href="../bower_components/paper-button/paper-button.html" />
in addition the css class for the paper-material was also mucking up the display of the ripple - so that has been changed to a class name.
Removed much of the paper-button class as well meaning I now get a nice blue paper-button
.contentContainer {
border-radius: 2px;
height: 100%;
padding: 16px 0px 16px 0px;
width: calc(98.66% - 16px);
margin: 16px;
background: white;
}
#Content
{
padding:16px;
}
paper-button {
color: #fff;
background:#4285F4;
}

ng-click event in OnsenUI does not fire on Android simulator

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.

Image carousel breaks pushing image out of slider when adding href

I added an image carousel to my site and everything worked great until I tried to add a href tag around the img scr link. it pushes the image out of the slider I have put a link to what it looks like below. I did think it was some css pushing it out but after removing all the surrounding tags the image just stayed the same. I need this so i can add a lightbox to the image when clicked.
Link to image of slider
https://dl.dropboxusercontent.com/u/9833562/caratest.png
I couldn't get it to work on JSFiddle so here is a link to download my files
http://jonathanlowe.co.uk/ws/download/carousel_file.zip
<html 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, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>TEST</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chgrid.css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
CSS
<style media="screen">
.containerslide {
width: 90%;
height: auto;
position: relative;
margin: 0 auto;
}
.roundabout-holder {
padding: 0px;
margin: 0 auto;
height: 310px;
width: 100%;
}
.roundabout-moveable-item {
height: 350px;
width: 380px;
cursor: pointer;
display:block;
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
#carousel-descriptions {
list-style:none;
display:block;
width:850px;
padding:0;
}
#carousel-descriptions li {
font-size:24px;
font-weight:bold;
text-align:center;
display:none;
}
#carousel-descriptions li.current {
display:block;
}
#carousel-controls2 {
max-width:920px;
margin:25px auto;
overflow:auto;
}
#carousel-controls2 span {
width:100px;
font-size:14px;
text-align:center;
margin:0 5px;
cursor:pointer;
background:#fff;
}
#carousel-controls {
width: 320px;
margin:25px auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
margin-top: -20px;
}
#carousel-controls span {
height: 13px;
width: 13px;
display:inline-block;
font-size:14px;
text-align:center;
margin:0 5px;
padding:1px;
cursor:pointer;
border:0.5px solid black;
background:#c6c6c6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 6px; /* for old Konqueror browsers */
}
#carousel-controls .current {
background:#000;
color:;
}
#carousel {
margin-bottom:-25px;
}
#carousel img{
padding: 30px;
}
#carousel img:hover {
padding:0px;
}
.prev-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.next-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
}
</style>
</head>
HTML
<body>
<div class="text-inter">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<section class="containerslide">
<div id="carousel">
<a href="#">
<img src="img/mactest.png" alt="" class="slide" style="" />
</a>
<img src="img/mactest.png" height="50px" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
</div>
</section>
<div id="carousel-controls2" >
<span><div class="prev-button" style=""><<</div></span>
<span><div class="next-button" style="">>></div></span>
<div id="carousel-controls" >
<span class="control current"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</div> <!-- col-md-12 End -->
JAVASCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
<!-- Roundabout Script Start -->
<script type="text/javascript">
(function($) {
var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
.roundabout({childSelector:"img",
minOpacity:1,
autoplay:false,
autoplayDuration:50000000,
btnNext: true,
btnPrev: true,
maxZ:380,
minZ:200,
maxScale: 0.99,
responsive:true,
clickToFocus: false,
autoplayPauseOnHover:true })
.on('focus', 'img', function() {
var slideNum = $carousel.roundabout("getChildInFocus");
$descriptions.add($controls).removeClass('current');
$($descriptions.get(slideNum)).addClass('current');
$($controls.get(slideNum)).addClass('current');
});
$controls.on('click dblclick', function() {
var slideNum = -1,
i = 0, len = $controls.length;
for (; i<len; i++) {
if (this === $controls.get(i)) {
slideNum = i;
break;
}
}
if (slideNum >= 0) {
$controls.removeClass('current');
$(this).addClass('current');
$carousel.roundabout('animateToChild', slideNum);
}
});
}(jQuery));
</script>
<script>
$('.next-button').on('click', function() {
$('#carousel').roundabout("animateToNextChild")
});
$('.prev-button').on('click', function() {
$('#carousel').roundabout("animateToPreviousChild")
});
</script> <!-- Roundabout Slider End -->
</body>
</html>

You could use data-attributes and set up your links with jQuery (to avoid having to edit your roundabout.js implementation. JSFiddle DEMO
<img src="http://lorempixel.com/200/200"
class="slide"
data-link="http://www.google.com" />
// this function should be in your page load function
$('.slide').click(function(){
window.open($(this).attr("data-link"), "_blank");
// you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});
// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
cursor: pointer;
}

Categories

Resources