textarea עם מספור של השורות

liron50 · 6/1/18

textarea עם מספור של השורות

חיפשתי ברשת לגבי הנושא, כשהעדפה היא בלי להשתמש בתוספים
כלשהם של Jquery. מצאתי את הדוגמא הבאה:

קוד:

textarea{
    background: url([URL]http://i.imgur.com/2cOaJ.png)[/URL];
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
    border-color:#ccc;
}

לא ברור במדויק איך זה עובד.
הבנתי שהגישה היא לשים תמונה רקע מאחורה שבה יש את המספור, אבל אם
אני ניגש ללינק ב-Background, אני לא רואה שם מספור.

השאלה היא מכיוון שאני צריך קצת להגדיל את גודל המספרים, כך שיתאימו
לגודל הטקסט שאני משתמש בו.

פה נמצא הקוד:
https://jsfiddle.net/vaakash/5TF5h/

תודה

עוץליגוץלי · 6/1/18

משהו שמתבסס על הרעיון שלהם ...

קוד:

<!DOCTYPE html>
<html>  
	<head id='head'>
		<meta charset='utf-8'>
		<title>stam data</title>
		<style type='text/css'>
		    div.divNumbers { width : 350px;  display: inline-block ; vertical-align: top; }
		    div.divNumbers >ol >li     { background-color:#f0f0f0; }
		    div.divNumbers >ol >li.odd { background-color:#ffffff; }
		    textarea.txtData { display: inline-block; width: 400px; vertical-align: top; background-color: transparent; margin: 15px -310px;  height:300px; font-size:135%;} 
		</style>
     </head>
     <body>
        <div class='divContainer'>
            <div class='divNumbers'> 
                <ol>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                    <li></li>
                    <li class='odd'></li>
                </ol>
             </div>
            <textarea class='txtData'> </textarea>             
        </div>
     </body>
</html>

liron50 · 6/1/18

נראה לי פתרון בעייתי אם לא יודעים מראש את כמות השורות

והאם יש הסבר לשאלה המקורית- מאיפה מגיע המספור בדוגמא שצירפתי?

עוץליגוץלי · 7/1/18

בדוגמה שצרפת השורות מגיעות מקובץ תמונה

קובץ התמונה נמצא בכתובת http://i.imgur.com/2cOaJ.png

ואם אתה ממש רוצה - אני יכול ליצור קוד JS שיוסיף\יוריד שורות מהdiv המכיל. חשבתי שאתה רוצה קוד פשוט ככל האפשר. (אפשר גם לשחק עם גובה הcontainer כך שיסתיר\יחשוף את השורות ה"מיותרות").

liron50 · 7/1/18

עכשיו הבנתי . תודה

בהתחלה כשהסתכלתי בתמונה ראיתי רק רקע שחור.
פתחתי את התמונה עם עורך 'מתקדם' בשם Paint ואז רואים את המספרים.

textarea עם מספור של השורות

liron50

New member

עוץליגוץלי

New member

liron50

New member

עוץליגוץלי

New member

liron50

New member