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();
}
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 have the following code but this doesn't work. I expect a local html file to be loaded by ajax call it doesnot work as expected. It simply displays 'hello how are you' whilst it should have displayed contents from another html file.
Here is the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<style>
#element_to_pop_up {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.b-close {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
</style>
</head>
<body>
...
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
Hello. wow. How are you?
</div>
...
<script>
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
; (function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function (e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
content: 'iframe', //'ajax', 'iframe' or 'image'
contentContainer: '.content',
loadUrl: '1.html'
});
});
});
})(jQuery);
</script>
</body>
</html>
You do not have a Container with the class name "content".
This should work:
<div id="element_to_pop_up" class="content">
Hello. wow. How are you?
</div>
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.
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();
});
});