Size a region according to its content

[Davide]

Hello,

In my application users can the input of some text through TIWCGJQHTMLEditor which is shown in a TIWCGJQDialogEx.
After the user confirm the dialog I would like to present the html they inserted in a region.
Now I show the inserted HTML using a TIWCGJQLabel with RawText set to true. Is it the right way ?
How can I calculate the height of the region to present the HTML content in a "boxed" mode ?

Thank you,
Davide

[Jorge Sousa]

Hi

Now I show the inserted HTML using a TIWCGJQLabel with RawText set to true. Is it the right way ?

How can I calculate the height of the region to present the HTML content in a "boxed" mode ?

Being MyLabel1 the name of your TIWCGJQLabel, you can use

Code: Select all

$(<#MyLabel1#>).height()

In the BrowserParam.BrowserScript of a cg event

[Davide]

Thank you for your response but I don't understand...
In the ButtonsOptionsClick event of the dialog the users use to input his HTML text I create the region to show on the form and I need to size it to contain all the HTML (without any scroll bar) the user inserted.
Where I have to write the line of JQuery code you specify ?
Where and what is the BrowserParam.BrowserScript property ?
It wuold be perfect you could you write a little sample code so I can understand.
Thank you,
Davide

[Jorge Sousa]

Hi Davide

Please check this link

http://www.cgdevtools.com/cgforum/viewtopic.php?f=5&t=22


To know what BrowserParams are

How about you send us a little demo of what you have, and we complete it. Because it would take a lot of time to reproduce the same.

[Davide]

Hello,

I read the post you indicate me and if I understand right exists an Ajax roundtrip related to the event where I can catch the browser response.
Is it right ?
Can I assume the response is returned after the DOM is rendered ?

Attached there is a little demo about the project functionality I'm working on.
In the f_Main pas file there are two comments, one related to the region sizing question and one about the cleaning of the HTML editor content.

If will be possible to right sizing the dynamic created region I will carry on develop the IW CG version of my JQuery forum project.

Thank you,
Davide

[Jorge Sousa]

Hi

I read the post you indicate me and if I understand right exists an Ajax roundtrip related to the event where I can catch the browser response.

BrowserParams are not to catch browser response, but to config values to send from browser to send, besides values that are user changeable, like edits text, comboboxes selected index, checkbox check status, etc...

Can I assume the response is returned after the DOM is rendered ?

Again BrowserParams are not the response, the response is automatically generated when you change properties and call methods, if there is ajax support. The best way tyo check the response is looking at the ajax response in browser console.

I will back to you soon to answer about your demo

[Jorge Sousa]

Hi Again

Knowing that the content of the HTML is going to be added to a label tag, you can inspect this in browser debug tools.

trap the f_Main form's event OnRender, and code this:

Code: Select all

procedure TMainForm.IWAppFormRender(Sender: TObject);
var
  JS: TIWCGJScript;
begin
  JS:= TIWCGJScript.Create;
  try
    JS.Add('function labelContentHeight(content) {');
    JS.Add('  var s = $("<span/>").html(content).appendTo("body");');
    JS.Add('  var h = s.height();');
    JS.Add('  s.remove();');
    JS.Add('  return h;');
    JS.Add('}');
    PageContext.AddToJavaScriptOnce(JS.Text);
  finally
    JS.Free;
  end;
end;



This js function will be added to the page, and returns the height occupied by a label containing a given content.

if f_Main.OnCreate complete with this:

Code: Select all

  with AnswerDialog.JQDialogOptions.Buttons[0].OnClick.BrowserParams.Add do
  begin
    ServerName:= 'ContentHeight';
    BrowserScript:= Format('labelContentHeight(%s)',[AnswerHTMLEditor.JQHTMLEditorOptions.jsGetContent]);
  end;


Now, you can count with the param ContentHeight in Dialog Ok Button OnClick

Code: Select all

procedure TMainForm.AnswerDialogJQDialogOptionsButtons0Click(Sender: TObject; AParams: TStringList);
var
  Len: Integer;
   sl: TStringList;
begin
  Len:= StrToInt(AParams.Values['ContentHeight']);
  ---


This Len will allow to do some math to calculate the height the region needs to have.

[Jorge Sousa]

Hi

And we forgot one thing

In fact to clear the HTMLEditor you must set Content to space ' '

[Davide]

Hello,
following what you are suggested to me I finally get a value but it doesn't rappresent the height of the label where I write the HTML content.
I think the problem reside in the width of the label I use to output the HTML content which is different from the HTML editor width.
If I understand your code the labelContentHeight javascript function creates a label, assigns the html content, retrieves the height of the label and return it in the AParams argument.

Is it possible to set the "gost" label widht to reflect the width of the label where I output the HTML content ?
What does it mean "var s = $("<span/>").html(content).appendTo("body");" ?
I output HTML content to different labels with different size, is it possible to specify a different width for the "ghost" i the "BrowserScript" property the retrieve the right height corresponding to the specified width ?

Thank you,
Davide

[Jorge Sousa]

Hi Davide

I have to make a correction, it should be

"var s = $("<label/>").html(content).appendTo("body");

a label and not span, because TIWCGJQLabelEx uses a label tag, not a span tag, but i think the result (height) will be the same.

to get also the width you can use this function instead:

Code: Select all

procedure TMainForm.IWAppFormRender(Sender: TObject);
var
  JS: TIWCGJScript;
begin
  JS:= TIWCGJScript.Create;
  try
    JS.Add('function labelContentSize(content) {');
    JS.Add('  var s = $("<label/>").html(content).appendTo("body");');
    JS.Add('  var o = [];');
    JS.Add('  o["height"] = s.height();');
    JS.Add('  o["width"] = s.width();');
    JS.Add('  s.remove();');
    JS.Add('  return h;');
    JS.Add('}');
    PageContext.AddToJavaScriptOnce(JS.Text);
  finally
    JS.Free;
  end;
end;

Then replace the BrowserParams with this:

Code: Select all

with AnswerDialog.JQDialogOptions.Buttons[0].OnClick.BrowserParams.Add do
  begin
    ServerName:= 'ContentSize';
    BrowserScript:= Format('labelContentSize(%s)',[AnswerHTMLEditor.JQHTMLEditorOptions.jsGetContent]);
    SendJSon:= True;
  end;

and finally in the OnClick:

Code: Select all

procedure TMainForm.AnswerDialogJQDialogOptionsButtons0Click(Sender: TObject; AParams: TStringList);
var
  o: ISuperObject;
   sl: TStringList;
begin
  o:= SO(AParams.Values['ContentSize']);
  o.I['width']
  o.I['height']
  ...


I hope it helps