To illustrate the problem I'm experiencing, I put together a little accordion-menu element based on version 1.0.7 of Polymer's <seed-element> boilerplate. To create your own copy of this element, follow these six steps:
Download the <seed-element> boilerplate linked to above
Open bower.json, replace all instances of "seed-element" with "accordion-menu", and replace the dependencies with this:
"neon-animation": "PolymerElements/neon-animation#1.2.3",
"polymer": "Polymer/polymer#1.4.0"
Rename "seed-element.html" to "accordion-menu.html" and replace its contents with this:
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="../neon-animation/animations/slide-down-animation.html">
<link rel="import" href="../neon-animation/animations/slide-up-animation.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<!--
#demo demo/index.html
-->
<dom-module id="accordion-menu">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
}
/deep/ .accordion-title {
display: block;
padding: 8px;
color: #fff;
}
/deep/ .accordion-title:before {
margin-right: 5px;
}
/deep/ div:not(.iron-selected) .accordion-title {
background-color: #444;
cursor: pointer;
}
/deep/ div:not(.iron-selected) .accordion-title:hover {
background-color: #777;
}
/deep/ div:not(.iron-selected) .accordion-title:before {
content: "\25BA";
}
/deep/ .iron-selected .accordion-title {
background-color: #070;
}
/deep/ .iron-selected .accordion-title:before {
content: "\25BC";
}
/deep/ .accordion-content {
display: none;
}
/deep/ .iron-selected .accordion-content {
display: block;
}
</style>
<iron-selector selected="0"><content></content></iron-selector>
</template>
<script>
Polymer({
is: 'accordion-menu',
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-down-animation',
node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),
},
}
}
},
},
'listeners': {
'iron-deselect': 'onDeselect',
'iron-select': 'onSelect',
},
'behaviors': [
Polymer.NeonAnimationRunnerBehavior,
],
onDeselect: function(e) {
var deselectedItem = e.detail.item;
// this.playAnimation('exit');
},
onSelect: function(e) {
var selectedItem = e.detail.item;
this.playAnimation('entry');
}
});
</script>
</dom-module>
Replace the contents of "demo/index.html" with this:
<!doctype html>
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>accordion-menu Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../accordion-menu.html">
</head>
<body unresolved>
<p>An example of <code><accordion-menu></code>:</p>
<accordion-menu>
<div>
<span class="accordion-title">Section 1</span>
<div class="accordion-content">
<p>Section 1's content</p>
</div>
</div>
<div>
<span class="accordion-title">Section 2</span>
<div class="accordion-content">
<p>Section 2's content</p>
</div>
</div>
<div>
<span class="accordion-title">Section 3</span>
<div class="accordion-content">
<p>Section 3's content</p>
</div>
</div>
<div>
<span class="accordion-title">Section 4</span>
<div class="accordion-content">
<p>Section 4's content</p>
</div>
</div>
</accordion-menu>
</body>
</html>
Run bower install
Use polyserve to see the demo
When you click on any of the section titles, the section shows like it should, but it does not animate. The console has this error message:
Couldnt play ( entry [Object] ). TypeError: Cannot read property 'style' of null
I know the problem is what I have at line 82 of "accordion-menu.html":
node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),
What should I put instead of what I have above?
Since the node changes depending on the selected item, I would do the following.
Remove the
node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected')
from
return {
'entry': {
name: 'slide-down-animation',
node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),
},
}
and change the
onSelect: function(e) {
var selectedItem = e.detail.item;
this.playAnimation('entry');
}
to
onSelect: function(e) {
var selectedItem = e.detail.item;
this.animationConfig.entry.node = selectedItem.querySelector(".accordion-content");
this.playAnimation('entry');
}
Related
I placed a slider in my blogspot using bxslider but now the link (the title of the book) is not working. See phlawdigest.blospost.com to see the actual site. Below are the codes I used.
The Jquery Code is as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
// in millisecond
autoHover: true, // pause on hover
autoControls: true,
captions: false,
});
});
HTML code is as follows:
<div class="image-left">
<div>
<img src="URL link/>
<h2> Book Title One</h2>
<p>some text description</p>
</div>
<div>
<img src="URL link"/>
<h2> Book Title Two</h2>
<p>some text description</p>
</div>
</div>
bxSlider support jquery3.1.1 and you can not give appropriate css properties for your html class...
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
.selected {
color: red;
}
.highlight {
background: yellow;
}
.image-left {
text-align: center;
}
img
{
width: 100%;
height: 320px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
{
text-align: center !important;
}
</style>
</head>
<body>
<div class="image-left">
<div>
<img src="https://images.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2>
Book Title One
</h2>
<p>some text description</p>
</div>
<div>
<img src="https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2> Book Title Two</h2>
<p>some text description</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
touchEnabled: false,
// in millisecond
autoHover: true, // pause on hover
controls: true,
captions: false,
});
});
</script>
</body>
</html>
syntax error:
<img src="URL link/> <------missing last quotation. Was that a typo when proving the demo code, or is it missing on the actual code? Because that would stop it working.
I try implement row-datails in webcomponnet written in polymer 2. For this I use example : https://vaadin.com/components/vaadin-grid/html-examples/grid-row-details-demos#row-details-with-polymer-template
I try show row details in two ways: _onActiveItemChanged end expanded.
When I use it the lines have doubled.
How to show my template?
My code
<link rel="import" href="./bower_components/vaadin-button/vaadin-button.html" />
<link
rel="import"
href="./bower_components/vaadin-text-field/vaadin-text-field.html"
/>
<link
rel="import"
href="./bower_components/vaadin-checkbox/vaadin-checkbox-group.html"
/>
<link
rel="import"
href="./bower_components/vaadin-combo-box/vaadin-combo-box.html"
/>
<link
rel="import"
href="./bower_components/vaadin-checkbox/vaadin-checkbox.html"
/>
<link rel="import" href="./bower_components/vaadin-grid/vaadin-grid.html" />
<link
rel="import"
href="./bower_components/vaadin-grid/vaadin-grid-column.html"
/>
<link
rel="import"
href="./bower_components/paper-checkbox/paper-checkbox.html"
/>
<dom-module id="grid-wraper">
<template>
<style>
:host {
display: block;
}
.details {
padding: 10px;
margin: 10px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
font-size: 20px;
}
img {
width: 80px;
height: 80px;
}
</style>
<div class="card card-scale-anim">
<div class="card-titleBlue">
<iron-icon class="icon-user" icon="account-circle"></iron-icon>
<h2 class="title">Lista użytkowników e-usług</h2>
</div>
<div class="org-users-table">
<vaadin-grid
class="users-grid"
id="grid"
height-by-rows
data-provider="[[_gridDataProvider]]"
style="height: auto"
selected-items="{{_selectedItems}}"
active-item="{{_activeUser}}"
on-active-item-changed="_onActiveItemChanged"
>
<template class="row-details">
<div class="details">
<img src="[[item.picture.large]]" />
<p>Hi! My name is [[item.name]]!</p>
</div>
</template>
<vaadin-grid-column resizable width="100px">
<template>[[item.name]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="100px">
<template class="header"></template>
<template>
<paper-checkbox
aria-label$="Show Details for [[item.name]]"
checked="{{expanded}}"
>Show Details</paper-checkbox
>
</template>
</vaadin-grid-column>
</vaadin-grid>
</div>
</div>
</template>
<script>
class GridWraper extends Polymer.Element {
static get is() {
return "grid-wraper";
}
static get properties() {
return {
dataProvider: { type: Function, notify: true },
};
}
_onActiveItemChanged(e) {
console.log("Active item", e);
this.$$("#grid").expandedItems = [e.detail.value];
}
$$(selector) {
return this.shadowRoot.querySelector(selector);
}
ready() {
super.ready();
Polymer.RenderStatus.afterNextRender(this, function () {});
}
}
window.customElements.define(GridWraper.is, GridWraper);
</script>
</dom-module>
If you want to expand the items on active change (ie. when user clicks on the row), then your _onActiveItemChanged method should use Grid's detailsOpenedItems property like so:
_onActiveItemChanged(e) {
this.$.grid.detailsOpenedItems = [e.detail.value];
}
However, if you want to open the detail with the checkbox, then you would need to bind the checked attribute to detailsOpened:
<paper-checkbox aria-label$="Show Details for [[item.firstName]]" checked="{{detailsOpened}}">Show Details</paper-checkbox>
A small note:
Polymer components bind all elements with id to a $ object, so instead of this.$$("#grid"), you can use this.$.grid (as seen on my code above).
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I ran into a problem with polymer and app-storage when trying to remove an entry.
I'm trying to add a button to the Vaading Grid that will delete the entry on which the button is set.
The only thing is that I cannot seem to make it work, when I click the button, even console.log doesn't work. What am I doing wrong here?
Here is the code:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.form {
display: flex;
flex-direction: column;
}
.form paper-input {
flex: 1;
margin-right: 10px;
}
.form vaadin-date-picker {
flex: 1;
margin-top: 10px;
}
.form paper-button {
margin-top: 10px;
align-self: flex-end;
}
</style>
<div class="card">
<div class="form">
<paper-input label="Sum" value="{{todo.task}}" auto-validate placeholder="Suma" required=true pattern="[0-9]*" error-message="Numbers only"></paper-input>
<vaadin-date-picker label="When" value="{{todo.due}}"></vaadin-date-picker>
<paper-button raised on-tap="_addToDo">Add</paper-button>
</div>
<br>
<vaadin-grid items={{todos}}>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">Sum</template>
<template>{{item.task}}</template>
</vaadin-grid-column>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">When</template>
<template>{{item.due}}</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template>
<div style="display: flex; justify-content: flex-end;">
<button on-tap="_remove">Remove</button>
</div>
</template>
</vaadin-grid-column>
</vaadin-grid>
</div>
<app-localstorage-document key="todos" data="{{todos}}">
</app-localstorage-document>
</template>
<script>
class MyView1 extends Polymer.Element {
static get is() { return 'my-view1'; }
static get properties() {
return {
todo: {
type: Object,
value: () => { return {} }
},
todos: {
type: Array,
value: () => []
}
};
}
_addToDo() {
this.push('todos', this.todo);
this.todo = {};
};
_remove() {
console.log("Clicked!");
};
}
window.customElements.define(MyView1.is, MyView1);
</script>
</dom-module>
So the _addToDo button is working, but not the _remove button. When I open the console, this is empty.
Please let me know what am I doing wrong here. Thank you!
Since button is native HTML Element on-tap will not work.
Change it to polymer element like paper-button or change on-tap to onclick.
I have following html file in my visual studio 2013 project
!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#loginBody {
color: aqua;
}
</style>
<script type='text/javascript'>
$(document).on('pageinit', function () {
//$.support.cors =true,
//$.mobile.allowCrossDomainPages = true;
$('#frmLogin').validate(
{
rules: {
username: {
required: true
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username."
},
password: {
required: "Please enter your password."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form) {
//$("#frmLogin").submit(function (event) {
//event.preventDefault();
var credentials = { username: $("#username").val(), password: $("#password").val() };
$.ajax({
type: "POST",
url: "api/auth", // this url is just a placeholder
cache: false,
data: JSON.stringify(credentials),
contentType: "application/json; charset=utf-8",
success: function(data,status,jqxhr)
{
//validate the response here, set variables... whatever needed
//and if credentials are valid, forward to the next page
if (data.status == "success")
{
var obj = $.parseJSON(data);
localStorage.setItem("acccessToken", obj.accessToken);
alert(obj.accessToken);
$(":mobile-pagecontainer").pagecontainer ("change", "Authorization.html", { role: "page" });
//window.location.href = "http://www.jqueryvalidation.org";
}
else if(data.status== "error")
{
alert("Authentication Invalid.Please try again!");
return false;
}
//or show an error message
},
error: function (jqxhr, status, errorMsg)
{
// server couldn't be reached or other error
alert("jqXHR Status : " + jqxhr.status + " Status: " + status + " Error: " + errorMsg);
}
}, "json");
return false;
}//);
});
});
</script>
<style type="text/css">
label.error
{
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body id="loginBody">
<div data-role="page" id="login">
<div data-role="header">
<h1> Intergraph </h1>
</div>
<div data-role="content">
<form id="frmLogin" method="post" action="api/auth" data-ajax="false">
<div data-role="fieldcontain">
<label for="username">
<em>* </em> Username:
</label>
<input type="text" id="username"
name="username" />
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password:
</label>
<input type="password" id="password"
name="password" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit" id="loginBtn"
data-theme="a">
Login
</button>
</div>
</form>
</div>
<!--<div data-role="page" id="success" data-theme="b">
<div data-role="header">
<h1>Thank You!!!</h1>
</div>
</div>-->
</div>
</body>
</html>
And here is code inside my my.css file
#loginBody
{
background: url('../images/my-generic-curved-background.png') no-repeat fixed center bottom;
background-size:390px 320px; color:blue;
}
#loginContent
{
text-align:center;
margin-top:210px;
color:aquamarine;
}
Now the weird thing is this file is not read or not loaded (I'm not sure and even I don't know how to ascertain that) but when I replace #loginBody selector with * (all) I can see the image in the background of the page is displayed and also blue color in the portion of the page which is not covered by the image (so may be my.css file is getting loaded on the run , I would suppose). So precisely what I mean is that css rules are getting applied on for * (all) selector and other selectors too but not for #loginBody selector, why is that?
All ideas and suggestions will be highly appreciated.
Thanks
You need to override the base styles setup by JQM. The .ui-overlay-a class sets colours that you aren't overriding and you've also placed your my.css before any JQM includes. To override, your my.css must be last in the link includes and you need to use !important.
I would suggest heading to the bottom of the official themes page and look through the overrides for each section. They don't provide information on background images but it will show you what the capabilities are out-of-the-box.
http://demos.jquerymobile.com/1.0rc2/docs/api/themes.html
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page.
I'd also suggest using developer tools to inspect the elements and how JQM is settings styles. In Chrome/FF you right click on an element and select Inspect Element.