3d: createRange geht nicht wenn die direction vom Rechts nach links

SELF-Forum

createRange geht nicht wenn die direction vom Rechts nach links

3d
– Informationen zu den Bewertungsregeln

Hallo,
Ich will so ein Skript basteln http://www.google.com/transliterate/indic
aber auf Arabisch. also die Text Richtung im Textfeld ist vom Rechts nach Links. Also dazu schreibt man noch dem Tag dir="rtl" . aber Wenn ich die einsetze kann ich nicht mehr maginLeft nicht mehr messen. Warum weiß ich nicht ?? ich suche dringend Lösung dafür.
Danke im voraus

Hier ein Beispiel, und noch Unten das ganze Skript.
Zweck vom Script ist das ein Select Auswahl mit mehrere Wörter unter einem Wort erscheint.

<html>  
<head>  
  
<script type="text/javascript">  
function zeige(){  
a= document.selection.createRange();  
b = a.offsetLeft;  
document.getElementById('zeiger').innerHTML = b;  
 }  
</script>  
  
</head>  
  
<body>  
  
<form name="fo">  
<textarea id="myDiv"  dir="rtl"  name="ar" onkeypress="zeige()" style="position:absolute;  left:50px; top:20px;  width:400px;  height:200px;" ></textarea>  
 </form>  
  
<div id="zeiger"></div>  
</body>  
</html>

Hier das Code funktioniert so lange im Textarea nicht dir="rtl" eingesetzt wird.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  
<head>  
  
    <script language="JavaScript" type="text/javascript">  
	  
	document.onkeyup =checkKeycode;  
	  
		function checkKeycode(e) {  
			if (window.event){	  
			var zer = window.event.keyCode;}  
			  
			else {if (e){zer = e.which;}}  
			 										  
			if(zer == 32){  
			document.getElementById('auswahl').style.display ='none';  
			}else{document.getElementById('auswahl').style.display ='block';}  
					  
		} //قراءة الحرف إذا ضغط الفراغ يخفي الإختيارات  
  
			  
        function initPosition(textBox) {  
            var storedValue = textBox.value;  
            textBox.value = ""; // تحديد المكان في البداية  
            textBox.select();  
				  
			// تحديد مسافة النص من اليمين و الشمال عن الصفحة  
            var caretPos = document.selection.createRange();  
            textBox.__boundingTop = caretPos.boundingTop;  
            textBox.__boundingLeft = caretPos.boundingLeft;  
			  
            textBox.value = " ";  
			// النص كفراغ لمعرفة معلومات وعرض الحرف الواحد في البدايد  
            textBox.select();  
				  
  
			// تحديد عرض حرف واحد وإرتفاع الحرف الواحد  
		    var caretPos = document.selection.createRange();  
            textBox.__boundingWidth = caretPos.boundingWidth;  
            textBox.__boundingHeight = caretPos.boundingHeight;  
            textBox.value = storedValue;  
  
        }  
  
        function storePosition(textBox) {  
			//textBox.__boundingLeft = 339,  
			//textBox.__boundingHeight  
		  
		    var caretPos = document.selection.createRange();  
			var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;  
			var boundingRight =(caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;  
			  
			  
			//لمشاهددة المسافة إختياري  
			document.getElementById('test').innerHTML = caretPos.offsetLeft;  
			textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;  
            textBox.__Column = (boundingRight / textBox.__boundingWidth) + 1;  
			  
	    }  
  
   function updatePosition(textBox) {  
		storePosition(textBox);  
	  
		B_Xpos= (textBox.__Column * 8)-90;  
		B_Ypos= (textBox.__Line * 16)+3;// 8.05 Boundingheight for one line  
	  
		document.getElementById('auswahl').style.marginLeft = B_Xpos;  
		document.getElementById('auswahl').style.marginTop= B_Ypos;  
		  
		document.forms[0].txtLine.value =  textBox.__Line;  
		document.forms[0].txtColumn.value = textBox.__Column;  
		  
  
	}  
  
  
  
		  
  
  
    </script>  
  
    <style type="text/css">  
#main{width:800px; height:1000px; background:#ccc; margin:0 auto; }  
#area{ margin:0 auto; margin-top:50px; position:relative; width:624px; border:2px solid red; height:250px}  
#editor{ margin:0 auto; width:624px; height:250px}  
#auswahl{position:absolute; z-index:1000; top:0px; left:0px;}  
	</style>  
  
</head>  
  
<body onload="initPosition(document.fo.ar)">  
<div id="main">  
  
	<div id="area">  
		<div id="auswahl">  
		<select name="Auswahl" size="5">  
			<option>Auswahl 1</option>  
			<option>Auswahl 2</option>  
			<option>Auswahl 3</option>  
			<option>Auswahl 4</option>  
			<option>Auswahl 5</option>  
		</select>  
		</div>  
  
		<div id="editor">  
			<form name="fo" id="fo">  
                    <textarea name="ar" id="ar"  
                        onmouseup="updatePosition(this)"  
                        onmousedown="updatePosition(this)"  
                        onkeyup="updatePosition(this)"  
                        onkeydown="updatePosition(this)"  
                        onfocus="updatePosition(this)"  
                        rows="15"  
                        cols="75"  
						>  
					</textarea>  
			  
                   			  
		 </div><!--/editor-->  
	</div>  
	<br><br><br><br>  
Line <input type="text" name="txtLine" style="width: 25px" readonly>  
Column <input type="text" name="txtColumn" style="width: 25px" readonly>  
offsetleft <input type="text" name="ol" style="width: 25px" readonly>  
   	  
			</form>  
		<div id="test"></div>	  
	<button onclick="alert(fo.ar.clientHeight);">clientHeight</button>&  
<button onclick="alert(fo.ar.clientWidth);">clientWidth</button>&  
<button onclick="alert(fo.ar.boundingWidth);">BoudingWidth</button>&  
<button onclick="alert(fo.ar.boundingHeight);">BoudingHeight</button>&  
  
  
</div><!--/main-->  
	  
  
</body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln