Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text not visible using innerHTML, div and Firefox 2.0.0.14.

Status
Not open for further replies.
Nicsoft

Nicsoft

Programmer
Jun 16, 2008
5
SE
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...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<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.substring(0, vl.length).toUpperCase()){
if(id.setSelectionRange){ //FF
id.value=ingred;
id.focus();
id.setSelectionRange(vl.length, ingred.length);
break;
}else if(id.createTextRange){ //IE
id.value=ingred;
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
---------------------------------------------------------------------
 
Sort by date Sort by votes
Hello, It's not spam. After I previewed I continued edit it. There was a lot of junk before as well but I did remove that stuff. Left the junk after the message.

Regards,
Niklas
 
Upvote 0 Downvote
[1] Rendering issues

[1.1] The single major rendering issue comes from your dynamicIput class. You've to make its positive relative.
[tt]
#dynamicInput{
position: [red]relative[/red]; top: 25px;
}
[/tt]
[1.2] And then there are two non-tagging typos: [tt][red]</br>[/red][/tt] at two positions. You have to correct those to [tt][blue]<br />[/blue][/tt]

[1.3] After correcting those non-tagging to proper tagging, you might shrink a bit the top to smaller px value, like 15px.

[2] Element reference issues

[2.1] You add those inputs (text and checkbox), you have to take some care to make their id and name non-colliding or compliant to dtd. Successive adding them would make a whole lot of id="ett" and id="articleCB". You should better do it like what art is doing.
[tt]
var newdiv = document.createElement('div');
var art = "article" + counter;
[blue]var ett = "ett" + counter;
var artCB = "articleCB" + counter;[/blue]
[blue]//temporarily so...(see 2.3)[/blue]
newdiv.innerHTML = "<div class='articleRow'><input id='[red]" + ett + "[/red]' type='text' name='" + art + "' value='" + document.getElementById('article').value + "'><input id='[red]" + artCB + "[/red]' type='checkbox' name='cb" + art + "'></div>";
document.getElementById(divName).appendChild(newdiv);
counter++;
[blue]//no need of this[/blue]
[red]//[/red]document.getElementById('ett').visibiblity="visible";
document.getElementById('article').value="";
[/tt]
[2.2] But proper set up of id's and names would have an impact on the rendering as your have style selector committing to articleCB id. Hence, to make thing proper, one way is to make it again a class with the same name of else. If you keep the same class name, you can do this.
[tt]
[red]/* [/red].articleRow #articleCB{ [red]*/[/red]
[blue].articleRow .articelCB[/blue]
position: absolute; left: 175px;
}
[/tt]
[2.3] Thereby you need to set up the class proper and revise the line in question to this.
[tt]
newdiv.innerHTML = "<div class='articleRow'><input id='[red]" + ett + "[/red]' type='text' name='" + art + "' value='" + document.getElementById('article').value + "'><input [blue]class='articleCB'[/blue] id='[red]" + artCB + "[/red]' type='checkbox' name='cb" + art + "'></div>";
[/tt]
With the above considerations, you should be able to get it cross-browser renderable and with id/name more ready for server-side and client-side referencing.
 
Upvote 0 Downvote
It is because your form is absolutely positioned, but has no dimensions (width or height).

Personally, I'd re-work your CSS so you do not need to absolutely position the form.

Two other things:

1. The code that sets the visibility of the "ett" element isn't needed, as the element will be visible by default.

2. If you add multiple rows, you'll end up with multiple elements with the same ID. This is wrong, and will only lead to problems later, so you should refactor this ASAP.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Wow, you are really helpfull guys you are :) Thanks! Especially thanks to that you directed me outside the scope of my question as well.

Honestly, I don't know if I got it working since I installed FF3 today and it did "overwrote" the old FF... But I managed to change to relative without any problem now so it looks good in both IE and FF.

One thing I don't understand, and I made a quick search on google but didn't find any good answer; why is relative positioning better than absolute. Control-freak as I am I'd like to decide exactly where the things should be positioned...

Are there any good patterns for how to work with this kind of development (general ones) so I have a greater chance making it correct from start?

Thanks again!

/Niklas
 
Upvote 0 Downvote
why is relative positioning better than absolute
Click to expand...

It's not better - it's just a different way of doing things.

Absolute positioning isn't completely bad, as you have to weigh its use up on the factors at the time... however, there are generally better ways to lay out a page so elements are flexible and scalable.

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
150
gmmastros
gmmastros
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
544
TheLazyPig
TheLazyPig
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
553
rogerte
rogerte
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
528
198709km
198709km
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top