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 !
Related
I have created a html page where the header navigation is created on a separate html navigation.html and linked to the index page. While I designed and developed the navigation bar with header tag and run it, its works perfectly and is even totally responsive.
But one I connect the navigation.html to index.html, the header navigation is broken and doesn't work. I tried every fix available and nothings working.
Please Help.
Thanks in advance.
Here's my code.
Here's the css file.
header {
font-family: "Poppins", sans-serif;
display: flex;
background-color: #5459ff;
padding: 1rem 0;
align-items: center;
}
header a {
text-decoration: none;
}
.logo {
margin: 0 0 0 3%;
}
nav {
margin: 0 6% 0 auto;
right: 0;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
color: #fff;
text-decoration: none;
}
.nav_link {
padding: 10px;
color: #fff;
font-size: 14px;
border-radius: 5px;
}
.nav_link:hover {
border-bottom: 1px solid #f9f070;
}
.header_toggle,
.header_close {
display: none;
}
#media screen and (max-width: 768px) {
header {
height: 80px;
justify-content: space-between;
padding: 0 28px;
}
.header_toggle {
display: inline;
font-size: 32px;
color: #f9f070;
}
.header_close {
position: absolute;
right: 24px;
color: #f9f070;
display: block;
font-size: 32px;
border-radius: 50%;
}
.nav {
position: fixed;
top: 0;
right: -100%;
margin-right: 0%;
background-color: #5459ff;
color: #fff;
width: 60%;
height: 100vh;
padding: 24px 0;
z-index: 100;
transition: 0.5s;
}
.nav_list {
display: flex;
flex-direction: column;
margin: 30% 10% 0 0;
}
.nav_item {
margin: 30% 0 0 0;
}
.show {
right: 0;
}
}
.main-page {
display: grid;
width: 100%;
height: 100%;
background-color: #000241;
font-family: "Roboto", sans-serif;
}
.headp {
display: grid;
grid-template-columns: 2fr 2fr;
}
.headp-head {
color: #f9f070;
font-size: 90px;
font-family: "Secular One", cursive;
line-height: 1.1;
margin: 4% auto auto 6%;
}
.head-desc {
color: #f9f070;
font-size: 18px;
font-weight: 600;
font-family: "Roboto", sans-serif;
word-spacing: 4px;
margin: 10px 0 0 50px;
}
.exp-button {
border: 1px solid #f9f070;
border-radius: 10px;
color: #f9f070;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 30px 0 0 50px;
padding: 10px 20px 10px 20px;
cursor: pointer;
transition: all 1s;
}
.headp a:link {
color: #f9f070;
text-decoration: none;
}
.headp a:visited {
color: #f9f070;
text-decoration: none;
}
.headp a:active {
color: #f9f070;
text-decoration: none;
}
.headp a:hover {
color: #f9f070;
}
Index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/css?f[]=nippo#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js">
</script>
<script>
$(function(){
$("#mainnav").load("navigation.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div class="page-container main-page">
<div class="page-wrap">
<div class="cursor"></div>
<div id="mainnav"></div>
<div class="headp">
<div>
<p class="headp-head">Heading</p>
<p class="head-desc">Subheading</p>
</div>
<div id="footer"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js">
</script> f
<script src="js/vendor/modernizr-3.8.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js" type="module">
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
<script src="js/plugins.js">
</script>
<script src="js/main.js">
</script>
</div>
</body>
</html>
navigation.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0" name="viewport">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="./img/logo.svg" style="pointer-events: none;" draggable="false" ondragstart="return false;" alt="logo_main">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close" id="close-menu"></ion-icon>
<ul class="nav_list">
<li class="nav_item">Link1</li>
<li class="nav_item">Link2</li>
<li class="nav_item">Link3</li>
<li class="nav_item">Link4</li>
</ul>
</nav>
<ion-icon name="grid-outline" class="header_toggle" id="toggle-menu"></ion-icon>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
const navMenu = document.getElementById("nav-menu"),
toggleMenu = document.getElementById("toggle-menu"),
closeMenu = document.getElementById("close-menu");
toggleMenu.addEventListener("click", () => {
navMenu.classList.toggle("show");
});
closeMenu.addEventListener("click", () => {
navMenu.classList.remove("show");
});
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.
The error is probably in the css but I included all the code just so you can take a look.
I'll just give all the code and you tell me what's wrong. Thx
I need to write some random words so I can post this.
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100vw;
height: 100vh;
}
#two {
height: 100vh;
width: 100vw;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -316px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
#one {
width: 100%;
}
#two {
width: 100%;
}
First of all vw is not the same as %. Have a look at this explanation:
Difference between Width:100% and width:100vw?
So you have to use % instead of vw and also I would give #fav box-sizing: border-box:
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100%;
height: 100vh;
}
#two {
height: 100vh;
width: 100%;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -302px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
box-sizing: border-box;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
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');
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">