Hello uniguisyriusz
i made something like yours, but i create html-DIV s in a UniHTMLFrame ... it is very fast and clean :-)
in my example - the "cell" is very big (i use it in many ways - here as menu-point display) ... highlite, image scale funtions and so on are "classic CSS things"
but you can create hundreds of small div´s for your solution
grid.webm
Here is my code - so you can see what i mean and how i solved it:
by the way - for the"click-event" on a div - i send the event to mainform-OnAjaxEvent !!!!
sent -> onclick="javascript:MainForm.mask.show();ajaxRequest(MainForm.form,'''+ajax_befehl+''',[''param0='+ziel+'''])">');
to -> procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); -----> if EventName='xxx' then begin
procedure TMAINMENU.zeichne_Small_Picture;
var panel_width:Integer;
panel_height:Integer;
image_width:Integer;
image_height:Integer;
begin
setze_farben;
panel_width:=245;
panel_height:=138;
image_width:=245;
image_height:=138;
abszand_panel:=10;
abstand_zeile:=30;
if last_thing = 1 then
begin
m_left:=m_left - panel_width;
m_top:=m_top+ 145;
last_thing:=2;
end
else
begin
m_left:=m_left + abszand_panel;
last_thing:=1;
if m_left + abszand_panel+ panel_width > mainform.display.Width-10 then // och passe nicht rein !
begin
m_left:= 10;
m_top:=m_top+last_top+abstand_zeile;
last_top:=0;
end;
end;
if m_left=10 then m_left:=20;
if m_left <0 then m_left:=20;
UniHTMLFrame1.HTML.Append(' <div class="newspanel"');
UniHTMLFrame1.HTML.Append(' style="position: absolute; top: '+inttostr(m_top)+'px; left: '+inttostr(m_left)+'px; width: '+inttostr(panel_width)+'px; height: '+inttostr(panel_height)+'px" ');
UniHTMLFrame1.HTML.Append(' onclick="javascript:MainForm.mask.show();ajaxRequest(MainForm.form,'''+ajax_befehl+''',[''param0='+ziel+'''])">');
UniHTMLFrame1.HTML.Append(' <IMG STYLE="position: absolute;TOP:0px; LEFT:0px; WIDTH:'+inttostr(image_width)+'px; HEIGHT:'+inttostr(image_height)+'px" SRC="'+bilderquelle+'">');
UniHTMLFrame1.HTML.Append(' <div class="start_abgedunkelt" STYLE="position: absolute;TOP:'+inttostr(trunc(image_height/3))+'px; LEFT:0px; WIDTH:'+inttostr(trunc(image_width))+'px; HEIGHT:'+inttostr(trunc( (image_height/3)*2 ))+'px"></div>');
UniHTMLFrame1.HTML.Append(' <div class="'+kategorieklasse+'"');
UniHTMLFrame1.HTML.Append(' style="position: absolute; top: 50px; left: 10px; width:200px; height: 50px">');
UniHTMLFrame1.HTML.Append(' <span>'+kategorie+'<span>');
UniHTMLFrame1.HTML.Append(' </div>');
UniHTMLFrame1.HTML.Append(' <div class="berichttext textpunkte"');
UniHTMLFrame1.HTML.Append(' style="position: absolute; top: 70px; left: 10px; width:200px; height: 60px; overflow: hidden">');
UniHTMLFrame1.HTML.Append(' <b><FONT face="Roboto" SIZE="4" COLOR="'+textfarbe1+'">'+beschriftung+'</FONT></b><br><FONT face="Arial" SIZE="3" COLOR="'+textfarbe2+'">'+zusatz+'</FONT>');
UniHTMLFrame1.HTML.Append(' </div>');
UniHTMLFrame1.HTML.Append(' <div class="aufhellen"');
UniHTMLFrame1.HTML.Append(' style="position: absolute; top: 0px; left: 0px; width: '+inttostr(panel_width)+'px; height: '+inttostr(panel_height)+'px"> ');
UniHTMLFrame1.HTML.Append('</div>');
UniHTMLFrame1.HTML.Append('</div>');
if last_thing = 1 then
begin
if 136 > last_top then last_top:=135;
end;
if last_thing = 2 then
begin
m_top:=m_top-146; last_top:=279;
end;
m_left:=m_left+ panel_width;
end;