Here's a link if this would help:
lovesongforever.com/nancytributes
Trying to add a custom css cursor. If I try to use a standard cursor for
testing purposes, e.g., "wait", cursor change happens properly ... but NOT
for custom css cursor via url(...)
Couldn't get the css cursor spec to work without ", help"
.surpriseCursor {
cursor: url(clapping_hands.gif), help; /* max size = 32 X 32 pixels */
}
<a name="surprise"> </a>
<a href="#surprise" onclick="PlaySound('applause', 'applause.mp3'); return false">
<img class="surpriseCursor" src="Broken_Heart.gif"><p>
</a>
You need to specify a default cursor in case your custom one doesn't load, without it you don't have a correct CSS property. As per W3C:
A comma separated list of URLs to custom cursors. Note: Always specify
a generic cursor at the end of the list, in case none of the
URL-defined cursors can be used
This should be set in most cases (definitely yours) to auto.
The correct code:
.surpriseCursor {
cursor: url(clapping_hands.gif), auto;
}
See link: https://www.w3schools.com/cssref/pr_class_cursor.asp
Related
I'm trying to make a custom cursor setter. You can customize cursors in CSS, so I went there first.
html {
cursor: url(MY URL GOES HERE), auto !important;
}
It works at this point. However, I want the average user to be able to enter an image URL and see the cursor change to that. I decided to use JavaScript to do that.
function customCursor() {
var v1 = prompt("Enter the image URL you want to be your mouse cursor.");
var style = document.createElement('style');
style.innerHTML = `html {cursor:url(` + v1 + `); } `;
document.head.appendChild(style);
}
However, it doesn't work. I checked the current page HTML with Firebug, and the tag is added. And when I use JavaScript to add it manually, it works. So why would it not work?
I also made sure to keep the images I chose below 128x128.
After massive changes to the code, it still is not working. However, I now understand a reason why (by using devtools to read what was actually being added):
Instead of dynamically using my variable, it was treating the variable name as the URL itself. This makes this question mostly irrelevant.
I am looking to change the cursor in the viewer when I activate my tool in the viewer. I have tried updating the cursor CSS value for the canvas of the viewer but it seems to be overwritten to the default viewer one.
You should show what you've tried.
If you add this css:
.adsk-viewing-viewer > .canvas-wrap > canvas {
cursor: pointer !important;
}
Just replace 'cursor: pointer' with the type of cursor you'd like. Be sure to add the !important value or it won't override the default cursor.
The canvas is generated after the document is ready, so you'd need to wait for the appropriate events if you are looking to override the cursor style with JS.
Edit:
I noticed you said you were activating it from a tool, so to set the cursor like this with js:
const viewerCanvas = document.getElementsByTagName('canvas')[0] //may need to ensure [0] is the viewer canvas if multiple canvas's
viewerCanvas.setAttribute('style', 'cursor: pointer !important');
You just need to unsure that you handle both tool-activated and tool-deactivated toggle events.
Try this to set the cursor style:
viewer.canvas.style.cursor = "pointer" | "progress" ...
And beware that that'd be overwritten again when navigation tools are activated so to stick to a cursor at all times follow the other answer to override by class name in your stylesheet with the !important rule.
As I stumbled across the same problem I found the way other tools implement this behavior:
You can set the cursor by implementing the getCursor function in your tool (your tool must be active and have the highest priority). This seems to be the easiest and safest method to set the mouse cursor. Also note that an cursor image should be 32x32px for best compability according to mozilla.
Look in the OrbitDollyPanTool for an example:
this.getCursor = function ()
{
if (!_useCustomCursors)
return null;
switch (_activeMode) {
case "freeorbit":
case "orbit":
return 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAt1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAzMzP6+vri4uISEhKKioqtra2dnZ2EhIR9fX10dHRkZGQdHR3t7e3Hx8e5ubm1tbWoqKhWVlZKSko4ODgICAjv7+/o6OjMzMyxsbFOTk4pKSkXFxcEBAT29vbW1tZ6enpISEgLCwvhzeX+AAAAGXRSTlMANRO0nHRJHfnskIxQRKh89syDVwTWZjEJxPFEswAAAOFJREFUKM+1j+lygkAQhIflEAJe0Rw9u4CCeKKoSTTX+z9XoMJWWeX+ssrvZ3f19DQ5zOw/0DUMQPlmQ72bE2adBp8/Rp3CQUi3ILx+bxj4fjDs9T1Bmo6bbPPN8aDU4bjJt4nb+de789kSFyxn826jW3ICLNZZKU8nWWbrBTCRVm04U8TpjquRFf1Go0d7l8aYOrUR7FGEFr1S9LGymwthgX2gE/Kl0cHPOtF2xOWZ5QpIC93RflW4InkDoPRXesd5LJIMQPzV7tCMa7f6BvhJL79AVDmYTNQ1NhnxbI/uwB8H5Bjd4zQPBAAAAABJRU5ErkJggg==), auto';
case "dolly":
return "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8mJiYAAADNzc2/v7+fn59paWlPT08MDAwICAj6+vqpqak7Ozv29vby8vLp6em2traAgIBkZGRZWVlAQEAaGhpISEgkS7tbAAAAFHRSTlMAOvhpZD8mkQWegMy9qY1YVE01EYiqlE0AAADZSURBVCjPbY9ZloMgEAAbEbfsmRZZXbJn7n/AAX2RQVN/VD26AXLOeZLDGo6IbfI9tHq8cdxuj1HwvgCoaiHqKoRk+M3hB9jueUW8PnfsE/bJ3vms7nCkq7NoE3s99AXxoh8vFoXCpknrn5faAuJCenT0xPkYqnxQFJaU0gdZrsKm8aHZrAIffBj40mc1jsTfIJRWegq6opTMvlfqLqYg7kr1ZB7jFgeaMC59N//8O4WZ1IiPF8b5wMHcJn8zB4g4mc77zpxgAbMSUVoGK4iV0hL4wrksz+H0Bw5+E+HrniDQAAAAAElFTkSuQmCC), auto";
case "pan":
return "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAABHVBMVEUAAABPTk4AAAAAAAAJCQkRERE0MzQQEBAODg4QEBB4d3dbWlo9PDw/Pj4vLy8sLCwZGBgWFhYcHBwKCgoSEhIAAAAKCgoICAgKCgoQEBAODg4EBAQICAgPDw8REREMDAx2dnY0NDQvLy9QUFAaGhomJSYjIyM7OjokJCQNDA0mJiYNDQ0AAAAUFBQJCQkQEBAEBAQNDQ0PDw8VFRX///+amJkAAAD5+fnz8/PKycn9/f339vbi4eLR0dDNzMyAgIB8e3xycHH7+/vw7+/o6OjX1ta7urq4t7iwsLCnp6eioqKbmppva21OTk74+Pjl5eXc3Nzb29vLy8vDw8PDwsKrqqqdnZ2WlpaSkpKTkZKMiouEg4NkZGRISEgxLzBpgbsEAAAANHRSTlMA+fiQXgngKSYG/vX17uvBuqackpCNg3BpUkpAPBwTDvj18+vl0s/NwrOwoZZ+TDg4NBkBGrzX8QAAAP5JREFUKM99j9Vuw0AQRdeuKZyGkyZNmbnXDLHDVGb8/8/oy7paK1bO0+oc7WiGnGiaxq+QRTQAOh8f9Jv4H/Ge8PZPrCdlvkxfYluUT2WyyCq3mZ7unwlKVLcqOzA/Mf71j0TWJ/Ym6rPeca05Ni4iIevYc7yoUD2zQFhq71BdI9nvBeBabFDSPe8DswlUc1Riw3VxbH0NHBUPQ0jrbDnPYDjALQBMq9E7nkC5y7VDKTZlUg8Q0lmjvl74zlYErgvKa42GPKf3/a0kQmYCDY1SYMDosqMoiWrGwz/uAbNvc/fNon4kXRKGq+PUo2Mb96afV0iUxqGU2s4VBbKUP65NL/LKF+7ZAAAAAElFTkSuQmCC), auto";}
return null;
};
I would like to move the href assignment to CSS.
Something like <a style="href: url('Home.htm');">Home</a> instead of Home.
Is it possible to do this in CSS?
I have a button at several places in my site whose corresponding URL value, might change in the future. I want to change the target address only in one place, i.e. my CSS file, instead of having to manually change them for every instance of that button.
This behaviour isn't really supported, as explained in other answers. But if you really need this on a page, it's possible to add it using some JavaScript. Used-defined custom variables/properties in CSS need to start with --, and I'll use the name --href-override.
We'll listen for all mousedown and touchstart events on links in the document. These events are useful because they'll always occur before the click is registered. Each time we handle one of these events, we check if the associated link has a --href-override property/variable defined in CSS. If so, we replace the HTML href with the CSS --href-override value, and the browser will automatically use that new value when handling the click event.
function overrideEventTargetHref(event) {
// if it's the beginning of a click on a link...
if (event.target.tagName === 'A') {
var link = event.target;
var override = getComputedStyle(link).getPropertyValue('--href-override').trim();
// if the link has an CSS href-override and it's different than the HTML href...
if (override && override != link.href) {
// replace the HTML href with the CSS href-override
link.href = override;
}
}
}
window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);
.override {
--href-override: https://stacksnippets.net/;
}
actually example.com
secretly stacksnippets.net
This also work properly for things like middle-clicking to open in a new tab.
This is quite a hack and you usually wouldn't want to do it. But if your situation requires it, you can.
CSS is a styling sheet, so the short answer is no. Also not entirely sure as to what your reason for wanting to is, but if it's due to changing data, use JavaScript or PHP to do this instead. Much easier, logical, and possible.
The href property stands for hypertext reference. It is not an entity that lends itself to styling; see this resource. If you wish to style how that location's text value appears on a page, you could write code that styles the a tag and if you want to get fancier you could add on a pair of span tags, as follows:
CSS:
a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}
a:hover {
border: 3px solid #009;
}
span {
color: #f0f;
}
<span>Home</span>
As for changing the values of the buttons, if you run Linux, it provides various helpful utilities, such grep; see this discussion. Also, see this article.
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>
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