I am defining three menu buttons
<div id="buttonscontainer">
<ul>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Bold</a></li>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Italic</a></li>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Image</a></li>
</ul>
</div>
I use <a> tag to create simple text button with OnClick jscript.
The problem is that when user hovers over the link the cursors is changed to edit (like editbox cursor)
Why is that behaviuor? Or do I have to look in CSS for particular attribute
You either need to add the href attribute to your anchor or in CSS you can add:
#buttonscontainer a:hover
{
cursor: pointer;
}
Either of those will change the cursor to the pointer :)
jsFiddle example.
I think the problem is that you need to add a href attribute to your links:
<a .. href="#">Bold</a>
Or, you could add this CSS:
a {
cursor: pointer
}
but that seems a little silly. Just add the href, and fix the styling of the links (demo).
I think the problem is that your tag is missing required atribute href.
Try putting in empty href=""
Related
I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this?
Updated
Please note the *ngFor, this would prevent the option of using *ngIf and not rendering the <a> altogether.
<a *ngFor="let link of links"
href="#"
[class.disabled]="isDisabled(link)"
(click)="onClick(link)">
{{ link.name }}
</a>
The TypeScript component has a method that looks like this:
onClick(link: LinkObj) {
// Do something relevant with the object...
return false;
}
I need to actually prevent the element from being clickable, not just appear that it is with the CSS. I was assuming that I needed to potentially bind to the [disabled] attribute at first, but this is incorrect as the anchor element doesn't have a disabled property.
I looked at and considered using the pointer-events: none but this prevents my style of cursor: not-allowed from working -- and this is part of the requirement.
Specifying pointer-events: none in CSS disables mouse input but doesn't disable keyboard input. For example, the user can still tab to the link and "click" it by pressing the Enter key or (in Windows) the ≣ Menu key. You could disable specific keystrokes by intercepting the keydown event, but this would likely confuse users relying on assistive technologies.
Probably the best way to disable a link is to remove its href attribute, making it a non-link. You can do this dynamically with a conditional href attribute binding:
<a *ngFor="let link of links"
[attr.href]="isDisabled(link) ? null : '#'"
[class.disabled]="isDisabled(link)"
(click)="!isDisabled(link) && onClick(link)">
{{ link.name }}
</a>
Or, as in Günter Zöchbauer's answer, you can create two links, one normal and one disabled, and use *ngIf to show one or the other:
<ng-template ngFor #link [ngForOf]="links">
<a *ngIf="!isDisabled(link)" href="#" (click)="onClick(link)">{{ link.name }}</a>
<a *ngIf="isDisabled(link)" class="disabled">{{ link.name }}</a>
</ng-template>
Here's some CSS to make the link look disabled:
a.disabled {
color: gray;
cursor: not-allowed;
text-decoration: underline;
}
For [routerLink] you can use:
Adding this CSS should do what you want:
a.disabled {
pointer-events: none;
cursor: not-allowed;
}
This should fix the issue mentioned by #MichelLiu in the comments:
<a href="#" [class.disabled]="isDisabled(link)"
(keydown.enter)="!isDisabled(link)">{{ link.name }}</a>
Another approach
<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a *ngIf="isDisabled(link)">{{ link.name }}</a>
Plunker example
My answer might be late for this post. It can be achieved through inline css within anchor tag only.
<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>
Considering isDisabled is a property in component which can be true or false.
Plunker for it:
https://embed.plnkr.co/TOh8LM/
Just came across this question, and wanted to suggest an alternate approach.
In the markup the OP provided, there is a click event binding. This makes me think that the elements are being used as "buttons". If that is the case, they could be marked up as <button> elements and styled like links, if that is the look you desire. (For example, Bootstrap has a built-in "link" button style, https://v4-alpha.getbootstrap.com/components/buttons/#examples)
This has several direct and indirect benefits. It allows you to bind to the disabled property, which when set will disable mouse and keyboard events automatically. It lets you style the disabled state based on the disabled attribute, so you don't have to also manipulate the element's class. It is also better for accessibility.
For a good write-up about when to use buttons and when to use links, see Links are not buttons. Neither are DIVs and SPANs
consider the following solution
.disable-anchor-tag {
pointer-events: none;
}
.disabled{ pointer-events: none }
will disable the click event, but not the tab event. To disable the tab event, you can set the tabindex to -1 if the disable flag is true.
<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
<a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>
This is for anchor tags that act as tabs:
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"
instead of class.disabled, we can also bind a variable with the disabled attribute. This will be used only buttons, inputs and dropdowns. HTML disabled Attribute
For Example:
<button [disabled]="isDisabled">Test</button>
Demo
I have used
tabindex="{{isEditedParaOrder?-1:0}}"
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"
in my anchor tag so that they can not move to anchor tag by using tab to use "enter" key and also pointer itself we are setting to 'none' based on property 'isEditedParaO
rder' whi
You can try this
<a [attr.disabled]="someCondition ? true: null"></a>
Just use
<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>
Example:
<a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>
I have bunch of links and I need to change the texts color to red after user clicks them
I have something like:
<li class="test" ng-repeat="item in items">
<a href="" ng-click="clickMe()" class="test-li">
{{item.name}}
</a>
</li>
Currently the style is like
.test-li {
color: black;
}
I want my texts to turn red after user clicks them.
So I do:
.test-li:visited {
color:red;
}
It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!
You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.
Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.
jQuery exmample:
$('li a').click(function(){
$(this).addClass('visited');
// or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});
I have a markup like which i have given below :
I have given some link to the anchor tag but I want user to click anywhere on the li tag to make link redirect to link given to anchor tag but i cannot place my span inside the anchor tag ,it has to be outside of the anchor tag.what will be the css for that and it should work in IE also.
<ul>
<li>
<span> 1 </span>
Click any where in the li i will take u to somewhere
</li>
</ul>
You can't modify the document object model with css. You would need a javascript function for that.
You could try something like:
<li onlick="window.location.href='your.url'"> ... </li>
On page 1 there is a link which takes you to a certain point on page 2
MY TEXT HERE
This takes you straight to the anchor (position) on page 2 with the following code
<a name="position"> MORE TEXT HERE</a>
Now, my question is how can I change the text and background color when #position is in the URL?
For example: www.domainname.com/page2.html#position
This is the CSS I used but doesn't work:
#position {
color:#ff0000;
background-color:#f5f36e;
}
Here is a example http://jsfiddle.net/jvtcj/2/
Thank you in advance!
Use the :target selector:
a:target, /* or simply */
:target {
/* CSS to style the focused/target element */
}
You'd be better off using the id of a particular element to receive the focus, since named-anchors seem to have been dropped, if not deprecated entirely.
References:
CSS selectors, level 3.
You can use the CSS3 :target peseudo selector: http://blog.teamtreehouse.com/stay-on-target
Also, don't use the old myth <a name="destination">...</a>, all you need is to id the section you want to jump to, e.g. <section id="destination">...</section>
MY TEXT HERE
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>
... in css:
a[name=position2]:target{
background-color:green;
}
Try using
<a name="position" class="position"> MORE TEXT HERE</a>
And in CSS use
.position {
color:#ff0000;
background-color:#f5f36e;
}
http://jsfiddle.net/jvtcj/4/
Add an id to the tag.
You can see how here using your example
http://jsfiddle.net/h5NZh/
<a id="position" href="#position">MY TEXT HERE</a>
i have the code below
<a id="treeSelector" style="cursor:pointer" >
<img src="../../graphics/tree.gif" align="left" style="padding-right:5px;"/>
<span>Root Page</span>
<img src="../../graphics/arrow_down.gif" align="absmiddle"/>
</a>
My Problem is that using the span inside when mouseover the cursor form pointer becomes default arrow moving from arrow_down.gif to Root Pag text.
I know that if i use dislpay:block on will solve my problem BUT this not what i want because link has onmouseover show another div.
Can anyone help me
Thanks
There are 2 really easy solutions.
Use HREF
...
Use CSS
#treeSelector, #treeSelector *{ cursor:pointer }
<span style="cursor:pointer;">