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>
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;
}
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
I need to wait for a certain object to load while it is hidden. But what appears to be happening, is that it only loads without the display:none;
I'm using jQuery, and I tried putting the .load on the object to call a function when it loads, but seems that it will not load, because it's hidden.
Is there a way of 'forcing' the load of the Object, or, another way to 'hide' but still loading?
How to do it correcly:
use visibility: hidden instead of display: none
as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty
When the ‘display’ property is set to none, then the given element
does not become part of the rendering tree. With ‘visibility’ set to
hidden, however, processing occurs as if the element were part of the
rendering tree
Load it off screen, style="position:absolute;left:100000px"
How to doit correcly:
use visibility: hidden instead of display: none
as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty
When the ‘display’ property is set to none, then the given element
does not become part of the rendering tree. With ‘visibility’ set to
hidden, however, processing occurs as if the element were part of the
rendering tree
thanks to #SomeKittens
It seems that an SVG will not be rendered if the element is set to display:none. It's possible to load every element individually with JS as shown in this answer.
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
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'"
>