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)"
});
Related
Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?
I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/
I am trying to create a website in which the navigation is based on zoomable contents.
For instance, here is a screenshot of what you can see just after opening the webpage:
Then, I am using zoom.js for "zooming" the page and be able to read the text. However, after the magnification I got this:
The font-size is set to 9.4%, and as you can see it causes characters to be overlapped and not correctly positioned.
I tried to use some jQuery plugin like FitText.js or jQuery TextFill, just to see if they changed the font-size in some "magic" way that solve this issue; unfortunately they had effect in solving this visualization issue.
So my question is: how can I make the font looking "normal"? Is there any jQuery plugin or other JS library to manage this problem?
I am using Firefox, and I prefer to focus on using just this browser for the moment.
As suggested by Nico O and Ed Plunkett in the comments, the solution to my problem was to start with a very big page, in which everything is 20 times bigger than the desired page size. Then I added the following CSS to scale everything 20 times smaller:
body {
transform: scale(0.05);
transform-origin: 0 0;
}
When I need to zoom on a point, I simply add new transformation parameters in the CSS, by changing the transform property (I used jQuery, but it can be done in many other ways):
$("body").css("transform", "scale("+scale_factor+") translate("+translate_data+")");
Note also that I didn't need any additional library (with the exception of jQuery) to do this.
I am using the jquery touch punch library to enable users to move images around via touch. This works fine in Chrome and Firefox but will not work in IE.
I find if I hold down on the image in IE a small square appears and I am able to drag the image within the boundaries of this square but no further. I guess this is the right click function kicking in.
I have looked around and most people are saying to add '-ms-touch-action: none' to the css of the draggable div. So I added that to the style attribute of the draggable div and it did nothing. I am still unable to drag in IE.
I've looked around for another alternative but am unable to find one. I have included jquery 1.8.1, jquery ui 1.8.23 and touch punch 0.2.2. Any help will be greatly appreciated.
I noticed the htm page I was launching containing the draggable div contained a meta tag which was emulating the page in IE9. 2 and a half days I spent on that! -ms-touch-action:none will definitely work in IE.
If you have come here and are experiencing the same issue but the above paragraph didnt fix it for you, try this:
In IE click the cog and go to Compatabilty View Settings and uncheck the box for Display intranet sites in Compatability View.
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.
This video explains the problem best: http://www.screencast-o-matic.com/watch/cQ1Oc9f1L
Basically the directory is located here: http://www.ipalaces.org/uploaderprogress/grrrrrr.html
Is the problem piece using YUI.js as the uploading script. The YUI updates the table's row with new information on every event. So I have it update it with some CSS/HTML so that it does a progress loading bar. It works fine for all browsers but IE. I am not sure if this is a known rendering bug or what, and if there is even a fix for it?
the working-demo.html basically shows that if you just resize the div using javascript, IE renders it fine. Its just updated the table's row with new div information seems to cause rendering issues.
I couldn't reproduce the bug because you applied that fix. But I did take a look at the source. The way you are animating that progress bar just begs for bugs. Try compatibility mode in IE8 and you will see that it's shrinking instead of growing (because the element is centred) and that progressbar-completed element is 2x bigger then container. Same in Chrome and probably Safari.
This is how I would do it:
(source: maikumori.com)
Make A constant for example 250px. Then you have to make a background image with same size as A containing progress bar as if it was at 100%.
Then:
background-position = B = -1 * Math.Round(A * UploadedSize / FileSize)
Pros:
Takes less markup
If you make background image 2*A and B = B + A then you can have custom image for "blank" space therefore you can make fancier progress bars easily
Should work in most modern and not so modern browsers
Doesn't make a mess if user has css/javascript disabled
Cons:
A must be constant
Haven't tested =(
P.S.
Sorry for blinding colours, couldn't change them afterwards ... mspaint
I found a solution.
If I include this in the HTML then it will work fine:
<div class='progressbar-completed' style='visibility: hidden;'></div>
It seems like IE is having trouble maintaining the "memory" of the background file when its dynamically created in javascript.
Putting the DIV in the html itself seems to make the memory of the background file persistent in IE.