Update: After posting on the TinyMCE forum (something I should have done before offering the bounty) the primary issue may be solved, but I'm still very much open to anything regarding the other issues of how to disable the resizable behavior (number 2 and 3 at the end of the post).
I am having trouble saving content with TinyMCE in IE8 (not other versions). In IE, certain elements in the editor have handles in each corner and draggable "borders", and when you focus in to start editing, a striped border may appear:
Problem:
If I submit the form while the thick border is still visible (state 3 in the image), the form will not save the content. I have to click into another area of the editor to make all the borders disappear, and then submit the form.
I'm Using the TinyMCE 3.4.6 jQuery package, I don't get this behavior in other browsers.
Update:
I've narrowed down the cause of the issue quite a bit and found a few things:
The problem occurs with or without the jQuery build, and does not depend on which tinymce plugins are in use.
The thicker "border" only seems to appear when there is a (min-)height/width applied to the element, either declared inline or from external CSS.
Using IETester, I was getting errors that claim 'length' is null or not an object when focus from the active element is lost; i.e. when you click anywhere outside the TinyMCE editor.
I did not see this error in a true IE8 install (something I currently can not access), however: this makes sense somewhat, considering the problem and workaround stated above. I had to hit submit twice and dismiss the warnings to get the form to post in IETester.
These borders and handles will actually extend outside of the editor/iframe:
I created a live bare-bones demo, here is the content of it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('textarea.tinymce').tinymce({
script_url : 'tiny_mce/tiny_mce.js',
content_css : 'test.css'
});
});
</script>
<form action="" method="post">
<textarea class="tinymce" name="content"><p>Testing</p></textarea>
<button type="submit">Submit</button>
</form>
/* Content of test.css */
p {
min-height: 24px; /* this line makes the handles appear */
background-color: #f00;
color: #fff;
}
How to reproduce:
Open the demo in IE8
Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.
Click on the element again, now the thick border appears and text can be edited.
Type a few characters, then click the submit button. The update will not be sent with the $_POST data. If you were to click another area inside the editor, removing the thick border, the data would be sent normally.
Questions/Issues:
Important: How can I get the form to post the edited text without requiring a workaround from the user?
Update: This seems to be resolved in a recent commit from the TinyMCE lead developer. I still have been unable to test on a real IE8 install, but this worked and silenced the errors in IETester.
Less important: Is there any way to prevent or remove the handles and draggable edges completely? I'm guessing this is a concern with IE's implementation of contentEditable and not so much TinyMCE, and may not even be the cause of the problem.
Extra: How can I prevent these handles from extending outside the editor?
Question 2 is due to the IE implementation of contentEditable, This is a ticket at their connect site requesting to fix it https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable (login required)
I don't know of any solution for Question 3, except to wait for a new IE. In the latest IE10 under windows8 they claim that it's fixed https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element (login required), but their solution is to hide the resizing handles always. Well, there's a solution and it's to avoid using any style while you're editing that forces the internal hasLayout flag for IE
alright this is a weird IE8 bug. I've found a workaround but still the tinymce team should fix this.
I've found out that before submitting the form you could set the content of the textarea to the content of the textarea... Sounds weird but calling the .html() triggers a tinymce event that returns the correct html.
$("button").click(function() {
$("textarea").html($("textarea").html());
});
There is apparently no way you can fix the second issue.
Here is an articles that explains it quite well: You can't remove those unless you remove the property that made them appear.
http://www.satzansatz.de/cssd/onhavinglayout.html
(search for the word "remove")
You can still improve a bit by using this on the container (the element with contenteditable):
function fixIE( editableContainer ) {
editableContainer.onmousedown = function ( e ) {
e = e || event;
( e.target || e.srcElement ).focus( );
};
editableContainer.onresizestart = function ( e ) {
e = e || event;
if ( e.stopPropagation ) {
e.stopPropagation( );
}
e.cancelBubble = true;
if ( e.preventDefault ) {
e.preventDefault( );
}
e.returnValue = false;
return false;
};
}
(Your element doesn't have to be a div)
The onmousedown will allow you to click only once to get to the state where you can write.
The onresizestart will prevent resizing.
if you give it hasLayout, it should work. try zoom:1;
Related
I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.
On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.
I'm using Bootstrap 4.1.
Here is my button code, but there's nothing unusual about it:
<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>
I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).
I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.
$(".btn").mouseup(function(){
$(this).blur();
});
Suggestions? Thanks!
Update
So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(
.btn.btn-info {
background-color: #17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
background-color: #117a8b;
border-color: #10707f;
}
You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:
document.querySelector(".btn").onmouseup = function(){
this.blur();
});
or:
document.querySelector(".btn").onmouseup = function(){
document.body.focus();
});
On a certain condition a button has to be disabled, if that condition is true and the button is disabled, the style that has to be applied is so in every browser including IE, on mouse over a prohibitory sign pops up, but in IE a click is still registered and executed. I could use a condition surrounding the event, so if the disable condition is true, that the code isn't executed, this works but isn't allowed because of architectural rules. The disable property is set, but still onclick is triggered.
I don't think my code will be of any value because my description of the problem is a global issue on every button in the application, so there has to be a IE specific solution which can be applied to the custom button control to set the property, but IE says that property disabled = true.
I had lots of problems with IE aswell so far, and they don't seem to have an end anytime soon. :)
Disabled is a property I always have to play around a lot to make it work how I want it.
Since you didn't provide any code, just try the following for disabling:
$("#yourid").attr("disabled", "disabled");
OR
$("#yourid").attr("disabled", true);
And this for enabling:
$("#yourid").attr("disabled", false);
OR
$("#yourid").removeAttr("disabled");
Just a guess as I'm not familar with Riot.js but the code you have there is malformed. the button tag wasn't closed. Browsers handle malformed code differently so you should check that.
<mdt-button>
<style scoped>
:scope[disabled],
:scope button[disabled] {}
</style>
<button type="{ type }" disabled="{disabled:disabled}"> </button>
<script>
this.on('update', function() {
this.faceIcon = this.opts['face-icon'];
this.disabled = this.opts.__disabled;
this.type = this.opts.type ? this.opts.type : 'button';
});
</script>
</mdt-button>
I am trying to do something like this.
I want to increase the height of textarea when the user clicks a button
For this I have made a button like this <a id="expandText" href="#"> Expand </a> and added the following javascript
$('#expandText').click(function () {
$('#id_text').animate({ height: "1000px" }, 500);
//$('#id_text').css( "height","+=85" );
});
I tried two things
One was to animate the height of the text box
The other was to change the css, but neither of them has worked
Edit:
I tried out all the things that have been given below, but it is still not working. Could it be possible because this textarea has a class = MCeEditor which makes this textarea an editor and not just a normal text area
You say the textarea has the class MCeEditor - so I'm guessing that's TinyMCE or something of that kind.
If so, use inspect element in whatever browser you're using (hold down CTRL to get browser context menu if TinyMCE context menu shows up), and navigate your way down through the editor till you find an iframe which is where the writing really happens. If I'm not mistaken, the selector .mceEditor iframe should do.
The reason for all thiss hazzle, is that TinyMCE hides your actual textarea, and creates an editor on its own. As you type into TinyMCE, it puts that text back into your textarea so you can retrieve it as expected from server side. So when you see the MCE editor, you aren't directly manipulating your textarea as one might expect.
It's weird, as your code should work. Do you have any error? Does it work when you run directly $('#id_text').animate({ height: "1000px" }, 500); on a JS console? One more thing is you may want to add "return false" like this
$('#expandText').click(function () {
$('#id_text').animate({ height: "1000px" }, 500);
return false;
});
to avoid the link action when you click on the link.
EDIT: you've added "this textarea has a class = MCeEditor", so I think you misunderstand something. What you see is an editable content (span or div), not a textarea (which is actually hidden). You need to resize this element (and probably you should use TinyMCE API to do that).
I've read the doc and you may just use:
$('#id_text').animate({ height: 1000 }, 500);
It's working fine. See here in JSFiddle http://jsfiddle.net/URkWu/
Let me know if you don't see the textbox animating.
I am adding some custom tabs to a jquery ui tab control.
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').attr("href","javascript:window.location='http://www.google.co.uk';");
Yes this is a bit of a hack, but it is exactly what i need and provide a nice way to give links back to previous parent pages.
jquery throws the following exception: "jQuery UI Tabs: Mismatching fragment identifier."
This is thrown on the line which appears to attempt to make the tab container visible in jquery ui (exact line wont help as is minified and custom build from official site).
Obviously im just redirecting but jquery has additional code to select the tab (which doesnt exist). In internet explorer, if the user has script errors enabled they will see the exception be thrown just before the window location changes, which I just cant have happen.
I cant put try catch around this code because it is the code inside jquery ui that throws the exception.
Is there anyway I can prevent this exception being thrown or achive the same thing but a different way without having to modified jquery ui ?
Edit: I am now wondering if there is a way to override the on click event hook placed on the element by jquery .. its definitely doing something there i cant see.
Edit: I have to log off now but I have made some progress, if someone can just help me get the right URL, using this code it prevents the exception, but redirects me to "http://myurl/undefined"
$('#tabs').bind('tabsselect', function(event, ui) {
if(ui.index<2) //ignore this will change to get current tab count -1 (so the end tab is left as it is
{
window.location=$('#'+ui.tab).attr("href"); //attr href is undefined, how do i use ui.tab properly to get the right url
return false;
}
});
It works OK for me in Chrome and IE8.
I also tried this code and it worked:
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').click(function() {
document.location='http://www.google.co.uk/';
});
Instead of changing href attribute, I add a handler on the click event of the new tab. This will make the tab to be switched and then the location changed.
From the jQuery UI docs:
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
Though, jQuery's tabs, uh, method, ought to support passing in a selector for the tabs and panels so you could just make things links, instead of having to kick against the pricks.
I am trying to bring focus to window using jquery. The window is popup initiated through a button click on the parent page. I have some ajax calls going on in the child window, so data is being updated. My issue is that if the user clicks on the parent window and hides the child behind it, i would like to bring that child window back to the forefront if there is a data update.
inside $(document).ready I wire up these events:
$(window).blur(function(){
WindowHasFocus =false;
}).focus(function(){
WindowHasFocus =true;
});
Then, if data is updated, I call this function:
function FocusInput(){
if(!WindowHasFocus){
$(window).focus();
}
}
This works as expected in IE8, but in FireFox(and all other browsers) the Blur event nevers seem to fire if I click the parent window. Any suggestions/ideas on how achieve this?
update:
Total facepalm moment:
In FireFox:
* Tools
* Options…
* Content tab
* Advanced button next to “Enable JavaScript”
* check the box named "Raise or Lower Windows"
Total facepalm moment: In FireFox:
Tools
Options…
Content tab
Advanced button next to “Enable JavaScript”
check the box named "Raise or Lower Windows"
This is turned off by default and must be enabled. And also, i assumed that since it didnt work in Chrome, that Safari would be the same, but you know what they say about "assuming" (it works in Safari, but not Chrome).
If there is not a strong reason for having two separate windows then it would be better use "modal boxes", there are plenty of examples out there and jquery plugins to achieve that. An example of such a plugin:
http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
You're absolutely correct. In FF, it seems as though it does fire the event, but at that same time, it seems like it doesn't register the element as being focused. Therefore the blur event can never be fired. Not sure I'm even explaining that correctly... The following code says it all.
In this example, the box is hidden by default, but is displayed via the focus event listener. In IE 8, if you click the main window, it still fires blur, but in FF it doesn't:
<html>
<head>
</head>
<body>
<div id="hiddenWin" style="width: 100px; height: 100px; background-color: Black; display: none;"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var something = 12;
something += 4;
$(document).ready(function()
{
$("#hiddenWin").focus(function()
{
$(this).show();
}
).blur(function()
{
$(this).hide();
}
)
$("#hiddenWin").focus();
}
);
</script>
</body>
</html>
For your need, would it be feasible to setup an overlay background? Something that is a fixed position # top:0 and left:0 which takes up the whole screen and has a z-index that is less than your popup. That way, when they click the overlay, it will steal focus and then you can hide everything...? IDK, just a suggestion. I'll keep messing around and see if I can figure it out. Good question. +1
It seems like you shouldn't care to know when your window got blurred. When your data updates, your window is either not in focus, in which case you want to focus it, or it is already in focus, and focusing it again doesn't hurt you any.
Yeah the modal thing is probably the way to go but sometimes you just need to do it the way you want to do it.
I would use plain old JavaScript. Name the window and the bring it into focus.
function showImageWindow(imageURL)
{
var imageWindow = window.open(imageURL,"My_Window","width=1000px,height=1000px,menubar=0,titlebar=0,toolbar=0,location=0,scrollbars=0,status=0");
imageWindow.focus();
}