SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Text in form not visible when using innerHTML, div and Firefox 2.0.0.14

    Hello,

    While it works in IE7 and Mozilla Firefox 1.7.12, in Firefox 2.0.0.14 this problem occurrs: Run the included code (beginner so it's not the nicest code...). Write something in the input field and press Enter. In the list below you will see the text you wrote and a checkbox turning up. Well, you should at least and you do if you use the two former browsers mentioned above but not FF 2.0.0.14 . The checkbox is visible but not the actual text.

    Here comes the wired part; if you click where the text is supposed to be and write something, the text actually do appear . Is this a FF-bug? The text is there but not visible. Could anyone please tell me how to do in order to make the text beeing visible at once when you press the Enter key. I am soon crying getting this site working for both IE and FF...


    <html>
    <head>
    <title>Checkbox problems</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css" media="screen">


    body {
    margin-left: 175px;
    margin-top: 175px;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }

    .articleRow{
    position: absolute; left: 0px;
    position: relative; top: 5px;


    }


    .articleRow #articleCB{
    position: absolute; left: 175px;

    }


    .hr {
    height:1px; color: #000000 ;
    position: absolute; left: 300px;
    position: absolute; top: 250px;
    width: 200px;
    }

    #dynamicInput{
    position: absolute; top: 25px;
    }

    #dynamicInput input{
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-size: small;

    }

    #articleForm{
    position: absolute; left: 300px;
    position: absolute; top: 230px;
    }

    #inputArt {
    position: absolute; left: 0px;
    position: absolute; top: 200px;

    }

    #articleLabel{
    position: absolute; top: 175px;
    position: absolute; left: 250px;
    }

    #article {
    position: absolute; left: 300px;
    position: absolute; top: 175px;
    width: 200px;
    }

    #addArticleButton {
    position: absolute; left: 525px;
    position: absolute; top: 175px;
    width: 100px;

    }

    #tabellVara{

    position: absolute; left: 300px;
    position: absolute; top: 225px;
    border: 0px;
    padding: 0px;

    }

    #tabellCB{

    position: absolute; left: 450px;
    position: absolute; top: 225px;
    border: 0px;
    padding: 0px;
    }



    #submitButton{
    position: absolute; left: 225px;
    position: absolute; top: 5px;
    width: 100px;
    }


    </style>

    <script type="text/javascript">

    var ingred=new Array("Iron", "Zink", "Platina");

    var counter = 0;

    function addArticle(divName){

    if(!(document.getElementById('article').value=="") && !(document.getElementById('article').value==" ")){

    var newdiv = document.createElement('div');
    var art = "article" + counter;
    newdiv.innerHTML = "<div class='articleRow'><input id='ett' type='text' name='" + art + "' value='" + document.getElementById('article').value + "'><input id='articleCB' type='checkbox' name='cb" + art + "'></div>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
    document.getElementById('ett').visibiblity="visible";
    document.getElementById('article').value="";
    }
    }

    function suggestText(id, evt){

    if(evt.keyCode==13){


    addArticle('dynamicInput');
    id.focus();

    }else if(evt.keyCode!=16){

    if(evt.keyCode!=8){

    var vl=id.value;
    var start = id.value.length;

    for(var i = 0; i<ingred.length; i++){
    if(vl.toUpperCase()==ingred[i].substring(0, vl.length).toUpperCase()){
    if(id.setSelectionRange){ //FF
    id.value=ingred[i];
    id.focus();
    id.setSelectionRange(vl.length, ingred[i].length);
    break;
    }else if(id.createTextRange){ //IE
    id.value=ingred[i];
    var tR = id.createTextRange();
    tR.moveStart("character", vl.length);
    tR.moveEnd("character", 0);
    tR.select();
    id.focus();
    break;
    }
    }
    }
    }


    }

    }


    </script>
    </head>

    <body>

    <label id="articleLabel" for="article">Add</label><input id="article" name="article" value="" onkeyup="javascript:suggestText(this, event);"><button id="addArticleButton" onClick="addArticle('dynamicInput');"> Add</button>

    <p id="tabellVara">Article</p><p id="tabellCB">Remove</p>
    <hr class="hr">

    <form id="articleForm" method="POST">
    <input id="submitButton" type="submit" value="Save"></br>

    <div id="dynamicInput">

    </div>

    </br>

    </form>

    </body>
    </html>


    Best Regards,
    Niklas

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Enclose your code in [code] tags.

    2. Can we see screenshots or a link to a live demo? Most people don't have the time to rebuild the page with your provided code.

    3. Users will be prompted to upgrade to Firefox 3 soon, so there isn't too much to worry about.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication


Tags for this Thread

Bookmarks

Posting Permissions

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