Develop Reference

How to simulate _moz_resizing in Chrome or Edge?

So I want to image-resize client side, just like this, but not only in Firefox.
Notice that the element generated in Firefox, has the attribute _moz_resizing = "true".
The code is as simple as the following.
document.querySelector('p').contentEditable = true;
<p>
<img src='http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png' alt='stackoverflow icon'>
</p>
Is there any way to do this for Chrome and Edge too?. I you are going to provide a solution in JavaScript, I would like better if it's vanilla.js than jQuery. Thank you in advance.

You can achieve this in chrome by wrapping the image with a div and adding this styles..
resize: both;
overflow: auto;
demo:
https://jsfiddle.net/anwar3606/d184oqfz/
JQuery UI
JQuery UI provides very good resizability functions and is very easy to use.
https://jqueryui.com/resizable/#default

Google Docs Blinking Cursor "kix-cursor-caret"

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.

CSS pseudo class won't work when normal class is set from javascript, under FF

I have p.first_p:first-letter in my stylesheet, as I checked, it works well when class first_p is set in HTML. Problems start when I use javascript to find elements and then set their class.
Under Chrome and Opera it works fine (I need to check IE 8 and 9, and FF3).
FF 5.01 changes the class, but still pseudo class setting doesn't affect the element.
It seems that FF needs to 'refresh' css settings of element before pseudo class starts working, so I made rather dirty workaround - script replaces affected node with its clone.
Is there a better way to solve that issue? Some way to make FF recalculate everything it knows about node? Also that workaround isn't enough for IE 7.
Edit: yeah, pseudo-element not pseudo-class, my bad

It is definitely a bug. A possible work-around would be changing the display style of the element. Unfortunately, this needs to be done delayed, after the previous style change applied:
element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
element.style.display = '';
}, 0);
Demo: http://jsfiddle.net/pvEDY/3/

You're running into https://bugzilla.mozilla.org/show_bug.cgi?id=8253

Is it possible to not use javascript?
I'm guessing that you're applying first_p to the first paragraph of particular elements.
It possible for you to use the :first-child selector instead?
I'm not sure if this will work, but you could try something like the following, assuming you want to apply this to children of divs with class "copy"
.copy p:first-child:first-letter{
color: #abcdef; /* or whatever */
}
this definitely works and you don't need javascript, except for crappy old IE.
Alternatively you could try this:
.element p:first-letter{
font-size: 20px;
}
.element p + p:first-letter{
font-size: inherit;
}
This css makes any paragraph that is not preceded by another paragraph have a styled first letter. Would that solve your problem?
Wait, you want it to work in Firefox. Try this:
.element p:first-of-type:first-letter{
font-size: 20px;
}
It selects the first matching element. The :first-of-type pesudo-element is supported by Firefox, Opera, Chrome and Safari according to SitePoint's page for :first-of-type

Disable grey border on anchor (<a>) elements on focus

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.

Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx

It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i

Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!

For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/

Does this not work?
a
{
border: 0;
}

a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.

a {
outline: 0 none !important;
border: none;
}

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.