I want to make paper-card whole element as a link. How to do it properly? I've tried in this link: http://pastebin.com/Ch453kvK. Is that the proper way to do it? Actually it change styling that I applied to it.
There are several ways to acheive this:
1. You solution is correct if it works. You can also try to put the <a> tag inside the <paper-card> element.
2. Or you can catch the click event on the <paper-card>, set the location.href property.
document.querySelector( 'paper-card' ).addEventListener( 'click', function ()
{
location.href= '#link'
} )
3. Or you can put all the content of the <paper-card> in a <button>, or in a <paper-button> and set the location.href property in the onclick handler.
4. As suggested by #Adamos42 you can use Polymer events.
Related
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>
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
If I have the following simple code segment:
<div ng-app="myApp">
<a ng-disabled='true' ng-click="value1=123">click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==
</div>
As you can see from the fiddle : http://jsfiddle.net/basarat/czVPG/ the button is not clickable and ng-click (which is simply a jquery on('click',function(){}) ) does not execute. However it does execute for the anchor tag.
Is it because disabled is not a valid attribute for an anchor tag?
If it is why does it still trigger the dom click event when a button does not?
Read w3c Link and the-a-element
disable is not valid with anchor tags
instead you can do it by event.preventDefault()
$('a').click(function(event){
event.preventDefault();
});
Disabled is not a valid attribute for the anchor tag. Source : http://dev.w3.org/html5/html-author/#the-a-element
If you don't want to use javascript to disable the anchor (as pruposed in other responses) you can just omit the hrefattribute and the anchor wont work and will even change it's styling.
<a>A disabled anchor</a>
Note: I know my answer doesn't directly talk about the disable attribute but the info might still be useful for the audiance, as it was for me.
no it doesnt work with the a tag you can use the jquery event.preventDefault() referance here
The button is an input type, that's why disable works. Anchors don't work the same.
Try giving your a tag an id and disabling using javascript.
<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==</div>
After that can disable the element using js and it should behave as input types do.
function DisableButton() {
var submitButton = document.getElementById("someid");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Make sure you're getting the right client id of your element.
Removing the href or setting it to '#' when you actually want to disable it is kind of a pain if the anchor is to be enabled later, because you need to reset the href to whatever value it should link to. Instead, I just add a disable attribute to the tag and a click event handler and some css. This way the anchor can easily be seen to be disabled, but if enabled where it would go.
Yes, disabled isn't supported attribute by the anchor tab, but the CSS attribute selector does find it and so does jQuery's. So, while the following solution is a mixed jQuery/javaScipt/CSS, it does provide a somewhat nicer way to disable/enable anchors, which supports dynamically adding/removing the disabled attribute to/from the tag with javaScript. Note that this has only been tested and found to work in Chrome.
<style>
a:disabled, /* This doesn't do anything, but hopefully one day ... */
a[disabled] /* This activates when the disabled attribute is added. */
{
cursor: not-allowed; /* Indicate that the link is not to be click! */
}
</style>
<script>
// Use the same css selectors to find all of the disabled anchors ...
$( 'a:disabled, a[disabled]' )
.click( function( event ) {
//
// Prevent disabled anchors from doing their click action ...
//
// Need to recheck that the anchor is still disabled, because the
// jQuery that initially found this anchor and set this event
// handler doesn't affect the anchor after the event is set.
//
// Is this anchor still disabled?
if( this.hasAttribute( 'disabled' ) ) {
event.preventDefault();
}
} );
</script>
Here is a codePen demo:
https://codepen.io/howardb1/pen/XWrEKzP
Not possible unfortunately.
Another sweet option here is to use CSS! Whack a class on that disabled link!
.disabled {
// Prevent element being interactive / the target of pointer events.
pointer-events: 'none';
// Additional styles to make it 'look' disabled below
opacity: 0.5;
}
More on CSS Pointer events here (MDN Web Docs)
I have an anchor link that I want to disable once the user clicks on it. Or, remove the anchor tag from around the text, but definitely keep the text.
<a href='' id='ThisLink'>some text</a>
I can do this easily with a button by adding .attr("disabled", "disabled");
I successfully added the disabled property, but the link was still clickable.
I don't really care if the text is underlined or not.
Any clue?
When you click on the wrong musician, it should just add "Wrong" and then become unclickable.
When you click and you are correct, it should add "Awesome" and then disable all <a> tags.
The cleanest method would be to add a class with pointer-events:none when you want to disable a click. It would function like a normal label.
.disableClick{
pointer-events: none;
}
<a href='javascript:void(0);'>some text</a>
Use pointer-events CSS style. (as Jason MacDonald suggested)
See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
Its supported in most browsers.
Simple adding "disabled" attribute to anchor will do the job if you have global CSS rule like following:
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
I just realized what you were asking for(I hope). Here's an ugly solution
var preventClick = false;
$('#ThisLink').click(function(e) {
$(this)
.css('cursor', 'default')
.css('text-decoration', 'none')
if (!preventClick) {
$(this).html($(this).html() + ' lalala');
}
preventClick = true;
return false;
});
$('a').removeAttr('href')
or
$('a').click(function(){ return false})
It depends on situation
Bootstrap provide us with .disabled class. Please use it.
But .disabled class only works when the 'a' tag already has class 'btn'. It doesn' t work on any old 'a' tag. The btn class may not be appropriate in some context as it has style connotations. Under the covers, the .disabled class sets pointer-events to none, so you can make CSS to do the same thing as Saroj Aryal and Vitrilo have sugested. (Thank you, Les Nightingill for this advice).
Add a css class:
.disable_a_href{
pointer-events: none;
}
Add this jquery:
$("#ThisLink").addClass("disable_a_href");
The best way is to prevent the default action. In the case of anchor tag, the default behavior is redirecting to href specified address.
So following javascript works best in the situation:
$('#ThisLink').click(function(e)
{
e.preventDefault();
});
You could use the onclick event to disable the click action:
<a href='' id='ThisLink' onclick='return false'>some text</a>
Or you could just use something other than an <a> tag.
Just remove the href attribute from the anchor tag.
Jason MacDonald comments worked for me, tested in Chrome, Mozila and IE.
Added gray color to show disable effect.
.disable_a_href{
pointer-events: none;
**color:#c0c0c0 !important;**
}
Jquery was selecting only first element in the anchor list, added meta character (*) to select and disable all element with id #ThisLink.
$("#ThisLink*").addClass("disable_a_href");
Write this a single line of jQuery Code
$('.hyperlink').css('pointer-events','none');
if you want to write in css file
.hyperlink{
pointer-events: none;
}
Create following class in style sheet :
.ThisLink{
pointer-events: none;
cursor: default;
}
Add this class to you link dynamically as follow.
<a href='' id='elemID'>some text</a>
// or using jquery
<script>
$('#elemID').addClass('ThisLink');
</script>
This is the method I used to disable.Hope it helps.
$("#ThisLink").attr("href","javascript:;");
Try this:
$('a').contents().unwrap();
Simply in SASS:
.some_class{
// styles...
&.active {
pointer-events:none;
}
}
Never trust the browser because the user can change the page in any way without the server's knowledge.
If a link is to work only once, the first thing you need to do is make sure that server side the click is accepted only once (with an onetime token specified as querystring for example), because the URL present in the href attribute can be copied by the user and inserted in the navigation bar of the browser and runned multiple times.
On the javascript side, the safest thing you can do is completely replace the <a> link with another tag, preserving the content:
/** Replace element, preserving attributes and moving descendant nodes from the previous one.
*
* #param {HTMLElement} element Element to be replaced changing tag.
* #param {String} new_tag New element tag.
* #return {HTMLElement} New created element.
*/
function rename_element_tag(element, new_tag) {
let new_block = document.createElement(new_tag);
for (let j = 0; j < element.attributes.length; ++j)
new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);
$(new_block).insertAfter(element);
while (element.childNodes.length > 0)
new_block.appendChild(element.childNodes[0]);
$(element).remove();
return new_block;
}
This function replaces the passed element in place by "modifying" the tag, and preserves attributes and content by iterating all child nodes via vanilla javascript instead of jQuery to handle text nodes as well.
In your case you must skip the href attribute.
$('#ThisLink').one('click',function(){
$(this).bind('click',function(){
return false;
});
});
This would be another way to do this, the handler with return false, which will disable the link, will be added after one click.
The easyest way
In your html:
<a id="foo" disabled="true">xxxxx<a>
In your js:
$('#foo').attr("disabled", false);
If you use it as attribute works perfectly
I came across a strange problem with html anchor tags. I have an anchor tag on the html page and on clicking the 'a' tag it is supposed to give me an alert message. It is working well. But, If I append a new 'a' tag using jquery to the html page and on click of that appended 'a' tag is not working. i was able to give href, target blah blah blah to the appending 'a' tag but.. onlick function is not working. Any thoughts ???
Thanks in advance.
In jQuery, you typically use the .click() function on a selector to set the click handler. Note that if multiple items match the selector, multiple items will have the click handler installed.
Here's a trivial code snippet that should do what you want:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
function addLink(label, msg) {
/* Create link element.
The href="#" makes the link act like a link
(be highlighted, selectable, etc.).
The onClick="return false;" keeps the link from
scrolling the browser to the top of the page.
The onClick is not interfered with by jQuery's
.click() . */
var link = $('' + label + '');
/* Install click handler. */
function clicked_handler() {
alert(msg);
}
link.click(clicked_handler);
/* Add the link to the body. */
$('body').append(link);
}
addLink('Link 1', 'You clicked link 1');
$('body').append('<br/>');
addLink('Link 2', 'You clicked link 2');
</script>
</body>
</html>
Your question is unclear.
I assume that you're adding a click handler to the <a> tags by writing $('a.whatever').click(function() { ... }), then adding new <a> tags to the document.
When you write $(...).click(...), it only adds handlers to the elements that were found by the $(...) at the time you added the handler. It will not apply to any elements you add later.
You're probably looking for jQuery's live method, which will handle an event for all elements that match a selector, no matter when they were created.
For example:
$('a.whatever').live('click', function(e) { ... });
Try using this:
$("a").live("click", function(){
alert("Tadah!");
});
Adding an event works on stuff that is already on the page. If You add something aferwards You have to bind a new click eventto this new thing or use live, which always should be the second option
so instead of doing
$(something).append('<a href="" etc. ');
try something like this
$('<a></a>').attr('href','some url here').bind('click',function(){}).appendTo('body');