It seems there is a misunderstanding on how to create a polymer element. In your "my-element" element definition you have a script block inside the template that setup event listener and I am not sure if this is what you really want. It could be because they are copy and paste from some sample code. Anyway I would suggest to take a look at the doc for creating polymer element here: https://www.polymer-project.org/docs/start/creatingelements.html
I also attempted to tweak your code slightly to something that works: http://jsbin.com/fofehuzazize/1/edit On Mon, Sep 8, 2014 at 1:00 AM, <[email protected]> wrote: > Hi there, hoping for help again! > > I am trying to set up a responsive side nave like in the docs > <http://www.polymer-project.org/docs/elements/layout-elements.html#responsive-side-nav>, > but somehow it works only in Firefox, not in Chrome, meaning nothing > happens in Chrome when I click the "menu" icon that is set up to reveal the > drawer panel, it does so in Firefox, however. > My "menu" icon is added as an attribute of a paper-icon-button nested > inside a core-toolbar, a core-scroll-header-panel and a section, which has > the "main" attribute. > > This is my code. > > <polymer-element name="my-element"> > <template> > <style>...</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" selectedindex="0" id="core_menu"> > <core-submenu id="core_submenu" icon="account-balance" > label="Listings"> > <core-item id="core_item" label="Item" horizontal center > layout></core-item> > <core-item id="core_item1" label="Item 1" horizontal > center layout></core-item> > <core-item id="core_item2" label="Item 2" horizontal > center layout></core-item> > <core-item id="core_item3" label="Item 3" horizontal > center layout></core-item> > </core-submenu> > <core-item id="core_item4" icon="flag" label="Current" > horizontal center layout></core-item> > <core-item id="core_item5" icon="link" label="Links" > horizontal center layout></core-item> > <core-item id="core_item6" icon="drive-zip" > label="Cooperation" horizontal center layout></core-item> > </core-menu> > </section> > </core-header-panel> > </section> > <section id="section1" main> > <core-scroll-header-panel headermargin="128" condenses > keepcondensedheader headerheight="192" id="core_scroll_header_panel"> > <core-toolbar id="core_toolbar1" class="tall"> > <paper-icon-button id="navicon" > icon="menu"></paper-icon-button> > <div id="div1" flex></div> > <core-icon-button icon="search" > id="core_icon_button2"></core-icon-button> > <core-icon-button icon="more-vert" > id="core_icon_button3"></core-icon-button> > <div id="div2" class="bottom indent title">Title</div> > </core-toolbar> > </core-scroll-header-panel> > </section> > </core-drawer-panel> > > <script> > document.addEventListener('polymer-ready', function() { > var navicon = document.getElementById('navicon'); > var drawerPanel = document.getElementById('core_drawer_panel'); > navicon.addEventListener('click', function() { > drawerPanel.togglePanel(); > }); > }); > </script> > </template> > > Is this is my style: > <style shim-shadowdom> > :host { > position: absolute; > width: 100%; > height: 100%; > box-sizing: border-box; > } > html,body { > height: 100%; > margin: 0; > background-color:#E5E5E5; > font-family: 'RobotoDraft', sans-serif; > } > #core_drawer_panel { > position: absolute; > top: 0px; > right: 0px; > bottom: 0px; > left: 0px; > width: 100%; > height: 100%; > } > #section { > position: absolute; > top: 0px; > left: 0px; > width: 100%; > height: 100%; > background-color: white; > } > #section1 { > height: 100%; > box-sizing: border-box; > background-color: white; > } > #core_header_panel { > width: 100%; > height: 100%; > position: absolute; > top: 0px; > left: 0px; > } > #core_toolbar { > color: white; > background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177)); > } > #core_toolbar1 { > color: white; > box-shadow: rgb(158, 158, 158) 0px 3px 6px; > background-color: transparent; > } > core-toolbar.tall { > height: 235px; > } > #section2 { > height: 400px; > background-color: white; > } > #core_scroll_header_panel { > width: 100%; > height: 100%; > position: absolute; > top: 0px; > left: 0px; > } > core-scroll-header-panel::shadow #headerBg { > background-image: url( > http://rechtsanwalt-jmueller.de/user_gfx/RAM-DYN-PIC-DEFAULT.jpg); > } > core-scroll-header-panel::shadow #condensedHeaderBg { > background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177)); > } > .content { > padding: 10px 30px; > } > .title { > -webkit-transform-origin: 0px 50%; > transform-origin: 0px 50% 0px; > font-size: 28px; > } > #div3 { > width: 300px; > height: 400px; > } > core-icon-button { > color: rgb(42, 54, 177); > } > paper-icon-button { > color: rgb(42, 54, 177); > } > core-item::shadow core-icon { > color: rgb(86, 119, 252); > } > core-submenu::shadow core-icon { > color: rgb(42, 54, 177); > } > core-menu { > color: rgb(42, 54, 177); > } > </style> > > I must have been missing something, but don't know what... > > Lex > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/78df841b-0ec6-455e-a6ae-2eb09c100fcb%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/78df841b-0ec6-455e-a6ae-2eb09c100fcb%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAGTQkD_%3DcgbqfNPwyLHxc4FxkoAbRApXbZuD0um8xo7n3s9qg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
