I am trying to create nested paper-tabs and core-pages. My problem is that after Tab 2 is selected, Page Content 11 or Page Content 12 is left over. How do I hide the unselected "page content", enclosed by div in my case?
index.html:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="my-page.html">
<style>
html,body {
height: 100%;
margin: 0;
font-size:62.5%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-size:3em;
}
</style>
</head>
<body unresolved>
<core-header-panel>
<my-page id="p"></my-page>
</core-header-panel>
<script>
data=[
{
TabCaption:"Tab 1"
,children:[
{
TabCaption:"Tab 11"
,PageContent:"Page Content 11"
,children:null
}
,{
TabCaption:"Tab 12"
,PageContent:"Page Content 12"
,children:null
}
]
}
,{
TabCaption:"Tab 2"
,PageContent:"Page Content 2"
,children:null
}
];
document.querySelector("#p").pages=data;
</script>
</body>
</html>
my-page.html:
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages">
<template repeat if="{{pages}}">
<style>
paper-tabs {
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
color: #F00;
background-color: #00BCD4;
}
core-selected {
background-color: #00FF00;
}
paper-tab {
font-size:1.6em;
}
</style>
<paper-tabs selected="{{selected}}" flex self-end layout>
<template repeat="{{p in pages}}">
<paper-tab>{{p.TabCaption}}</paper-tab>
</template>
</paper-tabs>
<core-pages selected="{{selected}}">
<template repeat="{{p in pages}}">
<div one flex vertical layout>
<template if="{{p.PageContent}}">
{{p.PageContent}}
</template>
<template if="{{p.children}}">
<my-page pages="{{p.children}}"></my-page>
</template>
</div>
</template>
</core-pages>
</template>
<script>
Polymer({
selected:0
});
</script>
</polymer-element>
Thank you in advance for the enlightenment!
Edit:
#JoppeSchwartz:
Thank you for your kind help! I learn a lot from it.
Iceweasel v.35 behaves the same as those screen shots in my original post. Chromium v.40 renders incorrect effects.
After inspecting the elements in the browser debugger, I find that the div enclosing the PageContent is being rendered with zero height. To resolve this, I used the following steps:
In index.html:
Add the fullbleed attribute to the <body> element, per the Polymer layout docs. This tells the body to take up all available space in the viewport.
<body unresolved fullbleed>
Add the vertical layout and flex attributes to the code in the body so that they take up available vertical space:
<core-header-panel vertical layout>
<my-page flex id="p"></my-page>
</core-header-panel>
In my-page.html:
Add the vertical layout attributes to the <my page> component and the flex attribute to the ` element so that it takes up :
<polymer-element name="my-page" attributes="pages" vertical layout>
. . .
<core-pages selected="{{selected}}" flex>
At this point, the <paper-tabs> will be pushed to the right side of the page. This is not what you want, I gather, so remove the self-end attribute:
<paper-tabs selected="{{selected}}" layout>
Finally, although this is not strictly necessary, I noticed that the core-selected selector in your style section should read .core-selected if you want to select the CSS class of that name.
For completeness, here are the edited versions of your code:
index.html
<!doctype html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="my-page.html">
<style>
html,body {
height: 100%;
margin: 0;
font-size:62.5%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-size:3em;
}
</style>
</head>
<body unresolved fullbleed>
<core-header-panel vertical layout>
<my-page flex id="p"></my-page>
</core-header-panel>
<script>
data=[
{
TabCaption:"Tab 1"
,children:[
{
TabCaption:"Tab 11"
,PageContent:"Page Content 11"
,children:null
}
,{
TabCaption:"Tab 12"
,PageContent:"Page Content 12"
,children:null
}
]
}
,{
TabCaption:"Tab 2"
,PageContent:"Page Content 2"
,children:null
}
];
document.querySelector("#p").pages=data;
</script>
</body>
</html>
my-page.html
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages" vertical layout>
<template repeat if="{{pages}}">
<style>
paper-tabs {
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
color: #F00;
background-color: #00BCD4;
}
.core-selected {
background-color: #00FF00;
}
paper-tab {
font-size:1.6em;
}
</style>
<paper-tabs selected="{{selected}}" layout>
<template repeat="{{p in pages}}">
<paper-tab>{{p.TabCaption}}</paper-tab>
</template>
</paper-tabs>
<core-pages selected="{{selected}}" flex>
<template repeat="{{p in pages}}">
<div one flex vertical layout>
<template if="{{p.PageContent}}">
{{p.PageContent}}
</template>
<template if="{{p.children}}">
<my-page pages="{{p.children}}"></my-page>
</template>
</div>
</template>
</core-pages>
</template>
<script>
Polymer({
selected:0
});
</script>
</polymer-element>
Related
I have created a polymer element in the file hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<style>
h1
{
color: green;
font-family: Arial;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
</style>
<h1>Hello World</h1>
</template>
<script>
Polymer ({
is: "hello-world",
});
</script>
</dom-module>
The file that accesses hello-world.html is named index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
<style>
h1
{
color: red;
}
</style>
</head>
<body>
<hello-world></hello-world>
<h1>Hello Arijit</h1>
</body>
</html>
However, when I change the CSS properties in hello-world.html and I refresh index.html in localhost, the changes don't reflect. Is there anything I am missing out?
Polymer elements use style encapsulation to prevent styles from bleeding in and out of elements. With full shadow DOM enabled this is a browser feature, in the shady DOM (default) this is a Polymer feature.
For more details see https://www.polymer-project.org/1.0/docs/devguide/styling.html
This should do what you want:
<dom-module id="hello-world">
<template>
<style>
h1
{
color: var(--hello-world-color, green);
font-family: Arial;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
</style>
<h1>Hello World</h1>
</template>
<script>
Polymer ({
is: "hello-world",
});
</script>
</dom-module>
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
<style is="custom-style">
:root
{
--hello-world-color: red;
}
</style>
</head>
<body>
<hello-world></hello-world>
<h1>Hello Arijit</h1>
</body>
</html>
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'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;
}
I want to add an image carousel to my website which i am building using polymer(https://www.polymer-project.org/). But i am unable to find any core element/paper element with that functionality.
However i found a library that does that (https://github.com/addyosmani/polymer-ui-carousel) but not able to implement it. Please help me to implement image carousel in my polymer website.
The code that i am using is :-
<html class="polymer-ui-full-bleed">
<head>
<title>Just a new app</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/font-roboto/roboto.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/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="post-list.html">
<link rel="import" href="../bower_components/polymer-ui-carousel/polymer-ui-carousel.html">
<link rel="stylesheet" href="../bower_components/polymer-ui-base-css/base.css">
<link rel="stylesheet" href="../bower_components/polymer-ui-carousel/smoke.css">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 80%;
margin: 50px auto;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg" unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
<h1><polymer-ui-carousel></h1>
<h2>With bullet controls</h2>
<polymer-ui-carousel>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</polymer-ui-carousel>
</div>
<!-- main page content will go here -->
</core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
var list = document.querySelector('post-list');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
});
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
</html>
After installing Polymer-ui-carousel(https://github.com/addyosmani/polymer-ui-carousel) i am getting this error.
Exception caught during observer callback: TypeError: Cannot read property 'children' of null
at polymer-ui-carousel.items (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:220:28)
at polymer-ui-carousel.Polymer.valueToSelection (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:278:30)
at polymer-ui-carousel.Polymer.updateSelected (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:255:16)
at polymer-ui-carousel.Polymer.selectedChanged (http://localhost:9000/bower_components/polymer-selector/polymer-selector.html:245:14)
at polymer-ui-carousel.g.invokeMethod (http://localhost:9000/bower_components/polymer/polymer.js:13:25932)
at polymer-ui-carousel.g.notifyPropertyChanges (http://localhost:9000/bower_components/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:9000/bower_components/polymer/polymer.js:12:18266)
at Object.S.check_ (http://localhost:9000/bower_components/polymer/polymer.js:12:22604)
at c (http://localhost:9000/bower_components/polymer/polymer.js:12:12173) polymer.concat.js:4861x.report_ polymer.concat.js:4861S.check_ polymer.concat.js:5264c polymer.concat.js:4757
Import Web Components' polyfill:
<script src="platform.js"></script>
Import Custom Element:
<link rel="import" href="polymer-ui-carousel.html">
Start using it! Simple include your code instaed of
With bullet controls:
<polymer-ui-carousel>
<div>here your code</div>
<div>here your code</div>
<div>here your code</div>
<div>and so on</div>
</polymer-ui-carousel>
With text label controls:
<polymer-ui-carousel labels="true">
<div title="Alpha">here your code</div>
<div title="Beta">here your code</div>
<div title="Gamma">here your code</div>
<div title="Delta">and so on</div>
</polymer-ui-carousel>
Your install will contain a bower folder with a child folder of /bower_components. You will want to type the bower install --save polymer-ui-carousel command while in that directory. You can get around this by adding bower to your Environment Path (depending on your operating system).
Once you type the command in you should see a new child folder in /bower_components that will contain the polymer-ui-carousel.html file.
I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');