I've stated creating a Polymer-based webpage and I'd like to add a link to the paper-button I created. I've figured out how to do it, but I'd like to add a delay to let users see the ripple animation after clicking it.
To link it to a webpage I used this code:
<paper-button raised> Polymer's Website </paper-button>
However, I don't know how to add a delay. Could someone help me? And, is there a better way to link the button to a webpage?
You can create an element that extends native HTML a tag and use paper-ripple element if you want to customize the ripple effect. Another solution is to add an event to you paper-button and use a setTimeout to delay your action
goto:function(){
setTimeout(function(){
window.location.href = 'http:\\www.google.com';
},1000);
}
<paper-button raised on-click="goto"> Polymer's Website </paper-button>
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
My site uses Polymer 2, <app-location> and <app-route>. The <app-route> allows me to change the URL on user interaction with the app, but it seems that it is also preventing normal links from functioning.
How can I make normal <a href="/some/url/on/my/domain"> links work? Is there a way to make links bypass <app-route>?
The app-location use iron-location which listen click event on document. So just stop click event before it propagates to document.
<a href='/some/url' on-click='stopPropagation'>
...
stopPropagation (event) {
event.stopPropagation()
}
Couldn't get the answer by user2438933 to work, but this seems to do the trick!
<a href="/some/url" onclick="normalLinkClick(event)">
...
normalLinkClick(event){
event.stopPropagation()
}
update 1: found this issue with pull request which seems to be addressing this issue in Polymer.
update 2: Decided to restructure my layout based on the Polymer Starter Kit which uses page.js instead of app-router, and seems to work well, although they don't use paper-item in paper-menu but instead use custom anchor elements.
Search every bit of documentation but I can't find this (although there is another issue on stackoverflow with almost the same title, not same thing)
TLDR: I need to have to whole paper-item clickable to the link. Not just the text itself. See image below for clarity and here is the live code.
.
I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.
When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...
There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?
<paper-menu class="list">
<paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
<paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>
I checked documentation on paper-item, paper-menu and others but those never use an example with a link.
IMO, the most clean way is to just drop the links altogether and just add on-tap event.
(You can also use dom-repeat for your menu)
<paper-menu class="list">
<paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
<paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>
I'm assuming your are using <a> tags because of app-router.
From app-router doc:
go(path, options) - You can call the router from Javascript to navigate imperatively.
Then you can simple write your own on-tab handler and use custom attribute (mypath) on each <paper-item>
Polymer({
is: 'your-menu',
menuSelected: function (e) {
var mypath = e.currentTarget.getAttribute('mypath');
document.querySelector('app-router').go(mypath);
},
})();
Add class="flex" to each of your anchor tags.
As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.
If I have this html:
<div id="myDiv"></div>
and this CSS:
#myDiv{
background:url('../images/someImage.png') no-repeat;
background-size:100%;
width:44px;
height:44px;
}
I need to open a new page when the user taps on myDiv. I have an external js file where I have this:
function bindMyDiv(){
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
}
But I don't understand where to call this from the HTML, or if this is even the right way to go about this. Advice?
Try
$("#myDiv").live("tap", function(event){
alert('binding');
});
You can place this in side your onReady javascript file
EDIT:
http://jsfiddle.net/R9e6u/
Everyone here provided pretty good insight on different solutions for you to handle your script, but I don't think that anyone stopped to think SHOULD they help improve your script. "or if this is even the right way to go about this ", the answer is no. And perhaps I'm over-simplifying, but with JQM if you're trying to have a div (or any DOM element for that matter) open a new page simply wrap an anchor tag around around it (or in it, whichever is appropriate) and set your href to href="#myNewPage"and the id on the JQM page that you want to load to id="myNewPage"
jQuery Mobile's frame work is set up to automatically inject JS & AJAX into normal HTML elements to provide a smooth UX. While binding a touch event is sometime needed, this situation doesn't warrant that level of code...thats the beauty of jQuery Mobile =).
Examples of when to bind a touch event: show/hide a dom object, trigger a click for a plug-in etc.
You want to call that function on the pageinit event for the page on which it resides. You could use some other page-events from jQuery Mobile like: pagecreate, pageshow, etc. but I think pageinit is your best-bet.
The implementation would look something like this:
$(document).delegate('#page-id', 'pageinit', function () {
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
});
OR
$(document).delegate('#page-id', 'pageinit', bindMyDiv);
You would replace #page-id with the ID of the data-role="page" element in which your div resides.
This method is preferred over event delegation for the #myDiv element because binding directly to an element creates less overhead when the event is triggered. If you use event delegation then the event has to bubble-up to the delegation root.