How to simulate _moz_resizing in Chrome or Edge? - javascript

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

Related

Simple Mouseover not Working in Chrome?

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.

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.

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 do I make an area unclickable with CSS?

Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.
There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;
These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/
I think this one works too:
CSS
pointer-events: none;
if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.
Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.

Firefox page "moves" when hiding/showing divs

We have a web page with this general structure:
<div id="container">
<div id="basicSearch">...</div>
<div id="advancedSearch" style="display: none">...</div>
<div>
With this CSS:
#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}
We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:
var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
advanced.style.display = '';
basic.style.display = 'none';
} else {
basic.style.display = '';
advanced.style.display = 'none';
}
This all works great in IE.
It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?
Is it causing a scrollbar to appear / disappear?
Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.
What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }
Here's a good related SO post.
Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).
On a side note jquery has some really nice animations that make this switch much nicer on the eyes.
I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.
Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.
With firebug you can view what may be different between the two divs.
From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.
One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.
I hope this helps.

Categories

Resources