I am trying to use Google's Material desingn.
I have a component below whose path is epimss_design/lib/component/menu/main-menu-form.html; epimss_design is the app's name.
<!DOCTYPE html>
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../../../packages/core_elements/core_icon_button.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/roboto.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/paper_icon_button.html">
<polymer-element name="main-menu-form">
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#core_drawer_panel {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 10px;
}
#section {
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
background-color: rgb(250, 250, 250);
}
#section1 {
height: 100%;
box-sizing: border-box;
background-color: rgb(221, 221, 221);
}
#core_toolbar {
right: 0px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
</style>
<template>
<core-drawer-panel id="core_drawer_panel">
<section id="section" drawer></section>
<section id="section1" main>
<core-toolbar id="core_toolbar">
<core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
<div id="div" flex>Toolbar</div>
</core-toolbar>
</section>
</core-drawer-panel>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
//import 'package:epimss_polymer/.dart';
#CustomTag( 'main-menu-form' )
class MainMenuForm extends PolymerElement
{
MainMenuForm.created() : super.created();
void menuAction()
{
print ( 'Menu tapped' );
}
}
</script>
</polymer-element>
The entry_point epimss_design.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ePIMSS</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<link rel='import' href='packages/epimss_design/component/menu/main-menu-form.html'>
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
<!-- <script src="packages/browser/dart.js"></script> -->
<link rel="stylesheet" href="epimss_design.css">
</head>
<body unresolved>
<main-menu-form></main-menu-form>
</body>
</html>
When I run the application I am consistently getting the following error
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element':
'#packages/epimss_design/component/menu/menu' is not a valid selector. (http://127.0.0.1:8080/epimss_design.html:1509)
Exception caught during observer callback: Error: Failed to execute 'querySelector' on 'Element': '#packages/epimss_design/component/menu/menu' is not a valid selector.
at Error (native)
at core-iconset-svg.Polymer.iconById (http://127.0.0.1:8080/epimss_design.html:1509:59)
at core-iconset-svg.Polymer.cloneIcon (http://127.0.0.1:8080/epimss_design.html:1513:25)
at core-iconset-svg.Polymer.applyIcon (http://127.0.0.1:8080/epimss_design.html:1557:24)
at core-icon.Polymer.updateIcon (http://127.0.0.1:8080/epimss_design.html:1461:17)
at core-icon.g.invokeMethod (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:13320)
at core-icon.g.notifyPropertyChanges (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:11606)
at Object.Observer.report_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:12616)
at Object.createObject.check_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:18105)
at c (http://127.0.0.1:8080/packages/web_components/platform.js:12:5467) (http://127.0.0.1:8080/packages/web_components/platform.js:12)
The last menu in the exception is meaningless to me. I have no clue where it is coming from. I expect the last menu to be main-menu-form, the name of the component. I hope it makes sense to someone.
Thanks
It seems to be caused by this bug https://code.google.com/p/dart/issues/detail?id=19770
see also https://groups.google.com/a/dartlang.org/forum/#!topic/web/Jbiml0hFH40
The transformer seems to have an error in how it handles the src attribute of the img element (in core-icon)
UPDATE
These attributes need special treatment because they are evaluated by the browser before Polymer has a chance to evaluate the binding. The solution provided by Polymer is to bind to the attributes _src and _img instead.
Related
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
I have sidebar having body height 100%. If i use md-select inside md-content, the options are displaying at top of the page.
How do i fix the issue?
body,
body > div {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
}
I have fixed the issue by applying the display: flex to body element,
html, body {
height: 100%;
}
body {
display: flex;
}
Refer This
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
<md-input-container flex >
<label >Type</label>
<md-select ng-model="txtType" style="width:250px;">
<md-option>First</md-option>
<md-option>Second</md-option>
</md-select>
</md-input-container>
</body>
</html>
I'm using dragging by jquery ui and have a strange effect. On start dragging an object it replacing to a new position depend of cursor offset on start dragging. Here example
Can somebody help me? Thank you
Your html should look like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="show_dlg" style="display: block;"><div id="zoomimg"><img src="http://mmyers.cloudaccess.net/accelerometer/images/638/1600/piece/Kane_Gold_6.jpg" class="ui-draggable ui-draggable-handle" style="position: absolute;"></div></div>
</body>
</html>
I have just removed this part:
-webkit-transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); margin-left: -500px; margin-top: -500px; width: 1500px; height: 1500px; max-width: none; left: -179.902038574219px; top: -190.568115234375px;
as this is what was causing the problem
I'm updating my dart polymer app to the latest polymer, core-elements and paper-elements. I was previously using using polymer-elements and in that polymer-layout had a on-polymer-layout event that I was using to help size a canvas element to take the entire size of it's container (see Autosizing canvas inside a polymer grid layout).
I can't find an equivalent int core-elements so I'm back to square one. How do I handle this now?
I'm back to the point where I was before I used the polymer-layout event. I can get the container to size to the full browser width but it's height is the default height of the canvas. If I resize the browser window it works so it is an initialisation problem.
Prior to the polymer-layout event being added I had to use a hack with a timeout. That was really flakey so I'm praying that there is a clean way in the new core-elements that I'm missing.
See also there doesn't seem to be a polymer-layout event
My code
HTML
<link rel="import" href="packages/paper_elements/paper_slider.html">
<polymer-element name="delme-canvas">
<template>
<style>
#top {
background-color: red;
height: 100%;
}
#slider-container {
margin: 10px;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: rgb(238, 238, 238);
}
paper-slider {
width: 150px;
}
canvas {
border: 2px solid black;
}
#canvasContainer {
border: 2px solid blue;
height: 100%;
}
</style>
<section id="top" vertical layout flex>
<section id="section" horizontal layout>
<div id="slider-container" center horizontal layout>
<div id="label">Roundness</div>
<paper-slider id="paper_slider" editable min="0" max="100" step="0.1"></paper-slider>
</div>
<div id="div" flex></div>
</section>
<section id="canvasContainer" flex>
<canvas id="canvas" flex></canvas>
</section>
</section>
</template>
<script type="application/dart" src="delme_canvas.dart">
</script>
</polymer-element>
Dart
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('delme-canvas')
class CanvasViewElement extends PolymerElement {
CanvasElement canvas;
HtmlElement canvasContainer;
CanvasViewElement.created() : super.created();
void _resize() {
if (canvasContainer.clientWidth == 0)
return;
canvas.width = canvasContainer.clientWidth;
canvas.height = canvasContainer.clientHeight;
_redraw();
}
void _redraw() {
final context = canvas.context2D;
context.fillRect(10, 10, 100, 100);
context.stroke();
}
#override
void ready() {
canvas = $['canvas'];
canvasContainer = $['canvasContainer'];
window.onResize.listen((_) {
_resize();
});
_resize();
}
}
index.hml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>delme</title>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="delme_canvas.html">
</head>
<body unresolved fit vertical layout>
<delme-canvas flex></delme-canvas>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
I tried Günter's suggestion of using attached but that didn't work either. However, in the process, I discovered there is a new (since my original code was written) lifecycle event called domReady. This does seem to do the trick.
So the ready method changes to domReady like
#override
void domReady() {
canvas = $['canvas'];
canvasContainer = $['canvasContainer'];
window.onResize.listen((_) {
_resize();
});
_resize();
}
I'm having issues with my website rendering on iOS devices. I have an iframe that wont scroll on iOS devices at all (testing on iOS 5.1.1). Here is the site: http://pixel2html.sitesbycoop.com/fanwu/ I just need help on this one...I've tried to -webkit-overflow-srolling:touch; on every parent element possible. Please help, I'm more than happy to give more info if needed.
I'm using jquery to load the iframe in from a click function into the following code:
Markup of iframe container on main page:
<div class="overlay">
<div class="frame-container"></div>
</div>
Markup of Iframe Template
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fan Wu | Welcome</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/port-set-viewer-styles.css" type="text/css" />
</head>
<body class="port-set">
<div class="row" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
<!--content and more markup -->
</div>
</body>
</html>
CSS
.overlay{
position: fixed;
background: rgba(0,0,0,0.9) url('img/loader.gif') no-repeat center center;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
z-index: 100;
display: none;
}
.frame-container {
width: 100%;
height: 100%;
}
.frame-container iframe {
position: fixed;
top: 0px;
z-index: 1000;
border: none;
transition: opacity 1s;
left: -100%;
height: 100%;
width: 100%;
}
.frame-container iframe.active{
opacity: 1 !important;
left: 0;
}
JS
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".image-box").click(function(e){
/* Store link into variable, href */
var href = jQuery(this).find("a").attr("href");
/* Activate overlay */
jQuery(".overlay, body, .close").addClass("active");
/* Set iframe's src attribute to the stored href */
jQuery(".frame-container").html('<iframe style="opacity: 0;" width="100%" height="100%" src="'+href+'"></iframe>');
/* Animate iframe into view */
jQuery('iframe').load(function(){
jQuery(this).addClass("active");
jQuery(".overlay").addClass("remove-graphic");
});
e.preventDefault();
});
jQuery(".close").click(function(e){
jQuery(".overlay, .frame-container, iframe, body, .close").removeClass("active remove-graphic");
e.preventDefault();
});
jQuery(function(){
jQuery(".image-box").preloader();
});
});