How can I disable _moz_resizing? - javascript

I am using nicEdit editor and I have added my own custom image resizing script to it. But I want to disable the default _moz_resizing that appears in Firefox.
I wanted to have finer control over the image being resized. ( Eg: Allow only the image to resize and inherit the width of the parent container. )
So I wrote a custom script. But since Firefox has its own image resizing control (_moz_resizing) how do I disable it? If there is no way to do so, I have a very simple workaround where I detect if Firefox and turn off my custom script and use the _moz_resizing instead.
But I won't have fine-grained control and I will have to rely on there being browser bugs in Firefox. :(

In Firefox, the native image resizing controls can be disabled using the enableObjectResizing command. This command must be executed after designMode has been set to "on".
document.designMode = "on";
document.execCommand('enableObjectResizing', false, 'false');
Once the native resizing controls are disabled, you should not see the _moz_resizing attribute appear. It shows up as a side effect of the native controls, but the presence or value of the attribute does not directly affect the controls themselves. Its only purpose is to trigger a thin black outline around the element being re-sized.
Most in-browser rich text editors use an iframe to display their content. If the CSS position of this iframe changes (say, from static to absolute), it will undo the effects of the enableObjectResizing command. The command may be repeated to turn the native controls back off again. This is very confusing, as there is no indication that this should be the case, but it is. If enableObjectResizing is not working for you, be sure you are setting it after you set any CSS position values.
Also note that the "enableObjectResizing" command will affect the resizers for images AND absolutely positioned elements, if any such exist within the editable content area.
I have prepared a minimal test page the illustrates a working example of this.

You can disable this by going to about:config in Firefox - change browser.enable_automatic_image_resizing to false.

Related

How to avoid bouncing up the elements when typing in input at android web

I have a problem that I can not solve, in Android devices when you put text in the input,
so due to the appearance of the keyboard,
all the elements are popped up - I attached pictures.
How can this problem be solved?
How can I turn off the default css settings of browsers in Android? Because in iOS it works great
Thank you :)
Popping up keyboard is resizing Activity by default, thus it has less space so web content also, and it looks like in your case web content still trying to "fill whole space" trying to align to bottom, center etc. - that depends of params set in CSS
Consider preventing this Activity resizing by android:windowSoftInputMode="adjustNothing" line in manifest
<activity
android:name="your.package.activity.WebActivity"
android:windowSoftInputMode="adjustNothing"
... rest of params
with this line your Activity won't be resized, instead of that keyboard will show up "above" your View (so will cover half of content). you can also try with adjustPan value, for sure not adjustResize. some doc in HERE

Resizing table not possible when using tinymce control

