When I run my code I can only see the STANDARD TEST paper-header-panel.
Everything within paper-drawer-panel seems to be hidden.
If I set the initial paper-header-panel(class=blue) to 1000px, The rest of the content will show.
Is there anything I need to set so the initial paper-header-panel will change it's height automatically based on the content?
Thanks
<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">
<dom-module id="main-component">
<link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
<template>
<paper-header-panel class="blue">
<div class="paper-header">STANDARD TEST</div>
<paper-drawer-panel
id="mainDrawerPanel"
class="main-drawer-panel"
responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]"
drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}"
>
<paper-header-panel class="list-panel" drawer>
<paper-menu class="list" on-iron-activate="_listTap">
<paper-item>1</paper-item>
<paper-item>2</paper-item>
<paper-item>3</paper-item>
<paper-item>4</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel class="content-panel" main>
<paper-toolbar responsive-width="600px">
<paper-icon-button icon="menu" list-toggle></paper-icon-button>
<span class="flex">CHAT PERSON NAME HERE</span>
</paper-toolbar>
<div class="content">MAIN AREA</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-header-panel>
</template>
<script>
Polymer({
is: 'main-component',
_computeListWidth: function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '25%';
},
_listTap: function() {
this.$.mainDrawerPanel.closeDrawer();
}
});
</script>
</dom-module>
:host {
display:block;
}
.paper-header {
height: 60px;
font-size: 20px;
color: var(--text-primary-color);
line-height: 60px;
padding: 0 30px;
}
.blue .paper-header {
background-color: var(--default-primary-color);
}
.list-panel {
background-color: #fafafa;
--paper-header-panel-standard-container: {
border-right: 1px solid #ccc;
};
}
paper-toolbar {
background-color: #42A5F5;
}
.list {
background-color: #FFFFFF;
}
.list paper-item {
height: 80px;
border-bottom: 1px solid #dedede;
background-color: #fafafa;
color: #000000;
}
.main-drawer-panel:not([narrow]) [list-toggle] {
display: none;
}
.content {
height: 3000px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer Demo</title>
<script src="js/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/apps/polymer-demo/components/main-component.html">
<style is="custom-style">
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="fullbleed layout vertical">
<main-component></main-component>
</body>
</html>
Nevermind. I figured out the problem.
The issue was being caused by the HTML DOCTYPE
After removing it. Everything is now working correctly.
Related
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
I have a time input as you can see below
Here label and text are very close and not look well.In order to separate then I gave some padding-top to text but it also moved clock icon down on the right side.
How can I align the text without affecting that clock icon?
Padding added version is below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
.floating-input{
padding-top: 17px;
padding-left: 19px;
}
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events:none;
z-index: 1;
}
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>
On Chrome and Edge(Chromium) you can use the ::-webkit-calendar-picker-indicator pseudo element selector to position the clock icon to counteract the padding.
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events: none;
z-index: 1;
}
input[type="time"].floating-input {
padding-top: 17px;
padding-left: 19px;
}
input[type="time"].floating-input::-webkit-calendar-picker-indicator {
position: relative;
top: -6px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>
Was looking into this issue for more than an hour, need your help guys, nothing I could find on internet. I want that when on mouse over the image changed to text like "home" and on mouse out it would change back to the image. But the webpage has multiple links on nav bar for example - Home/About/Contact...
nav {
font-size: 40px;
}
nav:hover {
content: "home"
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
</nav>
</body>
</html>
You can use nav:hover::after as the selector for the text (i.e. a pseudo-element), with position: absolute and a white background to cover/hide the icon (and position: relative on the nav element itself to make it the anchor for the absolute position)
nav {
font-size: 40px;
position: relative;
}
nav:hover:after {
content: "home";
position: absolute;
top: 0;
left: 0;
background: #fff;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
</nav>
</body>
This is a simpler and cleaner approach to the task: it involves showing and hiding different elements instead to edit an element type and format on runtime:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<span>text</span>
</nav>
</body>
</html>
CSS
nav {
font-size: 40px;
}
nav span {
display: none;
}
nav:hover a {
display: none;
}
nav:hover span {
display: inline-block;
}
https://jsfiddle.net/b2ycwjtu/
by the way... ?
nav { font-size: 40px }
nav span { display: none }
nav:hover span { display:inline }
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<span>HOME</span>
</nav>
</body>
As you can probably tell CSS is the way to go for this, but that being said if you wanted to do it with javascript you could use something like this:
HTML
<html>
<head>
<title>Image/Text Switching</title>
</head>
<div>
<h1>
Image/Text Switching
</h1>
<div>
<div id="container">
<img id="imgToReplace" src="https://via.placeholder.com/150"/>
<div id="textContainer"></div>
</div>
</div>
</div>
</html>
JS
var replacementText = "Home";
var imgElement = document.getElementById('imgToReplace');
var textContent = document.createTextNode(replacementText);
var textContainer = document.getElementById('textContainer');
var container = document.getElementById('container');
container.addEventListener("mouseover", function(){
imgElement.style.display = "none";
textContainer.appendChild(textContent);
});
container.addEventListener("mouseout", function(){
imgElement.style.display = "unset";
textContainer.innerHTML = "";
});
CSS
#container{
border: 1px solid black;
display: inline-block;
min-height: 150px;
min-width: 150px;
}
One caveat with this approach is that the #textContainer element and the #imgToReplace element must be the same height and width. If you do decide to go this route maybe use some js to set the height and width of the created #textContainer element.
The fiddle can be found here.
I tried to create a jQuery function .hover to change the background-color of div by using another class and using hover to addClass and removeClass.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
CSS:
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
Javascript:
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
You haven't included the Jquery library. Include it before your script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
$(document).ready(function() {
$('div').hover(
function() {
$(this).addClass('hltd');
},
function() {
$(this).removeClass('hltd');
}
);
});
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
.hltd {
display: inline;
font-family: Helvetica;
color: black;
background-color: #66FF33;
padding: 20px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
Though, if you are only trying to change the background colour, CSS would be a better option.
use css :hover pseudo-class instead of JS
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
div:hover {
color: black;
background-color: #66FF33;
}
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
Its work for me..
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
It has worked for me, confirm your script referenced correctly. I could suggest to open your inspect element and check the console and view any errors which you may encounter. If you nothing appears, use the browser debugger.
I have used the following online link for jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I've been getting an error while trying to apply a core-animated-pages element, with polymer, to my element.
I've searched the code for errors, missing linking elements, missing imports, styles, and found nothing.
The idea is for a small app that once you click on the login button, shown in a customized login box, it will change the section where the login is to a new one.
Here is my code:
content-page.html
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="components/paper-login-box-master/paper-login-box.html">
<polymer-element name="content-page" attributes="sel user pass">
<template>
<style>
#section {
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)) 0% 0% repeat scroll transparent;
}
#core_animated_pages {
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
background-color: rgb(238, 238, 238);
}
core-pages-animated transitions {
width: 100%;
height: 100%;
}
paper-loginbox {
margin-top: 50px;
}
</style>
<core-animated-pages selected="{{ sel }}" transitions="fade-scale">
<section>
<div layout vertical center ng-controller="LoginController">
<paper-loginbox user="{{ user }}" pass="{{ pass }}" on-login="{{ login }}"></paper-loginbox>
</div>
</section>
<section>
<div center>OLA</div>
</section>
</core-animated-pages>
</template>
<!--
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
-->
<script>
Polymer({
sel: 0,
user: "",
pass: "",
login: function() {
this.fire("login");
},
ngMapping: {
ngSel: {
primitive: 'sel'
},
ngUser: {
primitive: 'user'
},
ngPass: {
primitive: 'pass'
},
ngLogin: {
event: "login"
}
}
});
</script>
</polymer-element>
index.html where I call the element and change the value of the selected
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>RecordStore - A sua loja de albuns preferida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Encomenda de albuns (FictÃcio)" />
<script src="components/webcomponentsjs/webcomponents.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-scroll-header-panel/core-scroll-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/core-icon/core-icon.html">
<link rel="import" href="components/core-icons/social-icons.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="content-page.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
#core_scroll_header_panel {
width: 100%;
height: 100%;
position: absolute;
}
core-toolbar {
background: #800000;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
paper-loginbox {
margin-top: 50px;
}
</style>
</head>
<body unresolved>
<core-scroll-header-panel headermargin="85.33333333333334" keepcondensedheader headerheight="128" id="core_scroll_header_panel" >
<core-toolbar id="core_toolbar" class="medium-tall" layout horizontal>
<div class="bottom">
<core-icon icon="store"></core-icon>
<paper-item disabled>Loja</paper-item>
<!--
<core-icon-button icon="post-github"></core-icon-button>
<paper-tabs id="tabs" selected="all" center horizontal layout class="bottom fit">
<paper-tab name="all" layout horizontal center-center flex inline active>All</paper-tab>
<paper-tab name="favorites" layout horizontal center-center flex inline active>Favorites</paper-tab>
</paper-tabs>
-->
</div>
</core-toolbar>
<content-page ng-polymer ng-sel="coise" ng-user="user" ng-pass="upass" ng-login="onlogin()"></content-page>
</core-scroll-header-panel>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="ng-polymer-elements-master/ng-polymer-elements.min.js"></script>
<script>
angular.module('loginApp', ['ng-polymer-elements'])
.controller('LoginController', ['$scope', function($scope) {
$scope.user = "lala";
$scope.onlogin = function() {
$scope.upass = $scope.user;
$scope.coise = 1;
};
}]);
</script>
</body>
</html>
This is the error I receive:
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost/components/core-selector/core-selector.html:454:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost/components/core-animated-pages/core-animated-pages.html:418:14)
at core-animated-pages.properties.invokeMethod (http://localhost/components/polymer/polymer.js:9355:12)
at core-animated-pages.properties.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:9344:20)
at Object.Observer.report_ (http://localhost/components/polymer/polymer.js:4890:24)
at Object.createObject.check_ (http://localhost/components/polymer/polymer.js:5296:12)
at callback (http://localhost/components/polymer/polymer.js:4788:20)
I see you are importing slide-from-right.html, but you then use transitions="fade-scale" (which is not defined as a core-animated-pages transition). You instead need to import each transition you wish to use, and separate them by spaces in the transitions list:
<link rel="import" href="components/core-animated-pages/transitions/cross-fade.html">,
<link rel="import" href="components/core-animated-pages/transitions/scale-up.html">,
...
<core-animated-pages selected="{{ sel }}" transitions="cross-fade scale-up">