Is it possible to add numbers to the text area? It shall be on the left side with blue or red background, width shall be around 20px. Thanks.
The best way I can think of right now is to simulate it with two textareas that are glued together. The first one is narrow (width = 10-15px) and the second one is 'real'. The first will contain a number and a new line at each row. I guess it could be done to look pretty good but i'm not sure if it will be easy to make it cross-browser.. Edit: I was wondering if it can be made to look good. Here's what i've made: <textarea style='width: 20px; background: #aae; padding: 0; margin: 0; border: 0; overflow: hidden'> 1: 2: 3: 4: 5: 6: </textarea> <textarea style='padding: 0; margin: 0; border: 0;' onScroll=''> This is the real deal </textarea> Code (markup): This will do it, but you will also need to change the scroll position of the first textarea when the user scrolls the second one. This is not so hard to be done in javascript, but it seems like firefox (and maybe other browsers) doesn't support the onscroll event on textareas This means that if you do it this way people with FF will not be able to see the lines correctly. I guess it can still be useful to you if you want to show a fixed text, cause this way you will know how many lines to show and there's no need of scrolling.
it is possible. use a CSS positioned image as the background which has the line numbers pre-defined. what i tend to do is write a js loop that prints numbers from 1 to 100 with the right font and spacing that fits with the contents of the area, then i screen grab it, combine it together in photoshop/paint and produce one long image
Hey, Check out http://sourceforge.net/projects/codepress This is a simple script that will allow you to format code (colours) and apply line numbers down the left hand side. Very useful tool. Regards, Steve
Hi Steve and sorry to @sugarland for hijacking the thread Steve my code wont edit the css file when I implement codepress I cant find any directions from the codepress sites, you wouldn't happen to know what I'm missing ? <?php session_start(); if ($_SESSION["UserID"] == "") { header("Location: security.php"); } require_once("../config.php"); $sql = "SELECT theme FROM `template`;"; $result = mysql_query($sql) or die("MySQL error!"); $rs = mysql_fetch_array($result); $theme = $rs["theme"]; if ($_POST["css"] != "") { $file = "../templates/$theme/default.css"; $fh = fopen($file, 'w') or die("Can't open file!"); fwrite($fh, stripslashes($_POST["css"])); fclose($fh); } ?> <html> <head> <title>phpBeta Backend</title> <link rel="stylesheet" type="text/css" href="css/res.css"> <script src="codepress/codepress.js" type="text/javascript"></script> </head> <body background="images/background01.gif"> <legend>CSS Editor</legend> <form method="post" action="css.php"> <fieldset> <textarea name="css" id="css" class="codepress linenumbers-on css" style="width: 100%; height: 400px;"><?php require_once("../templates/$theme/default.css"); ?> </textarea> </fieldset> <br /> <fieldset> <legend>Review & Update</legend> <center><button class="buttonclass" type="submit">Update CSS</button></center> </fieldset> </form> </body> </html> PHP:
How doesn't it edit? - Does it not show the CSS code in the textarea, wont physically let you click and edit or doesn't submit? Regards, Steve
here is a quick one i done that works in ie7 and ff3 .. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style type="text/css"> #container { width: 20px; float: left; color: Gray; font-family: Courier New; font-size: 14px; overflow: hidden; height: 85px; position: relative; top: 5px; } #divlines { position: absolute; } #text1 { overflow-x: scroll; height: 99px; font-family: Courier New; font-size: 14px; } </style> </head> <body> <div id="container"> <div id="divlines"> </div> </div> <textarea id="text1" cols="50" wrap="off">first second third fourth fifth sixth seventh eighth ninth</textarea> <script type="text/javascript"> var lines = document.getElementById("divlines"); var txtArea = document.getElementById("text1"); window.onload = function() { refreshlines(); txtArea.onscroll = function () { lines.style.top = -(txtArea.scrollTop) + "px"; return true; } txtArea.onkeyup = function () { refreshlines(); return true; } } function refreshlines() { var nLines = txtArea.value.split("\n").length; lines.innerHTML = "" for (i=1; i<=nLines; i++) { lines.innerHTML = lines.innerHTML + i + "." + "<br />"; } lines.style.top = -(txtArea.scrollTop) + "px"; } </script> </body> </html> Code (markup): It could do with some improvements but the idea is there.
It shows and allows edits inside the window, however submit wont save any changes, after some further investigating I don't think codepress will do for this.