Ticket #119 (closed defect: fixed)

Opened 8 years ago

Last modified 8 years ago

Fullscreen + Styled Div Issues

Reported by: KaplanDigital Owned by: gogo
Priority: normal Milestone: Version 1.0
Component: Plugin_Fullscreen Version: trunk
Severity: normal Keywords: fullscreen, div, relative, absolute
Cc:

Description (last modified by gogo) (diff)

See forum topic here: http://xinha.gogo.co.nz/punbb/viewtopic.php?id=133

FullScreen? plugin does not work well when editor is enclosed in a relative (or absolutely) positioned element.

Change History

Changed 8 years ago by gogo

  • keywords div, relative, absolute added; div removed
  • description modified (diff)

Changed 8 years ago by niko

I wrote a little patch that moves the htmlarea wen making it fullscreen directly into document.body - and then back again.

It works nice in IE, but in FF i get all content lost :(

i need some help on this FF-error! 

Index: plugins/FullScreen/full-screen.js
===================================================================
--- plugins/FullScreen/full-screen.js   (Revision 73)
+++ plugins/FullScreen/full-screen.js   (Arbeitskopie)
@@ -160,6 +160,8 @@
   {
     // Unmaximize
     this._htmlArea.style.position = '';
+    document.body.removeChild(this._htmlArea);
+    this._parentNode.appendChild(this._htmlArea);
     try
     {
       if(HTMLArea.is_ie)
@@ -194,6 +196,12 @@

     // Maximize
     window.scroll
+
+    this._parentNode = this._htmlArea.parentNode;
+
+    this._htmlArea.parentNode.removeChild(this._htmlArea);
+    document.body.appendChild(this._htmlArea);
+
     this._htmlArea.style.position = 'absolute';
     this._htmlArea.style.zIndex   = 9999;
     this._htmlArea.style.left     = 0;

this page i used for testing the whole thing: (we could probably create a "tests" directory on svn where all these test-scripts can be placed) 

<html>
<head>

  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
    --  Xinha test-page for using the fullscreen-plugin within a absolute
    --  positioned div.
    --
    --  $HeadURL: svn://xinha.gogo.co.nz/repository/trunk/examples/full_example-body.html $
    --  $LastChangedDate: 2005-03-05 09:42:32 +0100 (Sam, 05 MÀr 2005) $
    --  $LastChangedRevision: 35 $
    --  $LastChangedBy: gogo $
    --------------------------------------------------------------------------->

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Example of Xinha</title>
  <link rel="stylesheet" href="full_example.css" />

  <script type="text/javascript">
    _editor_url  = document.location.href.replace(/examples\/fullscreen-inside-absolute-div\.html.*/, '')
    _editor_lang = "en";      // And the language we need to use in the editor.
  </script>

  <!-- Load up the actual editor core -->
  <script type="text/javascript" src="../htmlarea.js"></script>

  <script type="text/javascript">
    // This contains the names of textareas we will make into Xinha editors
    xinha_init =function()
    {
      xinha_plugins = ['FullScreen'];
      
      if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;

      xinha_editors = ['myTextArea'];

      xinha_config = new HTMLArea.Config();

      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);

      HTMLArea.startEditors(xinha_editors);
    }

    window.onload = xinha_init;
  </script>
</head>

<body>

  <form>
    <div style="position: absolute; top: 100px; left: 100px;">
    <textarea id="myTextArea" name="myTextArea" rows="10" cols="80" style="width:300px; height: 200px;">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
          velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
          ante elementum turpis. Aliquam nisl. Nulla posuere neque non
          tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
          parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
          Curabitur pharetra bibendum lectus.</p>

          <ul>
            <li> Phasellus et massa sed diam viverra semper.  </li>
            <li> Mauris tincidunt felis in odio.              </li>
            <li> Nulla placerat nunc ut pede.                 </li>
            <li> Vivamus ultrices mi sit amet urna.           </li>
            <li> Quisque sed augue quis nunc laoreet volutpat.</li>
            <li> Nunc sit amet metus in tortor semper mattis. </li>
          </ul>
    </textarea>
    </div>
    <p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p><p>much text</p>
  </form>

</body>
</html>

Changed 8 years ago by niko

(from http://xinha.gogo.co.nz/punbb/viewtopic.php?id=133)

how far i got:

  • bevore resizeing the editor gets deactivated: line 156 this.deactivateEditor()
  • after resizing the editor should get activated again: line 234: this.activateEditor()
  • but fails in htmlarea.js line 1407: this_doc.designMode = 'on' (the try-catch-block catches the exception)

if i remove the try-catch i get this on the JS-console: 

Fehler: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.designMode]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost/xinha/htmlarea.js :: anonymous :: line 1407"  data: no]
Quelldatei: http://localhost/xinha/htmlarea.js
Zeile: 1407

gogo, or anybody else, please help you wrote the original fullscreen...

Changed 8 years ago by gogo

  • version set to trunk
  • milestone set to Version 1.0

Changed 8 years ago by gogo

I think a better solution is to run back up the stack of tags from editor._htmlArea, and make everything positioned normally (el.style.position = 'static') remembering those we change, and revert them back to what they were previously when unmaximizing again.

Changed 8 years ago by gogo

Committed a fix in changeset:180 , my tests show it to work, can somebody who is seeing the problem in-real-life please test it before this is closed fixed.

Changed 8 years ago by niko

in my testfile it works... however this is not real-life test

Changed 8 years ago by gogo

  • status changed from new to closed
  • resolution set to fixed

I think this is fixed.

Note: See TracTickets for help on using tickets.