I have a problem regarding onclick="animated.open()". I try to implement the paper-dialog element, and I want the dialog to open after a click on a paper-fab.
<paper-fab icon="create" onclick="animated.open()"></paper-fab>
<paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<h2>Dialog Title</h2>
<p>Some text here</p>
</paper-dialog>
According to the paper-dialog docs this should work, however, it doesn't. By clicking the paper-fab an error pops up in the console:
Uncaught ReferenceError: animated is not defined
My assumption would be that it doesn't work because all of that is inside a custom element. Does anybody know a workaround? I already tried to use addEventListener but this didn't seem to work either.
Thanks a lot in advance,
Stefan
This is because you are not correctly accessing the paper-dialog element. You will need to create a function that is called from the on-click event on the paper-fab element which gets a reference to the paper-dialog element. See here for more information.
For instance:
<paper-fab icon="create" on-click="openDialog"></paper-fab>
then define your function openeDialog:
openDialog: function () {
this.$.animated.open();
}
EDIT Here is a plnkr demoing this.
Related
to visualize my issue, I created the following html structure:
a father div
a children div
Both are with the same attributes: contenteditable="true" tabindex="0".
main.html:
<html>
<div>
<div contenteditable="true" tabindex="0">
firstDivText
<div contenteditable="true" tabindex="0">
secondDivText
</div>
</div>
</div>
</html>
Problem:
Navigating with tabs only (tabindex is 0 so its allowed), I can navigate to father and child with no problem.
When focus (given from tab) is on the father element, I can immediatly start typing to modify its context (contentEditable true).
But when focus is on the child element, I must click it before I can modify the text!
Question:
Why is this happening?
How can I fix it so that which element that is currently on focus will "receive" the key strokes?
Don't want to avoid using contentEditable nor to use jquery :S
You better use inputs and avoid content editable you can style it to look the same.
.myInput{
background:rgba(0,0,0,0);
border:none;
}
edit:
if you really must you can fire click event on focus
$(".Mycontenteditable").focus(function(){
$(this).click();
});
I am using something like this:
<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
<sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
<sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
<sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>
</neon-animated-pages>
That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.
for exmaple inside I have something like this:
dom-module id="sys-neonpage1">
<template>
<sys-elemento class="prueba"></sys-elemento>
</template>
And the element has his own animations that never started if i use it inside ...
is that posible?, thanks a lot.
What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes
In general, i recommend you read the whole "using neon-animations" guide as it is well written.
Using Polymer 1 I'm trying to figure out a way to dinamically switch pages inside a paper-dialog and inside each page to have a paper-dialog-scrollable element.
Here's the short version of what I'm trying to do:
<paper-dialog with-backdrop>
<iron-pages selected="0">
<div>
<paper-dialog-scrollable>
Long content 1 goes in here...
</paper-dialog-scrollable>
</div>
<div>
<paper-dialog-scrollable>
Long content 2 goes in here...
</paper-dialog-scrollable>
</div>
</iron-pages>
</paper-dialog>
The issue is that the paper-dialog-scrollable, when the window is resized, goes over the paper-dialog edges and no scrollbars get shown.
I've looked a the code for paper-dialog-scrollable and it has a "dialogElement" property that is by default "this.parentNode". I've also tried to change that from the code with each page change but I cannot get it to work. Here's the "code":
this.querySelector('iron-pages').selectedItem.querySelector('paper-dialog-scrollable').dialogElement = this.querySelector('paper-dialog');
The last attempt I made was to trigger the refit and notifyResize on the dialog just under the above snippet of code, using the following:
this.querySelector('paper-dialog').notifyResize();
this.querySelector('paper-dialog').refit();
Maybe someone has ran into this issue and found a solution to this!?
Any hints or ideas would be appreciated!
I should have specified that this is a polymer question and not native HTML.
I have a template like this
<template>
<a href="{{ href }}">
<content></content>
</a>
</template>
When I hover over the custom element my cursor iscursor:text and not cursor:pointer, this is an easy fix to apply cursor pointer, but I feel as if those kind of properties should be inherited. Is there any way to apply the content and inherit the a properties properly?
Example on jsfiddle here
Update: 1
An even bigger issue with this is that you can't right-click and select copy-link either.
Update: 2
I kind of think I get it now, <content> isn't being passed a height or width, so the outer most element (the custom one) is height 0, width 0. So the anchor has no room to expand. Hence the cursor isn't switching.
tried, no luck
::content * {
width:inherit;
height:inherit;
}
Update 3
This kinda worked.
I had to give the anchor a id=anchor and use jQuery.
$(this.$.anchor).append($(this).html());
This won't import font-awesome icons for some reason, where does.
Perhaps it's because it's not importing over the styles when I grab the HTML?
There's no error in the console either.
I dropped the to font-awesome within the polymer template and it worked, which is kind of crappy. Need a better solution.
This is a bug with Chrome's current implementation of Shadow DOM that will be fixed in Chrome 37.
You have nothing to make a link out of; you're "linkifying" an empty block.
If you give <content> some innards, you'll see the inherited style:
<template>
<a href="{{ href }}">
<content> Here is a link. </content>
</a>
</template>
Example Fiddle
I have no idea how you're actually using this element, but http://jsbin.com/qaqigizajuvi/1/edit is a simple example of how to make at least what I think you're trying to achieve, work.
If you're using {{ name }} macros, you'll need to declare attributes for each name that you use. There's also no point in a <content> block if you just want a linktext: use another attribute macro in your definition:
<polymer-element name="monkey-test" attributes="href label" noscript>
<template>
{{ label }}
</template>
</polymer-element>
and then instantiate it as either:
<monkey-test href="http://example.org" label="tadah"></monkey-test>
or set up a <monkey-test> element and then set its href and label attributes via JavaScript using e.href=... and e.label=... or e.setAttribute(name, value)
note that the noscript attribute is used here because there's no explicit script block with a new Polymer('monkey-test', { ... }) call. If we want a more complex element, we can't get away with noscript.
Can anyone shed some light to this situation: I have a link that opens in a modal, i add a link and a button that are set to go to the same url. If i click the link, the modal goes to the link, and shows the article properly. If i click the button, it shows the article embedded on the page.
Here's the url, click on newtest2
http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=category&id=1&Itemid=2
Here's the code
<head>
<script type="text/javascript">
function change_url(){
window.location.href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2"
}
</script>
next
</head>
<body>
<button onclick="location.href='http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2'">Next</button>
</body>
</html>
There is a apparent difference, being that the link calls window.location, while the button just sets location, but this is semantically the same.
That popup you got is created by JavaScript. So the link is just used for its url, but when you click it, a script gets executed that loads the content asynchronously and shows it in a popup.
This script does not affect the button (though it could). Find the script that does this and apply it to the button too.
A workaround could be:
<a href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2">
<button></button>
</a>
Edit: Although it's working, is not a recommended code, as HTML spec clearly says that using tag for item is invalid, so treat this ONLY as a workaround.
P.S. Why are you using <a></a> in section head?