We are using TinyMCE 4 and our users are annoyed that you cannot take a table within the tinymce textarea editor drag its width and height and change it. It appears this is not possible with tinymce. The only way you can adjust the table is by going to the menu selecting table and modifying values for width / height in pixels. Most of our users don't even know what a pixel is.
I tried using a plugin that someone wrote for TinyMCE 3.3
http://sourceforge.net/p/tinymce/plugins/163/
But this plug in does not work for TinyMCE 4, nor do I understand how to modify this plug in to make it work for 4.0. Someone asked here quite recently (wasn't me) but got no response:
http://www.tinymce.com/forum/viewtopic.php?id=34454
Whats currently happening in chrome is when you try to grab a corner of the table and drag and drop it never drops, nor does it ever release the table. It ends up in a state of confusion...you basically cannot release the drag of the table it keeps getting bigger and smaller as you move your mouse - but you can never let go and release it to get the size you want.
The only other option I am finding is to disable resizing, but this would disable resizing for everything:
http://www.tinymce.com/wiki.php/Configuration:object_resizing
Is there any way around this? We are using the TinyMCE 4 main package and not the jquery package if that helps.
There have been alot of bugs with TinyMCE and chrome it's why i now use CKEditor but apparently the bug your on about has been fixed in 4.1 so update your tinyMCE version and it should work for you.
http://www.tinymce.com/tryit/full.php
Another point is that if you looked at the documention you provided you can allow resizing for anything but tables.
http://www.tinymce.com/wiki.php/Configuration:object_resizing
This options allows you to turn on/off the resizing handles on images,
tables or media objects. This option is enabled by default and allows
you to resize table and images. You can also specify a CSS3 selector
of what you want to enable resizing on.
tinymce.init({
...
object_resizing : "img"
});
Could be
tinymce.init({
...
object_resizing : ":not(table)"
});

Force a div to show up and overlay whatever is in fullscreen

I have a Chrome extension that inserts a menu into the page, but whenever any flash or html5 video player goes full screen, anything outside of the video player is invisible.
Could I have two objects in full screen at the same time (one over the other), or is there another way to do this? I would rather not have to insert the html specifically into different places on different websites, because of the large variety of existing video players. The solution should be universal for all video players.
EDIT:
Since then, a lot of the web has moved to using html5 instead of flash, so this has become a very possible thing to do on almost all websites.
Here was the code I ended up writing and using. Hopefully this will help someone:
document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
//first, grab the page's fullscreenElement
var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;
if(fse){//if there is a fullscreened element
fse.appendChild(menu);//append the menu inside the fullscreened element
}else{//if nothing is in full screen
if(window.self !== window.top){//if we are in an iframe
menu.remove();//hide menu if we are in an iframe
}else{//if we arn't in an iframe
document.body.insertBefore(menu, document.body.firstChild);//show menu
}
}
});
This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.
It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.
edit: to expand further;
With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.
With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.
If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)
Unfortunately as #Collin Grady mentioned this is not possible since the browser takes care when you play a fullscreen video.
You can still simulate full screen tho! You could modify the size of the video to adjust to the size of the screen (or whatever size you require). By doing this you still have control on your elements and can show your menu on top of the video.
There is an article in CSS Tricks that could guide you on how to modify the dimensions of a youtube video. The writer of the article wrote a jQuery plugin too called FitVids.JS
By Simulating full screen you could show what you want on top.
I hope this helps

Dynamically Resizing Flash Object to Fill Window

I have a Flash/Flex object (Flashlight-VNC), which I would like to dynamically resize to fit the entire window after pressing a button in the Flex app. This would preferably happen without restarting the Flex app (and therefore the VNC session). I would just use the built-in Flash fullscreen mode, however Adobe's somewhat silly security restrictions prevent keyboard input while in fullscreen mode.
How exactly can I do this? I'm already using SWFObject to embed the SWF, if that helps. I am open to any solution utilizing ActionScript, JavaScript, or both, however I am not all too familiar with ActionScript or Flex, and the AS-based solutions I have found involve extending a "Sprite" object to add resize functionality, which Flashlight-VNC does not seem to use.
I see that there is a very similar question already posted on this site, however the accepted answer points to one dead link and another link that does not answer my question (my goal is to resize the object on command, not from when the page loads).
Thanks!
This really isn't related to flash. It's more about HTML DOM manipulation. You want to make sure your Flash SWF is set to use 100%/100% and then when you want to trigger "full screen" mode change the html container to be placed in the top-left-most corner and have a width/height of 100% of screen.
You'll still have the browser's toolbars and tabs and address bar, but if you want keyboard input there aren't many options.

Mobile Safari SVG rendering issues with raphaeljs

I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with.
The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's the same thing it does when you click on a hyperlink. The gray box is very ugly in this situation. Is there any css property to tell mobile safari not to do that?
The second issue is with animations. For the duration of any animation, mobile safari adds an ugly black border to the svg canvas. It's only visible while an animation is in progress, and it is only visible on the bottom & right edges of the canvas. Any idea how to fix this?
This was taken using a copy & paste of one of the demos on raphael's page, just with a white background.
This article has some useful tips, namely...
Disabling the selection flash:
Turns out there is a way to turn this off through the use of the WebKit CSS property -webkit-tap-highlight-color, and setting the alpha of the color to 0, in my Javascript code does the trick:
document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
and Disabling the "action" pop-up:
The second thing I needed to disable is the “action” popup that appears if you tap and hold the contents of the UIWebView for a few seconds. This is also controlled through a CSS property called -webkit-touch-callout, and setting that to “none” in this case does the trick:
document.documentElement.style.webkitTouchCallout = "none";

Categories