I understand that you can use CSS to change the cursor between the default and to a custom URL, and I know that you can set specific cursors for specific elements.
What I want to do is set cursors for the defaults so that when the user hovers over any element which brings up the click finger cursor, my own custom click finger will appear.
To explain it another way, imagine a selector that instead of running whenever the user hovers over a certain element, it would run whenever the web page changes the cursor to one of the default.
I think that I have done an ok job of explaining this but if I don't make sense I will happily explain further.
For a customer CSS cursor its much like any other CSS element use url()
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?v=example
cursor: url(path/to/image), auto;
No need for javascript if you wanted this to be on every link then:
a:hover{
cursor: url(path/to/image), auto;
}
You can easily do this using Javascript:
var elements = document.getElementsByTagName("*");
// gets array of every element
for(var counter = 0; counter < elements.length; i ++) {
// loops through every element
if(window.getComputedStyle(elements[counter]).cursor == "pointer") {
// checks if the element uses a "pointer" cursor
elements[counter].style.cursor = "url(/* Your cursor's URL */)";
// if it does, the cursor is replaced with yours
}
}
Related
I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
I am trying to use paper-dialog within my custom component.
I want to be able to open the dialog from outside the component. What is the best way to do this? (all the examples work directly on the component)
Also the dialog requires me to call "open()" on it to open it.
In the examples I found I found:
this.$.dialog.open();
But this doesn't seem to work with lit-element
I got it to work using shadowRoot, not sure this is the best option:
render() {
return html`
<style>
</style>
<paper-dialog id="dialog">
<h2>Content</h2>
</paper-dialog>
`;
}
firstUpdated(changedProperties) {
console.log("firstUpdated called")
if (this.shown == "true")
{
// this.$.dialog.open();
this.shadowRoot.getElementById("dialog").open()
}
}
I added a property to my element called "shown"
static get properties() {
return {
shown: Boolean,
Thinking I could pass this from the outside into my component, but it doesnt seem to do the trick either (I can set it once with the custom element propery, but changes to it from the out side dont seem to work.
Generally, if you are aggregating a dialog within an element that has other UI elements then you shouldn't be showing/hiding the dialog from outside the element - the event that triggers the dialog should be raised and handled with the containing element.
That said, if it's absolutely necessary, then I prefer a "showDialog" method (not a property). Closing the dialog should be triggered by a dialog button or loss of focus, so you don't need to expose a close method.
I have code that will hide components dynamically; it uses [component].addStyleName("name") to add a style to a component, and that style is defined to hide the component.
I have a page which will have a large number of components; I can put them in an array and do this, but I'm hoping for a different way. I would like to assign all those components their own style - something like "costPanel" - and then use server-side vaadin code to alter the definition of the style "costPanel" at runtime.
The Page.Styles class in Vaadin has no methods for obtaining existing styles nor altering ones that are there -- the only methods are for adding them.
Is this possible in Vaadin, even if I have to do something on the client side for it?
This is perhaps best suited as a comment, but it does not really fit in there.
Not trying to be patronising, but it sounds like you're trying in a very complicated way to reinvent the wheel. component.setVisible(false) will do exactly what you need, as in the component will not take up any space since it won't actually exist in the DOM itself. Take a look at the example below:
Code:
public class LayoutWithInvisibleComponents extends VerticalLayout {
private int index = 0;
public LayoutWithInvisibleComponents() {
// add a visibility toggling button
addComponent(new Button("Toggle next", event -> {
Component component = getComponent(++index);
if (component instanceof Button) {
// just toggle the next one if it's a button
component.setVisible(!component.isVisible());
}
if (index == getComponentCount() - 1) {
// reset counter
index = 0;
}
}));
// add some invisible dummy buttons
for (int i = 0; i < 5; i++) {
Button button = new Button("Button " + i);
button.setVisible(false);
addComponent(button);
}
// and add a visual delimiter
Panel rightPanel = new Panel(new Label("---------- some visual delimiter ----------"));
rightPanel.setSizeFull();
addComponent(rightPanel);
}
}
Result:
Is there anything else I'm missing?
This also would make a better comment, but doesn't fit well enough there.
The following is from the Book of Vaadin:
Beware that invisible beings can leave footprints. The containing layout cell that holds the invisible
component will not go away, but will show in the layout as extra empty space. Also expand ratios
work just like if the component was visible - it is the layout cell that expands, not the component.
The phrase "show in the layout as extra empty space" convinced me that there would be blank, open, background-colored space where my component was supposed to be. I don't remember if I tried it, but I might have and had some other error that caused me to conclude my assumption was correct, and that the setting was for making it un-rendered but with the space still visible.
Vaadin has much better documentation than most of the industry, but in this case I got the meaning crossed up. In succeeding paragraphs they even have additional explanation that does say what I learned through this question, but the part quoted here seemed to contradict it.
Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.
Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?
Thanks!
I just opened up a random bootstrap template site and did what you where asking for.
Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.
Switch to the console tab.
Use Jquery selector to select all
the intended elements (you can use the same css selector here too
but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
The result is all the elements
of that selector.
NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.
In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).
Visually
Temporarily set a border or background color for the selector, like:
border: 1px solid red;
Or:
background: red;
This makes it very easy to find the affected elements.
Programmatically
On the JavaScript console, use:
// Replace with something that prints the relevant details
var stringify = function(element) { return element.innerHTML; };
// Iterate over all affected elements and print relevant info
var affectedElements = document.querySelectorAll('.your .selector');
var len = affectedElements.length;
console.log('Elements affected: ' + len);
for (var i = 0; i < len; i++) {
var affectedElement = affectedElements[i];
console.log(
'Element ' + (i+1) + ':\n' +
stringify(affectedElement) + '\n\n');
}
The inspection of elements feature of the browser is meant for the purpose you want.
1.Open up the index file in any browser(preferably Mozilla Developer edition),
2.Right click and Inspect element,
3.Then open the compiled stylesheet. Find out the style element you want to check the effect of.
4. Go back to inspection, remove/add CSS properties and see the effect in real time.
The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.
When moving over a dragable element I want the cursor to change to a hand and upon mouse down until mouse up I want to change to a "grabbing" hand. What is the proper, cross browser compatible way to do this?
Googling this only brings up websites from year two thousand, with tutorials on IE6. BLA!
Are there any good MODERN tutorials on this topic out there? If not, someone needs to write one. That'd make an excellent smashing magazine article!
Using the jQuery framework, you could do something like this:
// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
$(this).css('cursor','move');
} , function(){
$(this).css('cursor','default');
});
// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
$(this).css('cursor','-moz-grabbing');
});
// this event changes the cursor back to the default type after you let go
// of the dragable element
$('#element').mouseup(function() {
$(this).css('cursor','default');
});
For a live example, check this out: http://jsfiddle.net/EaEe3/ Let me know if you need more information. I hope this helps.
The propper way is to use cursor rule default values, as 'move' in your case.
If you want a custom cursor you must have a .cur file for IE and a png/gif file for others, so you can write
cursor:url(notie.png),url(ie.cur),move;
Using CSS:
http://www.w3schools.com/css/pr_class_cursor.asp
.myElement {
cursor: move;
}
.myCustomCursor {
cursor: url(myCoolCursor.gif);
}