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
Related
I'm trying to make a div that contains text and a link but the div should be clickable.
I know that I can do:
<a href="#link">
<div>
<p> some text</p>
my link
</div>
</a>
but in my case, I need to put a link in the div and when I click on the div I should be redirected to the link in the a tag with this class "btn_link", and the a tag should not be visible
I have tried to do this :
<div class="my_div">
<p> some text</p>
</div>
CSS :
.btn_link a {
background: none !important;
border: none !important;
}
I don't know how to make the button cover the whole div to make it clickable.
NB: I can't change the HTML structure, it's important to do it with CSS.
Could someone tell me what CSS property I can use to achieve this?
Absolutely position the link
.btn_link {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .15);
}
.my_div {
position: relative;
}
<div class="my_div">
<p> some text</p>
</div>
You can do this with some additional Javascript code.
// set an event listener to the div
document
.querySelector(".link_div")
.addEventListener("click", function() {
// calculate the position of the element immediately
// after .btn_link. We cannot get the offsetTop for .btn_link because it is hidden (display:none) so the Y position of immediate next element should be as good as itself.
posY = document.querySelector(".btn_link").nextElementSibling.offsetTop
window.scrollTo(0, posY)
});
.btn_link {
display: none
}
.spacer {
padding-bottom: 120vh;
background: #ececec;
}
<div class="link_div">
<p>some text</p>
<p class="spacer">some space to show how scroll is working .... </p>
<p>some text after the link. The link above is hidden</p>
</div>
Here it is with only HTML and CSS:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--The <div>, like you wanted-->
<div>
<!--This will be the link in the background-->
<a class="hidden-link" href="example.com">
<!--Your text (Wich is a hidden link)-->
<p>Some Text</p>
<!--Your official link-->
My Link
</a>
</div>
</body>
</html>
CSS
.hidden-link{
text-decoration-line: none;
color: black;
}
Output:
Output-Click me to see the image
Both links go to "example.com" except for one is hidden as text, and the other is plainly a link.
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.
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.
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.
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/