Disable waiting/busy cursor - javascript

Is there any way to completely disable waiting cursor ( ) in your web app/site so the user will never see it?
Or can I set a delay, so it will appear after one or two seconds, but not immediately?
update: Waiting cursor was shown on every http-request because of an angular-block-ui property autoBlock set to true (by default).

This will set the cursor to default, but it isn't a good practice to use !important, I suggest to find exactly the class that is setting to loading cursor and overwrite it
body {
cursor: default !important;
}

You can simply do it using pure JavaScript like this:
if (document.body.style.cursor==='wait') {
document.body.style.cursor='default';
}
But you need to know when run this script, but that's how you can detect and play with the cursor using JavaScript and use it depends on your need...
Also you use pure CSS, override all cursers on body and html like this:
body, html {
cursor: default !important;
}
or you can have 2 classes and toggle them in a certain time, for example, create class default-curser and apply it using JavaScript, when and where you need to override the curser!
Also the other way is having default curser for the body and html and override it later on in your css for different elements, like this:
body, html {
cursor: default !important;
}
a {
cursor: pointer !important;
}
//... and whatever other pointers you need
This way you always have default curser, expect otherwise!

Related

I set the display property of an HTML element in CSS. But, if I check that value in javascript it shows blank

In my separate CSS file I set the display property of a div to "none".
HTML file:
<div class="ttt"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>
CSS file:
.ttt {
display: none;
background-color: rgb(184, 88, 88);
}
The div is changing its background to the specified color and the div disappears like it's suppose to.
But, if I check the property in Javascript, it's blank. I get elements like this many other places. I check it and I get the right div. Just that if I check style.display I get blank.
Javascript file:
function changeVisibilty(pID, pInline) {
var el = document.getElementById(pID);
console.log(el.style.display); return;
// console.log(el); return;
}
NOW if I get rid of the CSS display: none and put it inline in the HTML it works.
div class="ttt" style="display: none"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>
Like I said before, the CSS is working. Cause, it sets the background color and makes the div disappear. HTML and CSS have been ran thru Validators. I dont want to use any other methods. Like setting hidden to false, changing opacity, moving it off-screen, etc ...
I need the style stuff to stay in the CSS file and I want to use display: none.
You can use window.getComputedStyle() to get the CSS set for an element. .style checks the style attribute values within HTML.
Note also, .getElementById() gets an element by id, you can use .querySelector() to select element having class set to "ttt".
function changeVisibilty(pID, pInline) {
var el = document.querySelector(pID);
console.log(window.getComputedStyle(el).display);
}
onload = () => changeVisibilty(".ttt")
.ttt {
display: none;
background-color: rgb(184, 88, 88);
}
<div class="ttt"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>
Instead of using
el.style.display
Use
getComputedStyle(el).display
more info

override default focus with css or reseting it

I want something like css reset, but only for the :focus. If there's none of this yet, would be good to know the possible properties to reset(override) in order to make new :focus that will override the previously one(set by the web-site css). For example, z-index may effect on :focus for some specific elements in some browsers. So the :focus should include z-index with some huge number and in order to work it should include position too. perhaps it's wrong example, but I think you got the idea here.
You may want to post some code with some examples of problems that you are having in a jsfiddle or in the question.
That said, there are some elements that tend to get default styling for :focus in the browser - input, a. There is some great information here about potential fixes, for instance:
/* put universal focus changes here */
*:focus {
outline: none;
}
/* put anchor focus changes here */
a:focus {
...
}
/* put input focus changes here */
input:focus {
...
}
I'm not certain what you are trying to accomplish with the z-index setting, but you could handle it as above.

Page breaks in SAPUI5

What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}

Override Inline Styles added via JS with CSS

A js plugin is adding a style that is giving me some headache:
element.style {
z-index: 100 !important;
}
So i have tried this:
html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView
div.janrainHeader[style] {
z-index: 1 !important;
}
and still nothing.
Contrary to the other answers, it is possible to override inline styles with CSS:
http://css-tricks.com/override-inline-styles-with-css/
I would guess that the extremely long selector might not be hitting the element.
I had a similar z-index issue with the Janrain plugin that was solved by this:
#janrainEngageEmbed > div[style] {
z-index: 0;
}
In your case, you probably need:
z-index: 0 !important;
The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )
inline style always override external and internal css, plus the fact that the plugin is using the !important clause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.
maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own

How can I convince Firefox to redraw CSS Pseudo-elements?

I'm having issues getting Firefox to update a webpage when its class is changed dynamically.
I'm using an HTML table element. When the user clicks a cell in the table header, my script toggles the class back and forth between sorted_asc and sorted_des. I have pseudo element which adds an arrow glyph (pointing up or down) depending on which class the cell currently is.
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
The problem is, that when you click the cell header a second time, the page doesn't update the arrow... until the user mouses away from the element. I think it's a bug as it works fine in Safari, and as I don't see any :hover tags in my CSS or other entries that might interfere.
Anyone seen this before, or know how to work around the issue?
It's kind of cheesy, but since you're using javascript anyway, try this after you changed the className:
document.body.style.display = 'none';
document.body.style.display = 'block';
This will re-render the layout and often solves these kind of bugs. Not always, though.
This is 2014 and none of the proposed solutions on this page seem to work. I found another way : detach the element from the DOM and append it back where it was.
Would you be able to use different CSS to accomplish the same thing without relying on the :after pseudo-selector? You might be able to simple define a background-image which you align as needed (I assume you would want the arrow on the right hand side).
For example:
.thead .tr .sorted_asc .sorted_asc {
background: url(images/down_arrow.png) no-repeat right;
}
.thead .tr .sorted_asc .sorted_des {
background: url(images/up_arrow.png) no-repeat right;
}
I only suggest this since I assume there isn't a specific reason why you need to use the :after pseudo-class. If you do need to use it, please update.
The bug can still be triggered in Firefox 58. Thankfully the opacity trick also still works. Just make sure to time it correctly. You might need to set a timeout between opacity changes.

Categories

Resources