div till end of the page

[es131245]

Remaking file editor on PHP && JS.

 

My page is made on a 100% height & width table with 4 rows (header, navigation, content and footer).

Header, navigation and footer rows are fixed sized, but content isnt.

 

Content looks like:

h1,input path, Ok button and table till end of the page (till footer).

Table contains 2 horizontal sections.

1 is a file browser (ul with li's controlled buy JS) and a textarea (file content).

 

Here are the questions:

1) How can I make a scrollable DIV till footer?

position:relative; bottom:0; dont work.

2) Is DIVonly tag that can be scrolled? (body, doent count)

3) Is there any way to make text editor colorfull? Like code boxes on site but editable?

Here are the source

PHP:

<?php if(!isset($CFG['user']['privileges'])||!is_array($CFG['user']['privileges'])||!in_array('editor',$CFG['user']['privileges'])) {require('error');  return;} if(isset($_GET['path'])&&$_GET['path']!='') {$_GET['path']=$CFG['editorPath'].$_GET['path'];  if($_GET['path']!=preg_replace('/(/../|/~/)/','/',$_GET['path']))  {print($_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME'].'?path='.preg_replace('/(/../|/~/)/','/',$_GET['path']));   exit();}  if(!is_readable($_GET['path'])){exit('Файл недоступен');}  else{exit(file_get_contents($_GET['path']));}} if(isset($_POST['path'])&&$_POST['path']!=''&&$_POST['path']==preg_replace('/(/../|/~/)/','/',$_POST['path'])&&is_readable('/media/www'.$_POST['path'])&&isset($_POST['content'])) {if(!is_writable('/media/html'.$_POST['path'])){exit('Нет прав на запись этого файла');}  $fp=fopen('/media/html'.$_POST['path'],'w');  fwrite($fp,str_replace('n','n',$_POST['content']));  fclose($fp);  header('HTTP/1.0 204 No Content');  header('Content-Length: 0',true);  exit('Успешно');} $CFG['content']['style']='         td#content table{width:100%;}'."n"; $CFG['content']['style'].='         td#content table:first-of-type tr td:last-child{color:gray;width:100px;}'."n"; $CFG['content']['style'].='         td#content table:first-of-type tr td:last-child input{color:gray;width:100%;}'."n"; $CFG['content']['style'].='         td#content table tr td input{font-weight:bold;width:99%;}'."n"; $CFG['content']['style'].='         td#content table#editor{border-collapse:collapse;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child{width:40px;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child div{height:600px;overflow-x:auto;overflow-y:auto;white-space:nowrap;width:40px;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child ul{list-style-type:none;margin:0;padding:0 20px;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child ul li:not(.permission){cursor:pointer;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child ul li.permission{color:red;cursor:default;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child ul li img{padding-right:4px;vertical-align:bottom;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:first-child li span.filename{display:none;}'."n"; $CFG['content']['style'].='         td#content table#editor tr td:last-child textarea{background-color:#c9c9c9;border-top-left-radius:5px;box-shadow:0 0 9px gray;font-family:YesSerif;font-size:15px;font-style:italic;font-weight:bold;height:600px;overflow:scroll;text-align:left;text-shadow:0 0 1px white;vertical-align:top;width:100%;}'."n"; $CFG['content']['body']='        <h2>Редактор</h2>'."n"; $CFG['content']['body'].='        <table class="exclusion">'."n"; $CFG['content']['body'].='         <tr>'."n"; $CFG['content']['body'].='          <td>'."n"; $CFG['content']['body'].='           <input type="text" disabled="disabled" value="path" />'."n"; $CFG['content']['body'].='          </td>'."n"; $CFG['content']['body'].='          <td>'."n"; $CFG['content']['body'].='           <input type="button" value="сохранить" />'."n"; $CFG['content']['body'].='          </td>'."n"; $CFG['content']['body'].='         </tr>'."n"; $CFG['content']['body'].='        </table>'."n"; $CFG['content']['body'].='        <table class="exclusion" id="editor">'."n"; $CFG['content']['body'].='         <tr>'."n"; $CFG['content']['body'].='          <td>'."n"; $CFG['content']['body'].='           <div>'."n"; function listing($path,$spaces) {for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}  $GLOBALS['CFG']['content']['body'].='           <ul>'."n";  if($path=='../backUp'||$path=='../WWW.ru')  {for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}   $GLOBALS['CFG']['content']['body'].='            <li class="permission"><img src="/source/images/editor/denied.png" alt="permission denied" />Отказано в доступе</li>'."n";   for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}   $GLOBALS['CFG']['content']['body'].='           </ul>'."n";   return;}  foreach(scandir($path) as $tmp)  {if($tmp=='..'||$tmp=='.'){continue;}   for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}   if(is_dir($path.'/'.$tmp)==true){$GLOBALS['CFG']['content']['body'].='            <li class="directory"><img src="/source/images/editor/directory.png" alt="directory" />'.$tmp.((is_dir($path.'/'.$tmp)==true)?(''):('</li>'))."n";}   else   {$fo=finfo_open(FILEINFO_MIME_TYPE);    $mime=finfo_file($fo,'/media/html/localhost/'.$path.'/'.$tmp);    finfo_close($fo);    if(in_array($mime,array('text/plain','text/html','text/x-php','application/xml','inode/x-empty','text/x-shellscript'))){$GLOBALS['CFG']['content']['body'].='            <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />'.$tmp.'</li>'."n";}    else{$GLOBALS['CFG']['content']['body'].='            <li class="file"><img src="/source/images/editor/file.png" alt="file" />'.$tmp.'</li>'."n";}    unset($fo,$mime);}   if(is_dir($path.'/'.$tmp))   {listing($path.'/'.$tmp,($spaces+2));    for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}    $GLOBALS['CFG']['content']['body'].='            </li>'."n";}}  for($i=0;$i<$spaces;$i++){$GLOBALS['CFG']['content']['body'].=' ';}  $GLOBALS['CFG']['content']['body'].='           </ul>'."n";} $CFG['content']['body'].=listing('..',0); $CFG['content']['script']='         $(document).ready(function()'."n"; $CFG['content']['script'].='         {$('td#content ul li:not(.permission)').hover(function()'."n"; $CFG['content']['script'].='          {$(this).css({'color':'blue'});'."n"; $CFG['content']['script'].='           $(this).children().css({'color':'black'});},'."n"; $CFG['content']['script'].='          function()'."n"; $CFG['content']['script'].='          {$(this).css({'color':'black'});});'."n"; $CFG['content']['script'].='          $('td#content td ul li>ul').css({'display':'none'});'."n"; $CFG['content']['script'].='          $('td#content ul li.directory').each(function()'."n"; $CFG['content']['script'].='          {$(this).css({'list-style-image':'url(/source/images/editor/closed.gif)'});'."n"; $CFG['content']['script'].='           $(this).children().css({'list-style-image':'none'});});'."n"; $CFG['content']['script'].='          $('td#content td ul li.directory').click(function(data,handler)'."n"; $CFG['content']['script'].='          {if(data.target==this)'."n"; $CFG['content']['script'].='           {$(this).find('>ul').slideToggle(350,function()'."n"; $CFG['content']['script'].='            {if($(this).parent().children('ul').css('display')=='none'){$(this).parent().css({'list-style-image':'url(/source/images/editor/closed.gif)'});}'."n"; $CFG['content']['script'].='             else{$(this).parent().css({'list-style-image':'url(/source/images/editor/opened.gif)'});}});}});'."n"; $CFG['content']['script'].='        $('td#content table:first-of-type td:first-child input').val('path');'."n"; $CFG['content']['script'].='        $('textarea').val('');'."n"; $CFG['content']['script'].='        var text='';'."n"; $CFG['content']['script'].='        $('td#content table tr td ul li.edit').click(function()'."n"; $CFG['content']['script'].='        {$('textarea').val('');'."n"; $CFG['content']['script'].='         for(var u=$(this);u.parent().parent().length>0;u=u.parent().parent())'."n"; $CFG['content']['script'].='         {$('textarea').val('/'+u.clone().children().remove().end().text()+'n'+$('textarea').val());}'."n"; $CFG['content']['script'].='         $('td#content table:first-of-type tr td:first-child input').val($('textarea').val().replace(/(^/$|^s+|n|n|r)/gm,''));'."n"; $CFG['content']['script'].='         $('textarea').html('Загружается');'."n"; $CFG['content']['script'].='         $.ajax('."n"; $CFG['content']['script'].='         {type: 'GET','."n"; $CFG['content']['script'].='          url: '/editor?path='+$('td#content table:first-of-type tr td:first-child input').val(),'."n"; $CFG['content']['script'].='          success: function(html)'."n"; $CFG['content']['script'].='          {$('textarea').val(html);'."n"; $CFG['content']['script'].='           text=html;'."n"; $CFG['content']['script'].='           $('textarea').bind('keyup change',function()'."n"; $CFG['content']['script'].='           {if($('textarea').val()!=text){$('td#content table:first-of-type tr td:last-child input').css({'color':'red'});}'."n"; $CFG['content']['script'].='            else{$('td#content table:first-of-type tr td:last-child input').css({'color':'gray'});}});}});});'."n"; $CFG['content']['script'].='          $('td#content table:first-of-type tr td:last-child input').click(function()'."n"; $CFG['content']['script'].='          {if($('td#content table:first-of-type tr td:last-child input').css('color')=='rgb(255, 0, 0)')'."n"; $CFG['content']['script'].='           {$('textarea').attr({'readonly':'readonly'});'."n"; $CFG['content']['script'].='            $.ajax('."n"; $CFG['content']['script'].='            {type: 'POST','."n"; $CFG['content']['script'].='             data: {"path":$('td#content table:first-of-type tr td:first-child input').val(),"content":$('textarea').val()},'."n"; $CFG['content']['script'].='             url: ''.$_SERVER['SCRIPT_NAME'].'','."n"; $CFG['content']['script'].='             success: function(html)'."n"; $CFG['content']['script'].='             {if(typeof(html)!='undefined'&&html!='Успешно'){alert(html);}'."n"; $CFG['content']['script'].='              else'."n"; $CFG['content']['script'].='              {text=$('textarea').val();'."n"; $CFG['content']['script'].='               $('td#content table:first-of-type tr td:last-child input').css({'color':'gray'});'."n"; $CFG['content']['script'].='               $('textarea').removeAttr('readonly');}}});}});'."n"; $CFG['content']['script'].='               $('table#editor tr td:first-child').hover(function(){$('table#editor tr td:first-child,table#editor tr td:first-child div').stop().animate({'width':'250px'},500);},function(){$('table#editor tr td:first-child,table#editor tr td:first-child div').stop().animate({'width':'40px'},500);});});'."n"; $CFG['content']['body'].='           </div>'."n"; $CFG['content']['body'].='          </td>'."n"; $CFG['content']['body'].='          <td><textarea name="content" spellcheck="false" wrap="off"></textarea></td>'."n"; $CFG['content']['body'].='         </tr>'."n"; $CFG['content']['body'].='        </table>'."n";?>

HTML result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru"> <head>  <base href="http://" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="robots" content="index, follow" />  <title>TITLE</title>  <link rel="icon" href="/favicon.ico" type="image/x-icon" />  <link rel="shortcut" href="/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />  <link rel="stylesheet" type="text/css" href="/source/style.css" />  <script type="text/javascript" src="/source/script/jquery.js"></script>  <script type="text/javascript" src="/source/script/script.js"></script> </head> <body>  <table class="page">   <tr class="head">    <td class="head">     <table class="head">      <tr>       <td class="heading"><h1></h1></td>       <td class="authorization">       </td>      </tr>     </table>    </td>   </tr>   <tr class="navigation">    <td class="navigation">     <table class="navigation">      <tr>       <td><a href="/"><img src="/source/images/index.png" alt="index" /> Индекс</a></td>       <td><a href="/service"><img src="/source/images/service.png" alt="услуги" /> Услуги</a></td>       <td><a href="/contacts"><img src="/source/images/contacts.png" alt="контакты" /> Контакты</a></td>      </tr>     </table>    </td>   </tr>   <tr class="body">    <td class="body">     <table class="body">      <tr>       <td id="content">        <style type="text/css">         td#content table{width:100%;}         td#content table:first-of-type tr td:last-child{color:gray;width:100px;}         td#content table:first-of-type tr td:last-child input{color:gray;width:100%;}         td#content table tr td input{font-weight:bold;width:99%;}         td#content table#editor{border-collapse:collapse;}         td#content table#editor tr td:first-child{width:40px;}         td#content table#editor tr td:first-child div{height:600px;overflow-x:auto;overflow-y:auto;white-space:nowrap;width:40px;}         td#content table#editor tr td:first-child ul{list-style-type:none;margin:0;padding:0 20px;}         td#content table#editor tr td:first-child ul li:not(.permission){cursor:pointer;}         td#content table#editor tr td:first-child ul li.permission{color:red;cursor:default;}         td#content table#editor tr td:first-child ul li img{padding-right:4px;vertical-align:bottom;}         td#content table#editor tr td:first-child li span.filename{display:none;}         td#content table#editor tr td:last-child textarea{background-color:#c9c9c9;border-top-left-radius:5px;box-shadow:0 0 9px gray;font-family:YesSerif;font-size:15px;font-style:italic;font-weight:bold;height:600px;overflow:scroll;text-align:left;text-shadow:0 0 1px white;vertical-align:top;width:100%;}        </style>        <h2>Редактор</h2>        <table class="exclusion">         <tr>          <td>           <input type="text" disabled="disabled" value="path" />          </td>          <td>           <input type="button" value="сохранить" />          </td>         </tr>        </table>        <table class="exclusion" id="editor">         <tr>          <td>           <div>           <ul>            <li class="directory"><img src="/source/images/editor/directory.png" alt="directory" />.snap             <ul>             </ul>            </li>            <li class="directory"><img src="/source/images/editor/directory.png" alt="directory" />SITE1             <ul>              <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />amp.html</li>              <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />authorization.html</li>              <li class="file"><img src="/source/images/editor/file.png" alt="file" />favicon.ico</li>              <li class="directory"><img src="/source/images/editor/directory.png" alt="directory" />files               <ul>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />0213.jpg</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />0213f.jpg</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />plata.jpg</li>               </ul>              </li>              <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />index.html</li>              <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />index.php</li>              <li class="directory"><img src="/source/images/editor/directory.png" alt="directory" />source               <ul>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />background.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />bar.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />close.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />cm2000.zip</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />exit.png</li>                <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />jquery.js</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />print.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />remove.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />rough.png</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />store.png</li>                <li class="edit"><img src="/source/images/editor/edit.png" alt="edit" />style.css</li>                <li class="file"><img src="/source/images/editor/file.png" alt="file" />submit.png</li>               </ul>              </li>             </ul>            </li>           </ul>           </div>          </td>          <td><textarea name="content" spellcheck="false" wrap="off"></textarea></td>         </tr>        </table>        <script type="text/javascript">         $(document).ready(function()         {$('td#content ul li:not(.permission)').hover(function()          {$(this).css({'color':'blue'});           $(this).children().css({'color':'black'});},          function()          {$(this).css({'color':'black'});});          $('td#content td ul li>ul').css({'display':'none'});          $('td#content ul li.directory').each(function()          {$(this).css({'list-style-image':'url(/source/images/editor/closed.gif)'});           $(this).children().css({'list-style-image':'none'});});          $('td#content td ul li.directory').click(function(data,handler)          {if(data.target==this)           {$(this).find('>ul').slideToggle(350,function()            {if($(this).parent().children('ul').css('display')=='none'){$(this).parent().css({'list-style-image':'url(/source/images/editor/closed.gif)'});}             else{$(this).parent().css({'list-style-image':'url(/source/images/editor/opened.gif)'});}});}});        $('td#content table:first-of-type td:first-child input').val('path');        $('textarea').val('');        var text='';        $('td#content table tr td ul li.edit').click(function()        {$('textarea').val('');         for(var u=$(this);u.parent().parent().length>0;u=u.parent().parent())         {$('textarea').val('/'+u.clone().children().remove().end().text()+'n'+$('textarea').val());}         $('td#content table:first-of-type tr td:first-child input').val($('textarea').val().replace(/(^/$|^s+|n|n|r)/gm,''));         $('textarea').html('Загружается');         $.ajax(         {type: 'GET',          url: '/editor?path='+$('td#content table:first-of-type tr td:first-child input').val(),          success: function(html)          {$('textarea').val(html);           text=html;           $('textarea').bind('keyup change',function()           {if($('textarea').val()!=text){$('td#content table:first-of-type tr td:last-child input').css({'color':'red'});}            else{$('td#content table:first-of-type tr td:last-child input').css({'color':'gray'});}});}});});          $('td#content table:first-of-type tr td:last-child input').click(function()          {if($('td#content table:first-of-type tr td:last-child input').css('color')=='rgb(255, 0, 0)')           {$('textarea').attr({'readonly':'readonly'});            $.ajax(            {type: 'POST',             data: {"path":$('td#content table:first-of-type tr td:first-child input').val(),"content":$('textarea').val()},             url: '/editorP',             success: function(html)             {if(typeof(html)!='undefined'&&html!='Успешно'){alert(html);}              else              {text=$('textarea').val();               $('td#content table:first-of-type tr td:last-child input').css({'color':'gray'});               $('textarea').removeAttr('readonly');}}});}});               $('table#editor tr td:first-child').hover(function(){$('table#editor tr td:first-child,table#editor tr td:first-child div').stop().animate({'width':'250px'},500);},function(){$('table#editor tr td:first-child,table#editor tr td:first-child div').stop().animate({'width':'40px'},500);});});        </script>       </td>      </tr>     </table>    </td>   </tr>   <tr class="footer"><td class="footer"></td></tr>  </table></body></html>

Edited November 18, 2013 by es131245

[Hadien]

first off, I should say that you shouldn't use tables to design a page layout. Tables are meant for tabular data, not this, which is one of the reasons this is giving you such a hard time. now to answer your questions.

 

1. Its messy (since you can't use fluid sizes), but you can make the content row scroll on your screen.

<div class="container">    <div class="scroller">        <table class="page">            ...        </table>    </div></div> 

div.container {    position:relative;    padding-top: /*amount of vertical pixels head and navigation take up*/;    padding-bottom: /*amount of vertical pixels footer takes up*/;}div.scroller{    overflow: hidden;    height: 100%;}tr.head, tr.navigation, tr.footer{    position: absolute;}tr.head{top:0px;}tr.navigation{top:/*amount of vertical pixels head takes up*/}tr.footer(bottom:0px;} 

you'll need to figure out the pixel values for the commented sections in the CSS. This should work for you but do know that its very inflexible, the nature of using tables for layouts. It will break if someone tries to use accessibility functions like ctrl+ to zoom in or other similar operations.

 

2. technically, barring extra contraints, almost any element in html can be made scrollable. usually, however only elements that naturally have display:block become scrollable.

 

3. its possible, though it'll require a lot of work. I would start off with a pre tag, and overlay that with an invisible textarea tag (position: absolute; opacity:0;). Add a onkeyup event listener to the textarea to have it string.escape(this is important!) it's value, then perform string.replace() to wrap reserved words in span tags with appropriate classes, and then pass that string to the pre tag's innerHTML.

 

it should be stressed when you create an online editor (well... when you use any textfield) that you escape the string, not only in javascript but at least in php, if php or your database were to process it. if someone were to type in "</textarea><script>...",they could immediately start messing with webpage itself (XSS javascript isn't immediately dangerous to your website, but its nonetheless unwanted and is usually the herald of worse things to come). Its not funny the first time when you come across the username:

 

'jeff";DROP ALL TABLES;'

 

(of course another good measure is to prevent the majority of database privileges from the users)

[es131245]

Thanks for replay.

Few things that wasnt mentioned.

1 Scrollable should be only div box, but div box isnt only content in "#content". As we see there is a header and a form.

Moreover it should be fluid because of window size. I cant fix it becasue header, nav and footer is in px's. and content is the rest.

2 Eureka! I shouldnt use textarea! I should make any other tag (ex. DIV) and colors can be added by CSS. Input can be managed with keyDown.

 

"</textarea><script>..." problems will be solved using html unicode. Ex

• «<» → «<»
• «>» → «>»