Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with element behavior generate by JavaScript

    Discription:
    In this page there are two buttons
    One is generated by HTML code, it display as “codedButton”.
    Other one is generated by run time using javascript. That display as “vertualButton”.
    GenarateBut() function used for that purpose.
    insertChar() function used for insert character to the cursor position of the text area.
    In that function separately coded for IE and firefox.
    We have to give id of the text area and character as arguments of the function.
    Above both buttons (vertualButton and codedButton) are calling same function at click event.

    Problem:
    In IE
    When I click codedButton it works very fine.
    But if I click virtualButton, more times it giving unexpected error.
    And also in both firefox and IE both cursor is hiding when I click the vertualButton.

    Plz help me soon. I have only another three weeks to finish my project
    Thank all
    Nayana adassuriya


    ------------------------------web page------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0045)http://localhost:1972/13-08-2008/HTMLPage.htm -->
    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Untitled Page</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <script type=text/javascript>

    function GenarateBut(){
    key=document.createElement('input');
    key.setAttribute('id', 'butMain');
    key.setAttribute('type', 'button');
    key.setAttribute('value', 'vertualButton');
    key.setAttribute('width', 100);
    key.onmousedown = function() { checkCursorPosition('tArea','@'); }
    document.getElementById('DIV1').appendChild(key);
    }

    function countChars(text) {
    var numOfChar = 0;
    for (var i = 0; i < text.length; i++) {
    if (text.charAt(i) != '\r') {
    numOfChar++;
    }
    }
    return numOfChar;
    }

    function insertChar(id,myValue) {
    var staPos = 0;
    var endPos = 0;
    var tArea=document.getElementById('tArea');
    if (document.selection) { // IE…
    tArea.focus();
    var range = document.selection.createRange();
    var dupRange = range.duplicate();
    dupRange.moveToElementText(tArea);
    var selText = range.text;
    range.text = '|%|';
    var index = dupRange.text.indexOf('|%|');
    staPos = countChars((index == -1) ? dupRange.text : dupRange.text.substring(0, index));
    endPos = countChars(selText) + staPos;
    range.moveStart('character', -3);
    range.text = myValue;
    //set cursor position
    var sel = tArea.createTextRange();
    sel.collapse(true);
    sel.moveStart('character', staPos+myValue.length);
    sel.moveEnd('character', 0);
    sel.select();
    } else if (tArea.selectionStart || (tArea.selectionStart == '0')) { // Mozilla/Netscape…
    staPos = tArea.selectionStart;
    endPos = tArea.selectionEnd;
    tArea.value = tArea.value.substring(0, staPos)+ myValue+ tArea.value.substring(endPos, tArea.value.length);
    tArea.selectionStart = (staPos+myValue.length);
    tArea.selectionEnd = (staPos+myValue.length);
    }
    tArea.focus();
    }
    </script>

    <style type=text/css>
    body {
    font-size: 1em; font-family: verdana, helvetica, arial, sans-serif; background-color: #4a88be;
    }
    textarea {
    left: 250px; overflow: auto; width: 500px; font-family: "iskoola pota"; position: absolute; top: 30px; height: 100px;
    }
    #div1 {
    left: 400px; width: 50px; position: absolute; top: 600px; height: 50px; background-color: #000000;
    }
    #butmain {
    left: 20px; width: 200px; position: absolute; top: 20px; height: 50px; background-color: #ffffff;
    }
    </style>
    </head>
    <body onload="genarateBut()">
    <textarea id=tarea name=textarea></textarea>
    <div id=div1 style="left: 247px; width: 507px; top: 285px; height: 167px">
    <input type="submit" name="submit" value="codedButton" onclick="javascript:insertChar('tarea','@')" style="position:absolute; left: 200px; width: 200px; top: 100px; height: 50px">
    </div>
    </body>
    </html>
    Last edited by nayana4u; 08-17-2008 at 05:24 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    there are anumber of case errors in function and ID names and a missing function 'checkCursorPosition'.

    Please correct the basic errors and repost.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •