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>
Related
I downloaded tooltipsy.min.js from http://tooltipsy.com/ and put it on the same folder as my html file. This is my code which doesn't work at all. Why? Wrapping the jquery code with $(document).ready()didn't help.
<html>
<head>
<style>
.tooltipsy {
padding: 10px;
max-width: 200px;
color: #303030;
background-color: #f5f5b5;
border: 1px solid #deca7e;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript" src="tooltipsy.min.js"></script>
<script type="text/javascript">
$('.hastip').tooltipsy();
</script>
</head>
<body>
<a class="hastip" title="I am the tooltip text">I want a tooltip</a>
</body>
</html>
This seems to work for me:
Had to add the <p> tags to push the body down you you could see the tip.
HTML:
<html>
<head>
<style>
.tooltipsy {
padding: 10px;
max-width: 200px;
color: #303030;
background-color: #f5f5b5;
border: 1px solid #deca7e;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.hastip').tooltipsy();
})
</script>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a class="hastip" title="Show me">Why don't you work</a>
</body>
</html>
Note: I used the non-slim version of jQuery, because it does not appear that this version of tipsy is playing nicely with the 3.x slim version of jQuery. (Using tipsy with the slim jQuery throws the error Uncaught TypeError: b.bind is not a function in console.)
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 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>
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.
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.