1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Show line numbers in textarea

Discussion in 'JavaScript' started by sugarland, Feb 25, 2009.

  1. #1
    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.
     
    sugarland, Feb 25, 2009 IP
  2. itvn

    itvn Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sorry, but it's impossible :D
     
    itvn, Mar 5, 2009 IP
  3. xlcho

    xlcho Guest

    Messages:
    533
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    xlcho, Mar 6, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    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 :)
     
    dimitar christoff, Mar 6, 2009 IP
  5. findsandeep

    findsandeep Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here is an example to do it in IE.

    http://www.avidinteractive.com/forum/showthread.php?p=2270
     
    findsandeep, Apr 30, 2009 IP
  6. Steve136

    Steve136 Peon

    Messages:
    240
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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
     
    Steve136, Apr 30, 2009 IP
  7. pixmania

    pixmania Peon

    Messages:
    229
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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:
     
    pixmania, Apr 30, 2009 IP
  8. Steve136

    Steve136 Peon

    Messages:
    240
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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
     
    Steve136, May 1, 2009 IP
  9. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #9
    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.
     
    camjohnson95, May 2, 2009 IP
  10. pixmania

    pixmania Peon

    Messages:
    229
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    pixmania, May 3, 2009 IP