Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > TD height not adjusting to new breaks added to innerHTML

Reply
Thread Tools

TD height not adjusting to new breaks added to innerHTML

 
 
Fredyy
Guest
Posts: n/a
 
      07-13-2006
i am simply updating the innerHTML of a TD with text (replacing '\n'
with '<br />'). In firefox, if i add one line to the existing i.e.

Changing:
123 Your Street
Town, State 12345

To:
123 Your Street
Suite 123
Town, State 12345

The cell that is updated in the "grid" table will overlap the cell in
the row below it (note: it works fine on the bottom cell). I can't
figure out why this is happening. i can remedy it by displaying an
alert(), but i am trying to avoid that at all costs.

Here is an example script:

http://www.ladyrocket.com/test/admin/events2.php

Steps to replicate: Simply click edit link on the first "event" listed
and then change the address in the textarea by either adding or
removing a line of text and save it. You should see what i am talking
about if you are using firefox (i have version 1.5.04).

Note: if you click on the address cell of each event it will use the
same function to update the content of that cell to:
1
2
3
4
5
This was done to verify that function was working right.

Here are the two functions i am using:
function cbUpdate() {
if ( xmlCheckState(request) ) {
var json = request.responseText;

json = json.parseJSON();

if ( json['status'] == 1 ) {

updateElement("evt_address"+json["event_id"],json['event_address']);
updateElement("evt_date"+json["event_id"],json['event_date']);
updateElement("evt_name"+json["event_id"],"");
updateElement("evt_name"+json["event_id"],json['event_name']);

if ( json['event_website'].length == 0 ) {
updateElement("evt_website"+json["event_id"],"n/a");
} else {

updateElement("evt_website"+json["event_id"],json['event_website']);
}
}
}
}

function updateElement(name,text) {
var obj = document.getElementById(name)
var newtext = text.replace(/\n/g,"<br />");

obj.innerHTML = newtext;
}

Any advise would be appreciated.

Thanks, Fredyy

 
Reply With Quote
 
 
 
 
google1@eastontario.com
Guest
Posts: n/a
 
      07-13-2006
There's a reference to innerHTML in this file:
http://eastontario.com/conventions/count2.htm

Fredyy wrote:
> i am simply updating the innerHTML of a TD with text (replacing '\n'
> with '<br />'). In firefox, if i add one line to the existing i.e.
>
> Changing:
> 123 Your Street
> Town, State 12345
>
> To:
> 123 Your Street
> Suite 123
> Town, State 12345
>
> The cell that is updated in the "grid" table will overlap the cell in
> the row below it (note: it works fine on the bottom cell). I can't
> figure out why this is happening. i can remedy it by displaying an
> alert(), but i am trying to avoid that at all costs.
>
> Here is an example script:
>
> http://www.ladyrocket.com/test/admin/events2.php
>
> Steps to replicate: Simply click edit link on the first "event" listed
> and then change the address in the textarea by either adding or
> removing a line of text and save it. You should see what i am talking
> about if you are using firefox (i have version 1.5.04).
>
> Note: if you click on the address cell of each event it will use the
> same function to update the content of that cell to:
> 1
> 2
> 3
> 4
> 5
> This was done to verify that function was working right.
>
> Here are the two functions i am using:
> function cbUpdate() {
> if ( xmlCheckState(request) ) {
> var json = request.responseText;
>
> json = json.parseJSON();
>
> if ( json['status'] == 1 ) {
>
> updateElement("evt_address"+json["event_id"],json['event_address']);
> updateElement("evt_date"+json["event_id"],json['event_date']);
> updateElement("evt_name"+json["event_id"],"");
> updateElement("evt_name"+json["event_id"],json['event_name']);
>
> if ( json['event_website'].length == 0 ) {
> updateElement("evt_website"+json["event_id"],"n/a");
> } else {
>
> updateElement("evt_website"+json["event_id"],json['event_website']);
> }
> }
> }
> }
>
> function updateElement(name,text) {
> var obj = document.getElementById(name)
> var newtext = text.replace(/\n/g,"<br />");
>
> obj.innerHTML = newtext;
> }
>
> Any advise would be appreciated.
>
> Thanks, Fredyy


 
Reply With Quote
 
 
 
 
goulart@gmail.com
Guest
Posts: n/a
 
      07-13-2006
I ran into this problem frequently a while ago and solved it with this:

/** Force the page to redraw the layout and fix problems caused by
adding elements to the DOM */
_forcePageLayout = function ()
{
if (browser.isGecko || browser.isOpera) {
document.body.style.height = "1px";
document.body.style.height = "auto";
}
else if (!browser.isKHTML) {
document.body.style.display = "none";
document.body.style.display = "block";
}
}

you'll need to replace the browser conditionals with your own... but it
works fine. i test it on your page in Firefox.

 
Reply With Quote
 
Fredyy
Guest
Posts: n/a
 
      07-14-2006
i tried that, it worked but muddied up the outer table. I changed the
document.body.style.height to '100%' to maintain existing formatting
and it performs exactly the same.

any other ideas?



http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> I ran into this problem frequently a while ago and solved it with this:
>
> /** Force the page to redraw the layout and fix problems caused by
> adding elements to the DOM */
> _forcePageLayout = function ()
> {
> if (browser.isGecko || browser.isOpera) {
> document.body.style.height = "1px";
> document.body.style.height = "auto";
> }
> else if (!browser.isKHTML) {
> document.body.style.display = "none";
> document.body.style.display = "block";
> }
> }
>
> you'll need to replace the browser conditionals with your own... but it
> works fine. i test it on your page in Firefox.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
adjusting the height of an iframe to fit the contents. Cal Who ASP .Net 2 06-01-2010 04:11 PM
adjusting the height and width of innerHTML newbie Javascript 0 05-16-2007 08:38 AM
Adjusting Height (CSS templates) lejason@gmail.com HTML 2 04-02-2007 09:48 PM
Adjusting Input field size (height) Adam Smith HTML 3 09-09-2006 10:09 AM
Adjusting the width and height of a popup window Jesse Joseph Acosta Javascript 1 11-18-2003 09:33 PM



Advertisments