RTL Related Issue

Discussion in 'JavaScript' started by jimmydoontecforum, Jan 4, 2008.

?

qewfqwefqwefqewfqwf

  1. qewfdwefqwefqwef

    0 vote(s)
    0.0%

  2. qwefqwefqwefqwef

    0 vote(s)
    0.0%
0
  1. #1
    RTL Related Issue

    --------------------------------------------------------------------------------

    Please this is the code i want to fix. I am providing you the html, where you have two buttons RTL(Right To Left) and LTR(Left To Right) and if you see when you press LTR and you notice div follows the mouse and place itself to the edge of the linked text but when you press RTL (Arabic, Hebrew, Persian, etc...) it is not working i have tried all the ways and i have fixed it also but when i integrate it within another JSP files it does not work.Can somebody fix it or suggest me. I'll Really Appreciate.Thanks in Advance.

    :cool:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>RTL Solution</title>
    <!--<link rel="stylesheet" type="text/css" href=""/>-->
    <script type="text/javascript" src="position.js"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript" src="popup.js"></script>
    <style type="text/css">
    .rtl{
    direction:rtl;
    }
    .ltr{
    direction:ltr;
    }
    </style>
    <script type="text/javascript">
    function moveXYZ(obj,event,divID){
    try{
    var classname = document.body.className;
    if(classname == 'rtl'){
    getObj(divID).style.position = "absolute";
    getObj(divID).style.top = Position.get(obj)[1] + "px";
    //var left = Position.get(obj)[0] - Position.get(getObj(divID))[2] - 21;
    var left = getMouseXY(event)[0] - (Position.get(obj)[0] - Position.get(getObj(divID))[2]);
    //alert("left of text : "+ +"\nwidth of text : " + Position.get(obj)[2] + "\nPage width : " + Popup.pageWidth());
    getObj(divID).style.left = left + "px"

    // var left = Popup.pageWidth() - (150 + Position.get(obj)[2]);
    // alert("left of text : "+ Position.get(obj)[0] +"\nwidth of text : " + Position.get(obj)[2] + "\nPage width : " + Popup.pageWidth());
    // getObj(divID).style.left = left + "px"
    }else{
    getObj(divID).style.position = "absolute";
    getObj(divID).style.top = Position.get(obj)[1] + "px";
    getObj(divID).style.left = (Position.get(obj)[0] + DOM.getOuterWidth(obj)) +"px";
    }
    }catch(err){
    alert(err.description);
    }
    }

    function getObj(id){
    return document.getElementById(id);
    }

    function changeStyle(styleName){
    document.body.className = styleName;

    }
    function getMouseXY(e){
    var IE = document.all?true:false;
    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    var tempX = 0;
    var tempY = 0;
    if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX;
    tempY = event.clientY;
    }
    else { // grab the x-y pos.s if browser is NS
    tempX = e.pageX;
    tempY = e.pageY;
    }
    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}
    var arr = [tempX,tempY];
    return arr;
    }
    </script>
    <body class="ltr">
    <input type="button" value="RTL" onClick="changeStyle('rtl')"/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="LTR" onClick="changeStyle('ltr')"/>
    <br/><br/><br/><br/><br/><br/>
    <a href="#" onmouseover="moveXYZ(this,event,'xyz')" onmousemove="moveXYZ(this,event,'xyz')" id="link1">Link One</a>
    <div id="xyz" style="position:absolute;width:134px;border:1px solid #000">
    toiyut ytrpyio trpyoiry
    </div>
    <br/>
    <a href="#" onmouseover="moveXYZ(this,event,'xyz')" onmousemove="moveXYZ(this,event,'xyz')" id="link2">Link Two</a>
    <br/>
    <a href="#" onmouseover="moveXYZ(this,event,'xyz')" onmousemove="moveXYZ(this,event,'xyz')" id="link3">Link Three</a>
    <br/>
    <br/>
    <br/>
    <br/>
    Lorem ipsum
    <a href="#" onmouseover="moveXYZ(this,event,'xyz')" onmousemove="moveXYZ(this,event,'xyz')" id="link4" style="">Link Four</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" onmouseover="moveXYZ(this,event,'xyz')" onmousemove="moveXYZ(this,event,'xyz')" id="link5">Link Five</a>
    </body>
    </html>
    :cool:

    If You can fix it that''' be great...
     
    jimmydoontecforum, Jan 4, 2008 IP