I'm in the middle of a project building a website for a family takeaway, I've managed to get the core design right for what I want. I now have a problem displaying adsense within my website.
I receive a message in console
Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them.
please take a look at the website http://tastygrillbristol.uk
</style>
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer>
<core-header-panel mode="standard" id="core_header_panel">
<core-toolbar id="core_toolbar">
<div id="div">Menu</div>
</core-toolbar>
<section id="section2">
<core-menu selected="0" id="core_menu">
<core-item id="core_item7" icon="home" label="Home" horizontal center layout></core-item>
<core-submenu id="core_submenu" icon="list" label="Online Menu">
<core-item id="core_item" label="Special Offers" horizontal center layout></core-item>
<core-item id="core_item" label="Everything" horizontal center layout></core-item>
<core-item id="core_item" label="Burgers" horizontal center layout></core-item>
<core-item id="core_item1" label="Kebabs" horizontal center layout></core-item>
<core-item id="core_item2" label="Doners" horizontal center layout></core-item>
<core-item id="core_item3" label="Pizzas" horizontal center layout></core-item>
</core-submenu>
<core-item id="core_item4" icon="shopping-cart" label="Deliver to you" horizontal center layout></core-item>
<core-item id="core_item5" icon="perm-phone-msg" label="Call us" horizontal center layout></core-item>
<core-item id="core_item6" icon="file-map" label="Find us" horizontal center layout></core-item>
<core-item id="core_item6" icon="favorite" label="Follow us" horizontal center layout ></core-item>
</core-menu>
</section>
</core-header-panel>
</section>
<section id="section1" main>
<core-scroll-header-panel condenses id="core_scroll_header_panel" headerHeight="256" condensedHeaderHeight="64">
<core-toolbar class="tall" id="core_toolbar1">
<paper-icon-button core-drawer-toggle id="navicon" icon="menu"></paper-icon-button>
<div flex></div>
<div horizontal center-justified layout class="bottom indent title" > <p><b><font color=#FF1744>Tasty Grill</font></b></p> </div>
</core-toolbar>
<div class="content" horizontal layout center>
<post-card1>
<div align="center"><h2 align="center">WELCOME TO OUR WEBSITE, BARE IN MIND WE'RE STILL UNDER CONSTRUCTION</h2><p align="center">Take a look at our online Menu by pressing the Burger <core-icon icon="menu"></core-icon> Button above, or if you know exactly what you want call us now on <p><b>(0117)9522233</b></p></p></div>
</post-card1></div>
<section class="section1" horizontal center-justified layout>
<h1>ADSENSE CODE GOES HERE</h1>
</core-header-panel>
</core-scroll-header-panel>
</section>
</core-drawer-panel>
</template>
Just tested today (2017-05-05) the Ads is working fine within element (Polymer 1), no warnings, following is the sample code:
<paper-card>
<div class="card-content">
<p>my content here</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AutoSize -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-000000000"
data-ad-slot="000000000"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</paper-card>
Related
We currently have an paper tab view with 3 tabs, each tab loads its own iron page. Inside the iron page we pull a list of elements using an API. The iron list successfully loads the api results but we can only view the first few elements.
The other elements are hidden as we are unable to scroll. How do we make the list scrollable? as the list view grows in size. The list is dynamically loaded when a particular tab is selected.
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title"><div class="logo"></div></span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="/" >
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
<iron-icon icon="info"></iron-icon>
<span>Today's sminq</span>
</a>
<a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
<iron-icon icon="mail"></iron-icon>
<span>Upcoming sminq</span>
</a>
<a on-click="logOut">
<iron-icon icon="user"></iron-icon>
<span>Log Out</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="small">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Sminq</div>
</div>
<!-- Application sub title -->
<!--<div class="bottom bottom-container center horizontal layout">-->
<!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
<!--</div>-->
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" >
<live-sminq ></live-sminq>
<!--paper-material elevation="1">
</paper-material>
<paper-material elevation="1">
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
</paper-material-->
</section>
<section data-route="todays-sminq" id="sectiontodays" >
<todays-sminq></todays-sminq>
<!--paper-material elevation="1">
</paper-material-->
</section>
<section data-route="sminq-info">
<sminq-single
token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
status_type="{{params.status}}"
user_mobile ="{{params.mobile}}"
queue_id ="{{params.queueId}}"
sminq_type="{{params.sminqType}}"
joinDate="{{params.date}}"
>
</sminq-single>
</section>
<section data-route="live-tokens"class="layout vertical fit">
<live-tokens
queue_id="{{params.id}}" user_name="{{params.name}}">
</live-tokens>
</section>
<section data-route="upcoming-sminq">
<upcoming-sminq>
</upcoming-sminq>
</section>
<section data-route="not-found">
<paper-material elevation="1">
<h2 class="page-title">Page Not Found</h2>
<p></p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-header-panel>
</paper-drawer-panel>
This is our main index.html we have created separate module which loads the tabs and the list view
The code for this module is attached below
<iron-ajax
id="list"
headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="handleErr"
debounce-duration="300"
last-response="{{ liveQueues }}"
on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
<iron-ajax
id="tokens"
headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="tokenError"
debounce-duration="300"
last-response="{{ queueTokens }}"
on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
<sminq-add queue_id="{{queueId}}"></sminq-add>
</template>
You can implement IronResizableBehavior to resize your list when you switch tabs (note: it should work by default though):
iron-list lays out the items when it receives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');
I am encountering some problems with a custom element created by me, called <little-game></little-game>.
This is <little-game></little-game> template code :
<template>
<a href="{{link}}">
<paper-material elevation="1">
<paper-ripple></paper-ripple>
<iron-image src="{{img_url}}"></iron-image>
<div id="description">{{name}}</div>
<div id="category">{{category}}</div>
</paper-material>
</a></template>
And the :host css of this element:
:host {
display: inline-block;
text-decoration: none;
z-index:1;
}
Those <little-game></little-game> elements are displayed in a page and inside this page i have a <paper-scroll-header-panel> and a <paper-toolbar>. The problem is when i scroll down and the .tall <paper-toolbar> gets smaller, i can click through the <paper-toolbar> on <little-game>/<paper-ripple> element.
<paper-ripple> css :
paper-ripple {
z-index:1;}
mainToolbar html :
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<!--paper-icon-button icon="refresh"></paper-icon-button-->
<paper-icon-button icon="more-vert"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">App title</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center horizontal layout">
<div class="bottom-title paper-font-subhead">App subtitle</div>
</div>
</paper-toolbar>
mainToolbar css :
#mainToolbar {
z-index:3;}
So the main problem is about that i can click the <little-game></little-game> element through the toolbar.
There is an image to understand what i am talking about in a better way:
I think you need to cancel the tap event from propagating through, try adding an on-tap event handler on the paper-toolbar e.g.
<paper-toolbar id="mainToolbar" class="tall" on-tap="{{cancelEvent}}">
then add the function to cancel it
cancelEvent: function(event) {
event.stopPropagation();
}
How to place paper-icon-buttonin right corner of application header ?
Now my icon floats under title and it's not looking good.
Screenshot below
My element Code:
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
Though you can do this using CSS pretty nicely here's a workaround that makes more semantic sense, adding a flex attribute to the <content> element or a <span> tag like I have dont below.
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<span flex></span>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
This <span> tag with the flex attribute takes just the amount of space that it lets the icon fit in the far right.
More about the flex attribute at:
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
https://www.polymer-project.org/0.5/docs/elements/layout-elements.html
You should learn about layout attributes.
Specifically in this case the attribute justified does the job
<div horizontal layout justified tool>
<content select=".title"></content>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</div>
I have this template in my code:
<template is="auto-binding" id="app">
<style>
core-header-panel core-toolbar{
height: 100px;
}
[drawer] div{
padding: 20px;
color: #fff;
}
[drawer] core-toolbar div{
font-size: 24px;
}
[main] div{
padding: 20px;
}
[main] core-toolbar {
background: #A319A3;
color: #fff;
font-size: 24px;
}
.login_dialog {
background: red
}
</style>
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar>
<div>Admin Managment</div>
</core-toolbar>
<div>
<core-menu selected="{{page}}" valueattr="data-category">
<core-submenu data-category="Dashboard" label="Dashboard">
<core-item label="Dashboard 1" horizontal="" center="" layout=""></core-item>
<core-item label="Dashboard 2" horizontal="" center="" layout=""></core-item>
<core-item label="Dashboard 3" horizontal="" center="" layout=""></core-item>
</core-submenu>
<core-submenu data-category="Topics" label="Topics" class="core-selected">
<core-item label="Topic 1" horizontal="" center="" layout=""></core-item>
<core-item label="Topic 2" horizontal="" center="" layout=""></core-item>
</core-submenu>
<core-submenu data-category="Favorites" label="Favorites">
<core-item label="Favorite 1" horizontal="" center="" layout=""></core-item>
<core-item label="Favorite 2" horizontal="" center="" layout=""></core-item>
<core-item label="Favorite 3" horizontal="" center="" layout=""></core-item>
</core-submenu>
</core-menu>
</div>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div>{{page}}</div>
</core-toolbar>
<core-pages selected="{{page}}" valueattr="data-category">
<section data-category="Dashboard">
<div>
Dashboard
<paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
<div>
<h1>Admin Login</h1>
<paper-input class="width100" floatingLabel label="Username"></paper-input>
<paper-input class="width100" floatingLabel label="Password"></paper-input>
<paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
</div>
</paper-action-dialog>
</div>
</section><section data-category="Topics">
<div>Topics</div>
</section>
<section data-category="Favorites">
<div>Favorites</div>
</section>
</core-pages>
</core-header-panel>
</core-drawer-panel>
What is the best way to style this section of code:
<paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
<div>
<h1>Admin Login</h1>
<paper-input class="width100" floatingLabel label="Username"></paper-input>
<paper-input class="width100" floatingLabel label="Password"></paper-input>
<paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
</div>
</paper-action-dialog>
I have tried to give it a class and change it but it doesn't seem to work. I have also looked up in the styling docs but nothing there is working for me.
You need to punch the shadow DOM to propagate down the styles. Something like this selector in the template style should work:
::host /deep/ paper-action-dialog.login_dialog {
...
}
I have followed the polymer demo to create a navigation drawer with a icon to open it on click. The demo only requires one click to open up the navigation drawer, but when I try it with my own code it required double clicks to open up. Any reason why? I have copied the code straight up from the demo. The function openDrawer() looks correct, but opening the drawers a double click. I don't know why it won't open on the first click.
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var pageStart = document.querySelector('#tmp');
pageStart.option = 'home';
});
function openDrawer() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
}
</script>
</body>
I see a few issues.
Because you have everything in an auto-binding template, you need to listen for template-bound instead of polymer-ready. Only when template-bound fires will your elements have been stamped to the DOM.
The other issue is that you're adding your click listener INSIDE your openDrawer method. You want to add the click listener in the template-bound handler.
Here's a jsbin example
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
<core-item>Foo</core-item>
<core-item>Bar</core-item>
<core-item>Baz</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('template-bound', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</body>