I'm using Uploadify with an image button. Everything works. Except, I need to have a cursor:crosshair; instead of a cursor:default;, on mouse hover.
I tried setting it in CSS as such:
object { cursor:crosshair; }
The cursor does not change.
One theory, is inside the flash object they are setting the cursor. Is there some kind of workaround / solution for this?
The object will accept style attributes to demostrate that try:
object {visibility: visible;}
or
object {visibility: hidden;}
The problem is the .swf being displayed inside the object does not use external CSS. You only have access to style the object which contains the .swf flash handles the rendering for the actual button. While uploadify can accept many parameters from the uploadify method, such as buttonImg, width, and height there is no parameter for a cursor argument. The only other option you have is to modify the uploadify.fla to handle the cursor and publish a new uploadify.swf.
If you have Flash find the line in the ActionScript that has:
browseBtn.useHandCursor = true;
Change that line to this:
browseBtn.useHandCursor = false;
This is change it from CSS cursor ~ 'pointer' to 'arrow'
*Flash does not have a MouseCursor of 'crosshair' only ARROW, AUTO, BUTTON, HAND, and IBEAM, but you can craft your own
Related
First, I am building a website on cargo. There's html editor but I don't think it works that well along with the site builder itself.
I want my custom image mouse cursor image change while it's on click. I've got three problems here:
I can't set my default cursor to image. (It was successful in cargo but I don't know how to do this on html editor.)
I am not sure how to change my cursor to other image.
I want this to make it happen on my whole site not just on single text or image.
Here you go!
It's quite simple to do:
Just write the cursor property to whatever Selector you want, for the whole WebSite html {...} of course.
html {
background-color: lightgray;
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
<html>
</html>
There are also a lot of default cursors:
You can check them out here: https://codepen.io/chriscoyier/pen/uCwfB
I would simply use a combination of CSS and JavaScript.
CSS class declaring the appropriate cursor definition with a keyword fallback. Then add a simple onmousedown event to fire the addition of a second CSS class that declares an overriding cursor definition. Add a second onmouseout event to remove the second class that was added on click.
/* keyword fallback example: use pointer, if hand.png doesn't exist */
.cursor-hand {
cursor: url(hand.png), pointer;
}
http://nylbcsbc.org/t.html
Using dev tools, I was trying to modify a tag's property, as shown in the picture below:
I was trying to remove the whole style attribute of the video tag, but whenever I remove it, it will come back.
I guess this is due to some javascript function that is being executed repeatedly. My question is, how do I find this function and turn it off, so that I can modify the attributes as I do in other normal pages?
To find the function that changes element's attribute:
Assuming you are using google-chrome: right click on the node in Elements panel, in the opened context menu select Break on... -> Attribute Modification; When it breaks, use call stack window to find the cause.
UPDATE:
If you can't control the code, like in your case with jwplayer, instead of trying to remove style attribute, try to override each CSS rule defined there with his initial value:
<style type="text/css">
video {
-webkit-transform: initial!important;
transform: initial!important;
width: initial!important;
height: initial!important;
}
</style>
I am working with a pre-existing javascript plugin (a slider) that aligns one of it's internal elements (navigation icons) with "left:50px". Under very specific circumstances, I want to align this to the right, using "right:50px" instead. The problem is that when I add "right:50px" to it inline, the right property is still over-ruled by the pre-existing "left:50px" property that is set in the plugin's .css file. I have been unsuccessful in finding a way to remove the left property, or to overwrite it with some other value, such as "left:none".
Is there a way around this?
You want:
left: auto;
Along with setting the right property. It's not that your right declaration is being ignored, rather it will be applied at the same time as the existing left.
I can easily animate divs FROM the stylesheet position to another position using JQuery, but is there an easy way to do the reverse? Basically I want to avoid changing my stylesheet, yet have divs start off the page and be animated into their correct position.
You can try doing something like this:
var origt = $("#yourdiv").offset().top, origl = $("#yourdiv").offset().left;
$("#yourdiv").css({top:"auto", left:"auto"}); /*or wherever you want them to start*/
$("#yourdiv").animate({top:origt, left: origl});
Hope that helped!
Can you use css() function from jquery to get their style attributes? How wide and long they should be and animate them using those values?
Set the div's display: none;
Find the original location via javascript.
Move them outside of the visible window.
Change them back to display: block;
Animate them from current position back to original values stored in JS.
I think you are asking: Can one pass class names to jQuery animate instead of defining an object literal of css properties.
http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles
I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the
document.body.style.cursor = "wait"
thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?
A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).
EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?
What I suggest is two things:
a) Better write a CSS like
body.waiting * { cursor: wait; }
b) Use the JS to handle the body class
/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want
You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.
EDIT 2019: don't use jQuery for just this, use classList
The styling should be handled via CSS, as stated by W3C.com:
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
As suggested by Tom Rogerro, add a line to your CSS file:
body.waiting * { cursor: wait; }
However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.
To add a class name 'waiting' to the document body:
document.body.classList.add('waiting');
To remove a class name 'waiting' from the document body:
document.body.classList.remove('waiting');
For your first problem, try using cursor: wait !important;.
For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.
If you are happy using JQuery then a quick way to solve this would be to use:
$('*').css('cursor','wait')
I don't know how elegant this is but it has been working for me,
Not an answer to the question, but a way of achieving what is wanted.
Make a div (see class below) visible when you are loading.
ensures no element is accessible and dimmed display indicates this.
you can add an animated gif to indicate something is going on instead of the cursor.
.loading{
position:fixed;
height:100%;
width:100%;
left:0;
top:0;
cursor:wait;
background:#000;
opacity:.5;
z-index:999}
Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:
someButton.style.cursor = 'inherit';
To go back to the default for an element (and not break things like :hover with a forced cursor), set it to an empty string:
document.body.style.cursor = '';
I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.
define at the top of angular .ts file
declare var $: any;
and then where ever you want wait cursor:
$('*').css('cursor','wait');
and remove wait:
$('*').css('cursor','auto');
To fully replace the CSS toggling behaviour, we can simply use this inline:
<img
src=https://cdn.sstatic.net/Img/unified/sprites.svg
onmouseover="this.style.cursor = 'crosshair'"
>