I have some problems with binding. I am using Polymer 1.0.
For now I am creating an object with data in attached function.
This example is really simple but doesn't work.
Here is my code:
<dom-module id="photo-block">
<style>
:host {
display: block;
}
</style>
<template>
<div class="photo-wrapper layout horizontal">
<div class="flex relative big">
<iron-image class="placeholder-color fit" src="{{photos.big}}" sizing="cover" preload fade></iron-image>
</div>
<div class="flex layout vertical">
<div class="flex relative">
<iron-image class="placeholder-color fit" src="{{photos.small.0}}" sizing="cover" preload fade></iron-image>
</div>
<div class="flex relative hidden-xs">
<iron-image class="placeholder-color fit" src="{{photos.small.1}}" sizing="cover" preload fade></iron-image>
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'photo-block',
properties: {
photos: Object
},
attached: function() {
this.photos = {
big: '/images/photos/YDXJ0696.jpg',
small: ['/images/photos/YDXJ0804.jpg', '/images/photos/YDXJ0811.jpg']
};
console.log(this.photos);
}
});
</script>
In the console, I get that object, but even binding in doesn't work.. What I have missed?
Binding actually works, the problem are the style/attributes you use on the <iron-image> element.
Try to change the first image element like this:
<iron-image src="{{photos.big}}" preload fade></iron-image>
the images will show up.
If you use the sizing attribute set to "cover", you need to specify an height and a width for you <iron-image> element.
Related
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'm trying to develop a collapsible list based on Google Inbox in Polymer.
I've created a list of polymer-elements, where each element is a paper-material with an iron-collapse inside.
The iron-collapse contains data and a couple of paper-buttons.
I need to show/hide the <iron-collapse> element, when clicking the parent paper-material.
This works really well, but unfortunately that event also fires after clicking a paper-button e.g. Send-Button inside the iron-collapse.
I tried adding event.stopPropagation() to the child's button handler, but the iron-collapse still collapses, when clicking the button.
Any ideas?
Code for parent container:
<paper-material id="papercontainer" elevation="1" class="container padded" animated style="border-radius:4px;">
<div class="container">
<div class="container flex-start-justified">
<div class="flexchild">
<h4 class="smaller-margin">Bill Gates</h4>
<p class="smaller-margin">bill#gates.com</p>
<p class="paper-font-caption smaller-margin">Date received: 01/01/2015</p>
</div>
<p>
<paper-button raised on-click="send">Send</paper-button>
</p>
</div>
<!--Code for iron-collapse (child): -->
<div class="container flex-horizontal">
<iron-collapse id="collapse" class="flexchild">
<div class="flexchild collapse-content" style="margin-top:10px;">
<paper-button>Edit Mail</paper-button>
</div>
</iron-collapse>
</div>
</div>
</paper-material>
Javascript:
Polymer({
is: 'zapytania-result-element2',
toggle: function() {
this.$.collapse.toggle();
},
listeners: {
'tap': 'regularTap'
},
regularTap: function(e) {
console.log('toggle iron-collapse');
if(this.$.collapse.opened) {
this.$.collapse.hide();
this.$.papercontainer.elevation = 1;
} else {
this.$.collapse.show();
this.$.papercontainer.elevation = 5;
}
},
send: function() {
sendMail();
}
}
I have followed the Events Tutorial from
https://www.polymer-project.org/1.0/docs/devguide/events.html
Per my understanding 'tap' makes the whole element listen for the tap event.
After removing that handler and assigning my own on-click event handler to the parent paper-material container and calling e.stopPropagation() at the end of my child's button event it works.
I have core-animated-pages element in my polymer-element:
<link rel="import" href="../public/components/core-animated-pages/core-animated-pages.html">
<polymer-element name="welcom-arrow" attributes="counter">
<template>
<style>
</style>
<core-animated-pages transitions="cross-fade-all" selected="{{welcomPage}}">
<section>
<div class="blueBackground">
<h1>asd</h1>
<h3>asdasdasdn</h3>
<paper-button on-tap="{{Foward}}">
Keep Going
<core-icon icon="forward"></core-icon>
</paper-button>
</div>
</section>
<section>
<div class="blueBackground">
welcom 2
</div>
</section>
</core-animated-pages>
</template>
<script>
Polymer({
welcomPage: 0,
Foward: function() {
this.welcomPage++;
},
Backward: function() {
this.welcomPage--;
}
});
</script>
</polymer-element>
my cross-fade-all transition works perfectly but when I want to change it to a slide effect by swapping the cross-fade-all attribute to slide-from-right the effect is not working. How can I fix this?
You just need to import the transition itself.
<link rel="import" href="../public/components/core-animated-pages/transitions/slide-from-right.html">
And now you can change your transition
<core-animated-pages transitions="slide-from-right" selected="{{welcomPage}}">
The reason why the previous transition worked, is because core-animated-pages already import it.
Hope it helped !
I am building an element with Polymer with this structure:
<template>
<style>
...
</style>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h1"></content>
</div>
<content></content>
</template>
<script>
Polymer({});
</script>
</polymer-element>
I try to set a default value for the src attribute of the <content select="img"> in case its not set deliberately inside the <e-card> element:
...
<script>
Polymer({
srcimg: 'default-picture.png'
});
</script>
...
On browser the value in the script is applied in the <content select="img"> at the Shadow DOM but not in the <img> element inside the <e-card>.
How can I apply the default value for the src attribute in the <img> element?
it might be easier to just go ahead and make your image tag in the element and publish the the src attribute out side your element. then you could set the default path in js and still have the content be user configurable.
<polymer-element name="test-element" attributes="img height width">
<template>
<style>
...
</style>
<div class="card-header" layout horizontal center>
<img src="{{img}}" height="{{height}}" width="{{width}}">
<content select="h1"></content>
</div>
<content></content>
</template>
<script>
Polymer({
ready: function () {
this.img = "default image url";
this.height = "100px";
this.width = "100px"
}
});
</script>
</polymer-element>
I have 5 div's all with the same class name like this:
CSS:
.test:hover{
color:red;
}
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Imagine for a moment these Div's are in different parent div's on the page...
I'm trying to find a way so they all change to color:red if i hover my mouse over any of the 5 rather than just the one in question changing...
I can't wrap them in a parent and give that parent a hover how ever... they are not sharing the same parents in the first place.
Does CSS provide a way to do this or am I going to have to rest to JavaScript?
One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:
function classToggle (evt, find, toggle) {
[].forEach.call(document.querySelectorAll('.' + find), function(a){
a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
});
}
var els = document.querySelectorAll('.test');
for (var i = 0, len = els.length; i<len; i++){
els[i].addEventListener('mouseover', function(e){
classToggle(e, 'test', 'highlight');
});
els[i].addEventListener('mouseout', function(e){
classToggle(e, 'test', 'highlight');
});
}
JS Fiddle demo.
References:
Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
You could use JQuery to pretty easily achieve what you want... copy this to an .html file to test it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$(".test").hover(
function() {
$(".test").css("background-color", "red");
}, function() {
$(".test").css("background-color", "");
}
);
});
</script>
</head>
<body>
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div>
</body>
</html>
It's impossible to select element's parent via CSS nowadays. So also it's impossible to select element by one element and general parent. It's like a tiny proof.
Here is the code:
css:
.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}
html:
<div class="sample"></div>
<div class="container">
<div class="test">1111</div>
</div>
<div class="container">
<div class="test">2222</div>
</div>
<div class="container">
<div class="test">3333</div>
</div>
<div class="container">
<div class="test">4444</div>
</div>
<div class="container">
<div class="test">5555</div>
</div>
Check the demo here: http://jsfiddle.net/eN49z/
Quick answer: it is not possible via CSS-only to achieve the effect that you are looking for, as CSS is unable to travel up the parent, but only down the DOM tree to affect elements.
You can, however, rely on JavaScript to achieve the effect. In my example I have chosen to rely on jQuery. You can use various methods to get all other <div>s with the class test, but it depends on how they are nested - are they nested under parents that are siblings, and the level of nesting and etc.
Here is an example markup of the scenario you have described:
<div>
Parent 1
<div class="test"></div>
</div>
<div>
Parent 2
<div class="test"></div>
</div>
<div>
Parent 3
<div class="test"></div>
</div>
The CSS would be simple. The .hover class (not the :hover state) is added dynamically by jQuery (see below):
.test:hover, .test.hover {
background-color: red;
}
The JS would be something like:
$(function() {
$(".test").hover(function() {
// Find '.test' in all siblings of a specific '.test' parent
$(this).parent().siblings().find(".test").addClass("hover");
}, function() {
// You can refine the criteria of which '.test' should be selected.
$(document).find(".test").removeClass("hover");
});
});
http://jsfiddle.net/teddyrised/fHwFf/