I love google docs but I find a blinking cursor very distracting. The new version of google docs doesn't obey the operating system setting for displaying a solid (non-blinking) cursor.
I see that the cursor is really just a div of class "kix-cursor-caret" where the display property is just from "none" to "inline" on some sort of javascript timer somewhere that causes the cursor to appear to blink.
Does anybody have any idea which javascript line/command is causing the css property to be changed and displaying the blinking. Any help is greatly appreciated.
Currently, this works for me with Stylebot in Chrome:
.kix-cursor {
-webkit-animation-iteration-count: 0;
}
Looks like this can actually be solved with CSS. This rule worked for me:
.kix-cursor-caret: inline !important;
I suppose you could add this to some kind of user stylesheet, but I've actually never made one before.
None of the current answers worked for me using Firefox + Stylish.
I found a working answer at userstyles.org [1]:
.docs-text-ui-cursor-blink {
animation-name: none;
}
[1] https://userstyles.org/styles/125112/google-docs-disable-cursor-blink
Ian's answer didn't work for me. I used this CSS:
.kix-cursor-caret: {
opacity: 1 !important
}
and put it in a user stylesheet managed by the Stylebot Chrome extension.
This stopped the madness in the current version of Google Docs.
Related
You see, for some reasons some times I can't scroll to the bottom of the page (some times it happens in the middle too). Here is a screenshot:
Why does this happen? I can't create a jsfiddle, because I can't reproduce it since sometimes when I reload I have this problem, sometimes it works fine... It happens in a random way. I have no idea what might be causing this. It just stops scrolling before reaching the bottom. I know this might be classified as an open question but I just want to see, if anyone have had this problem. Any suggestions are appreciated..
UPDATED
Ok, here is the code I used to style the scrollbar and the scrolling, in CSS:
body
{
scrollbar-face-color: rgb(0,131,168);
scrollbar-track-color: rgba(0,131,168,0.8);
scrollbar-arrow-color: rgba(0,131,168,0.5);
scrollbar-shadow-color: rgb(0,131,168);
}
::-webkit-scrollbar-track
{
background-color: rgba(0,131,168,0.5);
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-thumb
{
background-color: rgb(0,131,168);
}
in the javascript, "vista" is the main container, I wrote:
var vistaProfesional = document.getElementById('vista');
vistaProfesional.style.overflow = "auto";
vistaProfesional.style.overflowX = "hidden";
vistaProfesional.style.height = 100 + '%';
I have been thinking, and I found out that, when I was doing the whole thing, I wanted it to have a smooth scroll, therefore I used the smoothWheel plugin because it is easy to use and since I am new to programming this seems a charm. However, right after the code abode I wrote:
$("#vista").smoothWheel();
to initialize it and though it works, it is when this plugin is active that I have this issue. If I comment that line of code and stay with the normal scroll, the problem described doesn't occur. As for one of the comments, yes, the zoom is already in 100%
I have seen this problem in several websites before. Set your zoom level to 100% to allow you to scroll to the bottom of the page.
Often when the zoom is not equal to 100% there is a partial row that is not shown, so the website thinks that you have not displayed the bottom of the page, so won't fetch the rest, or update the scroll bar properly.
I think you should specify height to body and html because as for as i know Scrolling plugins need that, so
body, html {
height: 100%;
}
If this does'nt solve your issue you may use Nice Scrolling Plugin which has a lot of properties, also it has been documented very well.
Hope this helps you.
I have some code that, until recently, worked on all browsers supporting CSS transforms. It broke in the newest Chrome (37). I found the issue. The transform from the computed style of an element is not accepted by other elements.
HTML
<div class="one">One</div>
<div class="two">Two</div>
<span></span>
CSS
div {
width: 100px;
height: 100px
}
.one {
background-color: red;
transform: rotate(90deg);
}
.two {
background-color: blue
}
Javascript
var oneStyle = window.getComputedStyle(document.querySelector('.one'));
var oneTransform = oneStyle.transform;
document.querySelector('span').innerHTML = 'Tranform value is: ' + oneTransform;
var twoStyle = document.querySelector('.two').style;
twoStyle.transform = oneTransform;
Here is a Fiddle: http://jsfiddle.net/acbabis/0v8v2xd7/
The issue is that the second (blue) element does not rotate the same as the first (red) element is even though I told it to in the javascript.
This looks like a bug to me. Is it?
EDIT: My actual code was working in every browser but the newest Chrome, but it appears my sample code breaks in all browsers. I'd still like to understand why the above problem occurs.
EDIT 2: Got it to break in only Chrome 37 again. My guess is that it doesn't like the scientific notation; but then why would the computed style have it?
This is a fairly common problem, similar errors happen with older versions of Chrome and other vendors as well.
The usual fix is, as Hashem mentioned partly, to either change the rotation to something like 89.9deg or force GPU rendering by doing something like translateZ(1px) in addition to the rotation. Demo. In the future we can likely force this as well by using the will-change property
This is because browsers have trouble rendering certain things and rendering elements rotated exactly 90 degrees is one of those things. Sometimes they need a little help :)
Okay, so I am working on a game-center. I got this cool idea so when I mouseover a hyperlink it shows a scary face (just for kickz & gigglez);
The problem is, it works perfectly in Firefox, but not Google Chrome? The demo is over here:
http://bouncygames.org/games/scary/
Please help... :(
*My Question: * *How come this is not working in Chrome, and how can I fix this?*
You don't need any javascript whatsoever, just use this css-declaration and it will work perfectly in all browsers:
#img{
display:none;
}
a:hover ~ #img{
display:block;
}
To make it more specific (so that it will not trigger on all hovered anchors), put a class onto your anchor and write ( e.g. .scary:hover ~ #img ).
Don't use onmouseover and onmouseout these are considered bad coding practice for several reasons.
Also, don't use the center tag, but use the css-declaration text-align:center instead.
In your script, instead of using img.style.visibility, use
img.style.display="none";
and
img.style.display="block";
make sure you also remove the visibility='hidden' attribute from your img tag or it won't work
There is a space between getElementById and ('img'), remove that and try again.
I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027
If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }
I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
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.