Question : JQuery accordion with TinyMce

Hi, I'm using a JQuery accordion which works beautifully in IE8/FF/Chrome. I then embed two TinyMce textboxes inside the accordion which works perfectly in Chrome.

However in IE8, and only randomly, the rightmost TinyMce textarea is losing its left and right border and the bottom background color of grey is shown as white (see attachment). I've tried reinstalling TinyMce in case it was a setting I'd changed, still the same issue. I've also tried making the boxes really narrow to rule out a width problem. The only fix that worked was to remove the JQuery CSS and JS files.

Has anyone ever come across this before and if so, how did you fix it?!

Thanks in advance

Attachments:

tinymce.jpg (35 KB) (File Type Details)

TinyMce

Answer : JQuery accordion with TinyMce

Hi kbit,
Sorry for the late reply but I almost lost track of this question.

jQuery sometimes doesn't like any scripts within an accordion and known to cause some issues, and it seems it had some issues with TinyMCE.

However I was able to get a workaround by running the tinyMCE after the accordion header has been clicked, so this way it executes after the accordion has been initiated and it seems to have fixed the problem

Try the code below

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0029)http://www.tonic4business.ie/ -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    </script>
    <title>Test</title>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#accordion").accordion({active:false});
         $("#ahead").click(function(){
                tinyMCE.init({
		        mode : "textareas",
		        theme : "simple"
	        });
          });
      });
</script>

</head>
<body>
    <form name="changejdcomp" method="post" action="updates.php">
    <table width="100%">
        <tr>
            <td>
                <div id="accordion">
                    <table width="100%" border="0">
                        <tr>
                            <td id="ahead">
                                Click here to show the detail
                            </td>
                        </tr>
                    </table>
                    <div style="position: relative; z-index: 10">
                        <table width="100%" border="0">
                            <tr>
                                <td>
                                    Field 1:
                                </td>
                                <td>
                                    Field 2:
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <textarea name="Field1"></textarea>
                                </td>
                                <td>
                                    <textarea name="Field2"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>