I'm using Polymer for a new version on my website. I'm currently experimenting with the hero-transition of the core-animated-pages. Some examples are provided in the core-animated-pages examples and especially this one.
With these examples I've got to understand the examples and I've gotten to this example: jsbin. It's not entirely polished, but it works.
Now, I want to have the card show in this example to be a custom element. Of this custom element I would need the to have two hero-id's, one for the image and one for an album title. I tried simulating it in this example. Here's the code:
album-card custom element
<polymer-element name="album-card">
<template>
<style>
:host{
display: block;
position: relative;
background-color: grey;
width: 200px;
}
.description{
padding: 0px 10px;
color: white;
}
.cube{
width: 200px;
height: 200px;
}
</style>
<div vertical layout>
<div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer("album-card", {});
</script>
</polymer-element>
The main element with where the transition appears
<polymer-element name="my-app">
<template>
<style>
</style>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<section>
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
</section>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
albumTapped: function(){
this.photopage++;
}
});
</script>
</polymer-element>
Now I know this is due to the shadow dom in which the hero-id and hero attributes of the fields are set, thus not being accessible by other elements on the page, but is there a way around this in this particular case?
It's actually not about the shadow dom. the animated goes for hero "1 shadow-dom of depth" and cross-fade any shadow-dom deep. The thing is that your custom album-card was getting all "bindy" before ready callback and trampling stuff. Also, the way you choose the selected album is kinda messed up (at least that's what i figure) so with your code (and i gotta leave office now I'm home having fun editing my answer and striking stuff) i made it work in reverse back and forth as such: your fixed code (updated 2)
I'm sorry i wouldn't fiddle more with it because I really gotta leave. Maybe later i'll comeback and explain it better but at least the "TLDR" answer is here: you shouldn't bind stuff before the ready callback (actually you can but it is specific and should be declared explicitly on the element prototype). i'll probably get back here later(here i am). hope it helps.
ADDENDUM: oh and i didn't noticed at the time (i was in a hurry) you were nesting your element in a section, with custom elements, that's not needed (nor expected by the component in this case).
the full code just for copy/paste easiness:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src='http://www.polymer-project.org/webcomponents.js'></script>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head>
<body>
<!-- your album card element -->
<polymer-element name="album-card" noscript>
<template>
<style>
#thumbAlbum{
display: block;
background-color: grey;
width: 200px;
}
#albumDesc{
padding: 0px 10px;
color: white;
}
#albumCover{
width: 200px;
height: 200px;
}
</style>
<div id="thumbAlbum" vertical layout>
<div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div id="albumDesc" class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
</polymer-element>
<!-- your app alement -->
<polymer-element name="my-app">
<template>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
ready:function(){
},
albumTapped: function(){
this.photopage = this.photopage > 0 ? 0 : 1;
},
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>
Oh, and on an important sidenote: always use the webcomponents.js as platform.js is deprecated and not really friendly to find out problems. plus import the polymer.html.
Actually it seems to work if you just remove album-card element from section element: http://jsbin.com/botoxaneju/1/edit?html,output
I am not really sure why is that, because I am experiencing the same problem.
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
I'm doing some carousel using polymer framework.
But the code I used put images in slides in front of my paper-header. I mean, images in carousel slide well, but when I scroll on my web page, those images are on top of the page, so they are upon my paper-header that I used.
Here is an image of that case and the source code I used for sliding images.
How can I fix it ?
Thanks.
Example of image on front of paper-header
<dom-module id="home-view">
<style>
.leTitreHome {
font-size: 1.5em;
color: blue;
text-align: center;
}
#myslider {
position: static;
width:700px;
height:700px;
}
</style>
<template>
<p class="leTitreHome">Welcome</p>
<hr>
<br>
<div>
<paper-card>
<div class="card-content">
<div id="myslider">
<img src="../images/bg1.jpg" />
<img src="../images/bg2.jpg"/>
<img src="../images/bg3.jpg"/>
<img src="../images/bg4.jpg"/>
</div>
</div>
</paper-card>
</div>
</template>
<script>
Polymer({
is: 'home-view'
});
</script>
<script>
var imgSlider = new SimpleSlider(
document.getElementById('myslider'),
{
transitionProperty: 'opacity',
startValue: 0,
visibleValue: 1,
endValue: 0
});
</script>
</dom-module>
The problem may be related to the CSS property position: static;.
Try changing this property and check the placement of the parent element.
Since I did not find a carousel ready, I'm also developing one:
https://github.com/discovery-tecnologia/dsc-polymer-carousel
I hope I have helped
I use metro-ui-css for my webapp, the look and feel is great. Now I load a word document (with its own style) into a DIV. After word document is loaded, it will override some metro-ui-css style rules, so that the look and feel becomes unexpectedly...
To simplify the problem, I create a demo below. After clicking the button, I want only text below to be blue, not all of them. The question is besides using <iframe>, is it possible to isolate the style definition?
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
I understand you can't modify the html and you must change the function so the div has red text. You can do that by changing in <style>div{color:red;}</style>
function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
Since CSS :scope is experimental and the loaded content is out of control, you could do like this, where you give the outer most body a unique id and use that to get highest possible specificity for your controlled elements.
Also, when target your controlled elements, you need to make sure to use highest specificty possible, so those rules doesn't override the loaded one's, or get overridden by the uncontrolled content rules.
As you see when click the button, its text gets red but not the wrapped elements.
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
#outer-body > .wrapper * {
color: blue
}
#outer-body > .wrapper .other {
color: lime;
margin: 10px 0;
}
#outer-body > #fragment {
margin-top:10px;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="outer-body">
<div class="wrapper">
<p>OUTER CONTENT SHOULD BE BLUE</p>
<div class="other">
Other text target with its class
</div>
</div>
<button onclick="insert()">Load into DIV</button>
<div id="fragment">PLACEHOLDER</div>
</body>
Code sample
http://jsbin.com/vudulonaka/1/edit?html,output
Click the menu button on this JSBin. Notice how the text wraps. I want to:
eliminate the text wrapping and
make the menu items expand their widths to match the width of the text inside.
This might necessitate forcing the menu to expand from right to left since the button is right justified in the toolbar.
How would I do that? Please provide working JSBin code example.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>
<span class="flex"></span>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>This is a long label for the paper menu and button to show</paper-item>
<paper-item>This is another long label for the paper menu and button</paper-item>
<paper-item>This is still yet another long label for the paper menu</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="fit">Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
This isn't exactly perfect but it should give you an idea of the kind of css properties you should change and how to do it: http://jsbin.com/xaladokimu/1/edit?html,output
What changed is the style:
<style>
paper-menu-button{
--paper-menu-button-dropdown:{
max-width: 100%;
right:70vw;
};
}
paper-item{
--paper-item:{
white-space: nowrap;
width: 100%;
};
}
</style>
Basically, you have to add the white-space: nowrap to the items so that their text is displayed in a single line and then play around with the items' width and the dropdown menu's horizontal position and width (trying to change the dropdown's position to fixed or something else could help too)
Then again, you should set this css properties outside of the element in some custom style (unless you want your element to only work on a set position)
I am newbie for polymer. I just tried to add but getting blank screen. Did I missed any script or something?
Head
<script src="bower_components/polymer/polymer.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
body
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main></section>
</core-drawer-panel>
<script>
Polymer({
});
</script>
Actually, this is exactly how it should be.
Look in your inspector and you will see that there is a core-drawer-panel element with two section's. The core-drawer-panel doesn't have any visual and is just a container that holds your sub components.
Basically you need to put something in the sections to see something in the browser :)
Add the following to your code:
<style>
core-drawer-panel /deep/ section {
border:1px solid red;
}
</style>
This will visually highlight the sections.