I'm working in a parallax with Polymer. I read the documentation in the official web site, and put this on my project. But doesnt works.
This is my code:
<dom-module id="ingeview-home">
<template>
<style>
:host {
display: block;
color: var(--text-color-dark);
padding: 20px 10%;
}
parallax-element {
height: 100vh;
}
parallax-element > * {
min-height: 500px;
}
parallax-layers {
min-height: 500px;
}
</style>
<h1>HOME</h1>
<parallax-element>
<parallax-layers>
<div depth="0">
<image src=../images/pincel.png></image>
<div>
</parallax-layers>
<parallax-layers style="z-index: -1;">
<div depth="-0.5">
<image src=../images/raya.png></image>
<div>
<div>
<image src=../images/pincel.png></image>
<div>
</parallax-layers>
<parallax-layers style="z-index: 1;">
<div depth="0.2">
<image src=../images/raya.png></image>
<div>
</parallax-layers>
</parallax-element>
</template>
<script>
class IngeViewHome extends Polymer.Element {
static get is() { return 'ingeview-home'; }
}
window.customElements.define(IngeViewHome.is, IngeViewHome);
</script>
</dom-module>
I'm search by a few hours, but cant find why dont appear anything
If you can explain how it works, I'll be grateful
I have found a couple of the existing Polymer parallax web components are incompatible with Polymer 2.0, so I decided to implement it myself. I found this tutorial to be a good place to good start: https://www.w3schools.com/howto/howto_css_parallax.asp
Hopefully it helps you.
I created a new parallax web component for Polymer 2.0 and published it yesterday: https://www.webcomponents.org/element/watsonlogic-software/watsonlogic-parallax
Please feel free to contribute or let me know if there are any issues (it is my first component).
Related
I have an issue with my create-react-app being deployed on github pages.
In this first picture, it's my deployed app on github pages. The image is supposed to be centered in the middle of the page.
This second picture shows what it looks like when ran on my localhost with npm start.
Here's the code, if anyone could help me figure out how to make the image centered in the deploy, that would be awesome thanks:
In my About.js:
import React from 'react';
import me from '../../photos/portraits/portraits8.jpg';
import './About.css';
const About = () => {
return(
<div>
<figure className="figure center">
<img src={me} alt="" className="about-img"/>
<figcaption className="figcaption bg-color">Hi, my name is Thomas Nguyen, and I’m a freelance photographer based in Morgan Hill, CA. My main focus is automotive photography as well as portrait photography. I'm also a Software Engineer, and this whole website was built with React, Javascript, CSS, and HTML!</figcaption>
</figure>
</div>
);
}
export default About;
In my About.css:
.about-img{
/*max-height: 500px;*/
max-height: 400px;
height: auto\9;
width: auto;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.figure {
display: table;
margin: 0;
}
.figcaption {
display: table-caption;
caption-side: bottom;
padding: 10px;
}
.bg-color{
background-color: rgba(78, 100, 124, .1);
}
The only mystery is how it works in local environment in the first place. Once I copied the code to a brand new HTML file, it didn't work. All styles written in .center class were not applied by the browser, so no content was centered. The reason for this is that you can't apply margins on display: table element. If you check your classes, you'll see that .figure class overrides display: block property of .center class.
Therefore, do it like this:
<style>
.center {
display: flex;
justify-content: center;
}
</style>
<div className="center">
<figure className="figure">
...rest of the code
</figure>
</div>
So, remove .center class from figure tag, and place it on wrapping div. Then change CSS properties of .center class so it can center the figure properly.
I am trying to display a recursive pyramid looking tree diagram but am struggling with the basic css html implementation
my current implementation is here...
https://dbuirep.firebaseapp.com
the goal is to be able to have balanced looking trees even with unbalanced subtrees... is this manageable?
.div1 {
}
.div2 {
display: inline-block;
vertical-align: top;
}
.div3 {
display: inline-block;
}
<div class="div1">
<div class="div2" *ngFor="let node of treeData">
<div class="div3">
{{node.name}}
</div>
<div><app-tree-view [treeData]="node.subnodes"></app-tree-view></div>
</div>
</div>
I suggest you to use FlexLayout from Angular.
This is an independant library that allows you to manage all your position problem with efficiency.
I am building an SPA polymer 1.0 app that looks like this:
<iron-pages attr-for-selected="data-page"
selected="{{page}}">
<div data-page="home">
<paper-header-panel mode="{{mainMode}}">
<profile-toolbar></profile-toolbar>
<div class="content">
<search-menu></search-menu>
</div>
</paper-header-panel>
</div>
<div data-page="search">
<paper-drawer-panel ...>
...
</paper-drawer-panel>
</div>
</iron-pages>
<profile-toolbar> is a custom element that contains a <paper-toolbar>. If I leave out the <paper-header-panel> it works, but there's a padding and the scrolling doesn't work right. So I added a <paper-header-panel>.
The second page also contains a <paper-header-panel> inside the drawer and works correctly, but I can't make the first page display anything if it contains a <paper-header-panel>. What am I missing?
Try adding following css class to divs that are direct parents of your paper-header-panels:
.content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Here is a solution you might try.
Note this open bug that has (apparently) been resolved for all except iOS (Safari).
I understand that the problem is likely related to the core-header-pannel parent not having a height.
Important: The core-header-panel will not display if its parent does not have a height.
This works fine:
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}
</style>
<body unresolved>
<core-header-panel>
<div class="core-header">standard</div>
<div class="content"></div>
</core-header-panel>
</body>
However, when I try to change the core-header-pannel to mode "waterfall-tall", then the header panel does not show.
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>
During the course of my "experiments" I've referenced both https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel and https://www.polymer-project.org/components/core-header-panel/demo.html
After viewing various StackOverflow questions I think that somehow the body is now covering the header-pannel, because I'm no longer explicitly setting the height. FYI, I'm totally new to HTML and web development. Any suggestions would be appreciated.
To be clear, my questions are:
The parent element of the core-header-panel is the body correct?
Am I referencing my <core-header-panel mode = "waterfall-tall"> in my <style> section properly?
How can I get this darn header pannel to appear?
update edit:
OK, I found a solution through experimentation with the demo.html of core-header-panel. It works fine on my local host, ie, the header collapses and expands how I expect it should. However, when I paste into jsbin, then I do not get the collapsing effect that I want.
http://jsbin.com/cufefi/1/edit
I think this is due to the utilization of px in the <style> section, but I'm not sure.
Another question: My imports are relative, so how can jsbin resolve the imports?
second update edit:
The behaviour is the same with or without the imports, which implies to me that the imports are not resolved, and this is why the behaviour is different when compared to the behaviour on my local host.
Here you lost the < body > tag, just before the core-header-panel tag. Could be this the error?
<style shim-shadowdom>
html, body {
height: 100%;
margin: 0;
}
core-header-panel.tall{
height: 100%;
}
</style>
<core-header-panel mode = "waterfall-tall">
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>
I use the following css:
/* style.css */
#someId {
background-color: red;
}
#someId.medium {
width: 300px;
}
#someId.large {
width: 500px;
}
with the html:
<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>
and
<!-- large.html -->
<div id="someId" class="large">hello, world</div>
I know the above works fine on FireFox and Opera, and, it does not work on IE6 (surprise, surprise).
My questions are:
Is the above CSS correct according to the CSS-specifications (and where can I find this specific issue)?
What browsers (on what platform) do & do not support this?
Update:
The IDs are unique per page. I tried to communicate that by having medium.html and large.html but apparently it wasn't obvious enough.
Update 2:
The code example above was just written to illustrate my question. It is not part of production code and it is not meant to be complete. In short, it is just an example to demonstrate a problem with a very specific solution.
quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector.
but as ie6 fail multiple classes it's not that surprising.
w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it's explain in the page I didn't read it all ;) )
if you do not need "#someId" to be an id you can make it to a class ".someId" and then use the other two classes to extend where needed... like this class="someId medium" ect. Try this and see if it will work. Besides it`s a better solution anyway because you can not have two ids with the same name on one page.
.someId {
background-color: red;
}
.medium {
width: 300px;
}
.large {
width: 500px;
}
and then..
<div class="someId medium">hello, world</div>
or
<div class="someId large">hello, world</div>
Should be working! That's odd. Try flipping them over, as in .large#someId.
One thing you could try is being more verbose than you would like to be. Add to the class names like so:
<div id="someId" class="someId-medium">hello, world</div>
or
<div id="someId" class="someId-large">hello, world</div>
and then change your CSS to this:
#someId {
background-color: red;
}
.someId-medium {
width: 300px;
}
.someId-large {
width: 500px;
}
Crikey. I’ve never come across this one before, but you’re totally right. Your code should work as you’re expecting.
I’m pretty sure it’s only IE 6 that’ll have a problem with it.
Like some mentioned above, ID a unique identifier, thus should only be used once in a page. Normally, ID's would be used for major sections in your mark-up like #header, #content #footer, etc... for the rest, just use classes.
As for your text, change the #someId to .someId and then you can use .large or .medium since you can apply multiple classes to an element.
<div class="someId large">hello, world</div>
And your CSS would be
.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }
Also... if the text "Hello, World" is a title, I strongly suggest you use the proper elements (h1, h2, etc...) and tweak their styles rather than create new ones.
Hope this helps!
EDIT: For the comment below, here's a little HTML code that I've just tested out in IE6 and works. It works in FF and Opera as well so I'm assuming it works in Safari and Chrome too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.something { background-color: #ccc; }
.else { color: #090; }
</style>
</head>
<body>
<div class="something">This is just something</div>
<div class="else">This is just else</div>
<div class="something else">This is something else</div>
</body>
</html>
Not sure if dragging a Javascript library into the mix is possible in your application, but a lot of CSS that doesn't work well in IE6 is possible when using jQuery.
However, if you have no other use for a the 24kb jQuery library, it seems a hefty addon for a single CSS-attribute. Maybe you can go with graceful degradation?