Don't know if i'm missing something but i'm trying to use a core-icon that is in the "social" set and it's not showing up. I've tried other sets to. The "home" icon is working. Here's what i've got so far.
EDIT:
My directory structure looks like the following.... the flat structure was way to unorganized for me
root/
/bower_components
/polymer
/bower_components/
*** Components Here ***
End Edit
<!DOCTYPE html>
<head>
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script type="text/javascript" src="bower_components/polymer/bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/polymer/bower_components/core-elements/core-elements.html"/>
<link rel="import" href="bower_components/polymer/bower_components/paper-tabs/paper-tabs.html">
<style>
html, body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
paper-tabs {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
width: 80%;
margin: 50px auto;
}
#media (min-width: 481px) {
paper-tabs {
width: 200px;
}
.container {
width: 400px;
}
}
core-icon-button {
position: absolute;
top: 3px;
right: 3px;
fill: #636363;
}
:host([favorite]) core-icon-button {
fill: #da4336;
}
</style>
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<paper-tabs selected="home" valueattr="name" self-end>
<paper-tab name="home"><core-icon icon="home"></core-icon> Home</paper-tab>
<paper-tab name="about"><core-icon icon="social:person"></core-icon> About</paper-tab>
</paper-tabs>
</core-toolbar>
</core-header-panel>
Thanks in advance :)
Add an import for the social icons:
<link rel="import" href="bower_components/core-icons/iconsets/social-icons.html">
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.
My nav bar is under the slideshow. I want it over but i can't figure out. I tried some absolute and relative positions but it doesn' work. Please find my a solution and if you have time give me a logical explaning.
My html page
<!DOCTYPE>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" type="text/css" href="all.css">
<title>
</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"</script>
<!Daca e IE><script src="http://html5shim.googlecode.com/svn/trunk/htm5.js"></script><!End>
</head>
<body>
<nav>
Logo
Home
Projects
Colections
Philosophy
Contact
Facebook
</nav>
<div class="cycle-slideshow">
<img src="images/233H.jpg" alt="blabla">
<img src="images/233H1.jpg" alt="blabla">
<img src="images/233H2.jpg" alt="blabla">
</div>
</body>
<footer>
</footer>
</html>
My css page
img {
max-width: 100%;
}
.cycle-slideshow {
width: 100%;
max-width: 2000px;
}
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
}
nav a {
display: inline-block;
text-decoration: none;
font-family: verdana;
font-size: 14px;
color: rgb(239,239,239);
margin: 15px 32px 0 32px;
}
nav a:hover {
color: pink;
use z-index property for this
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
z-index:10;
}
use maximum if slider also used
z-index
The nav position is being ignored because it is set to fixed. To solve this add padding to the slideshow that equals the height of the nav.
.cycle-slideshow{
padding-top: 45px;
}
I am using the polymer paper-slider in my application, however, it always stays stuck in the initial position and does not drag on user action. The progress bar is also not visible. It looks like the following at the moment :
I am using the following code for this :
<!doctype html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="components/paper-button/paper-button.html">
<link rel="import" href="components/paper-slider/paper-slider.html">
<style shim-shadowdom>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
paper-slider{
width:800px;
}
core-toolbar {
background: #03a9f4;
color: white;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
.container {
width: 80%;
margin: 50px auto;
}
paper-button[raised].colored {
background: #03a9f4;
color: white;
margin-top: 30px;
text-align: center;
vertical-align: middle;
}
.slider-markers, #sliderBar, #sliderKnob {
-webkit-user-select: none;
-webkit-user-drag: none;
}
paper-slider::shadow #sliderKnobInner
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderKnobInner::before
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<core-header-panel flex mode="normal">
<core-toolbar>
<span flex>Flow</span>
</core-toolbar>
<div class="container" layout vertical center>
<post-card>
<img width="70" height="70"
src="../images/venturimeter.jpg">
<h2>Venturimeter</h2>
<br/>
<div>In order to</div>
<br/><br/>
<paper-slider pin value="50"></paper-slider>
<br/><br/>
</post-card>
<paper-button span raised class="colored" onclick="window.open('Page3.html','_parent');" layout center horizontal>Next</paper-button>
</core-header-panel>
</body>
</html>
What is the mistake I am making here? How do I fix this ?
Thanks !
I have an issue here, I need to bind a paper-tab selection to the core-pages selection inside a core-scaffold.
I have already tried Binding Paper-Tabs to Core-Pages with Polymer and is not working:
tabs.addEventListener('core-select',function()
{
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
Returns an error on the console:
tab is not found! index.html:147
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is the entire code from the page:
<!doctype html>
<html>
<head>
<title>Test Page</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/core-icons/core-icons.html">
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-menu/core-submenu.html">
<link rel="import" href="../components/core-pages/core-pages.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/core-collapse/core-collapse.html">
<link rel="import" href="../components/core-style/core-style.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.container {
width: 100%;
margin: 50px auto;
}
.heading {
padding: 10px 15px;
background-color: #f3f3f3;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 18px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.content {
position: relative;
padding: 15px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height:100vh;
}
#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;
}
#ctabs {
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 unresolved>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-submenu icon="settings" label="Select Level">
<core-submenu icon="settings" label="1">
</core-submenu>
</core-submenu>
</core-menu>
</core-header-panel>
<span tool>Learning Portal V1.0</span>
<div class="content">
<core-toolbar>
<paper-tabs id="ctabs" self-end selected="0">
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages selected="1" id="cpages">
<div>
<paper-button raised style="width: 150px; height: 150px"/>
</div>
<div>
<core-menu>
<core-submenu label="I. Units & Measurement">
<span>Data goes here!</span>
</core-submenu>
</core-menu>
</div>
</core-pages>
</div>
</core-scaffold>
<script>
var tabs = document.querySelector('ctabs');
var pages = document.getElementById('cpages');
if(!tabs)
{
console.log("tab is not found!");
}
if(tabs)
{
console.log("tab is found!");
}
tabs.addEventListener('core-select',function(){
pages.selected = tabs.selected;
console.log("Selected: " + tabs.selected);
});
//function myFunction() {
// console.log("Selected: " + tabs.selected);
//}
</script>
</body>
</html>
I have the latest version installed with the needed files.
Thanks in advance for the help!
This isn't a Polymer issue; your selector is wrong:
var tabs = document.querySelector('ctabs');
Should be
var tabs = document. getElementById('ctabs');
or
var tabs = document.querySelector('#ctabs');