Need help with CSS ....

[erich.wanker]

Hello,

 

i have a unipanel .. in the unipanel i have a uniLabel (Database record value)  and a uniImage  (image with a "delete" icon) ...

 

MY CSS QUESTION:

if the mouse is over the unipanel, the color of the unipanel should change from white to silver AND the image should be visible (and Clickable)

if the mouse leaves the uniPanel, the color of the unipanel should be white and the uniImage should NOT be visible

 

this runtime assigned functions are not a problem:

if the user clicks on the panel, a showmessage should come

if the user clicks on the image, a "will you delete.."-message should come

 

AND A DELPHI QUESTION:

i also have a problem with my tests: if i click the image witch is in the uniPanel, both funktions are starting - so i see the uniPanel.onClick AND the uniImage.onClick message ????

 

i am not good with javascript and css - can someone please help me with this "liitle" problem ?

ThanX

Erich

 

 

 

 

 

i think - if i create every effect in ClientEvents/ ExtEvenst or UniEvents (mouseEnter, MouseLeave..)  - the performance is very slow - i think, a class name for the Panel and the definition in ServerModule / Custom CSS is the right solution ?

 

All the uniPanels are created at runtime ..i define a class name since now in this way:

function OnAfterCreate(sender)
{
   sender.cls = 'css-class-name';
}

 

 

 

 

 

 

 

the image Visible/ not visible function i made with delphi - this function would be cool as a CSS Style thing:

(every UniPanel has a unique TAG value )

 

procedure Tdata_ver.my_UniPanelMouseEnter(
  Sender: TObject);
  var i:Integer;
begin
i:=(sender as TUniPanel).tag;
(FindComponent('loeschimage'+inttostr(i)) as TUniImage).Visible:=true;
end;


procedure Tdata_ver.my_UniPanelMouseLeave(
  Sender: TObject);
var i:Integer;
begin
i:=(sender as TUniPanel).tag;
(FindComponent('loeschimage'+inttostr(i)) as TUniImage).Visible:=false;
end;

[cristianotestai]

 

Hello,

 

i have a unipanel .. in the unipanel i have a uniLabel (Database record value)  and a uniImage  (image with a "delete" icon) ...

 

MY CSS QUESTION:

if the mouse is over the unipanel, the color of the unipanel should change from white to silver AND the image should be visible (and Clickable)

if the mouse leaves the uniPanel, the color of the unipanel should be white and the uniImage should NOT be visible

 

this runtime assigned functions are not a problem:

if the user clicks on the panel, a showmessage should come

if the user clicks on the image, a "will you delete.."-message should come

 

AND A DELPHI QUESTION:

i also have a problem with my tests: if i click the image witch is in the uniPanel, both funktions are starting - so i see the uniPanel.onClick AND the uniImage.onClick message ????

 

i am not good with javascript and css - can someone please help me with this "liitle" problem ?

ThanX

Erich

 

 

 

 

 

i think - if i create every effect in ClientEvents/ ExtEvenst or UniEvents (mouseEnter, MouseLeave..)  - the performance is very slow - i think, a class name for the Panel and the definition in ServerModule / Custom CSS is the right solution ?

 

All the uniPanels are created at runtime ..i define a class name since now in this way:

function OnAfterCreate(sender)
{
   sender.cls = 'css-class-name';
}

 

 

 

 

 

 

 

the image Visible/ not visible function i made with delphi - this function would be cool as a CSS Style thing:

(every UniPanel has a unique TAG value )

 

procedure Tdata_ver.my_UniPanelMouseEnter(
  Sender: TObject);
  var i:Integer;
begin
i:=(sender as TUniPanel).tag;
(FindComponent('loeschimage'+inttostr(i)) as TUniImage).Visible:=true;
end;


procedure Tdata_ver.my_UniPanelMouseLeave(
  Sender: TObject);
var i:Integer;
begin
i:=(sender as TUniPanel).tag;
(FindComponent('loeschimage'+inttostr(i)) as TUniImage).Visible:=false;
end;

 

 Hi, Just a tip:

 

This type of manipulation interface should be implemented by client scripting: ClientEvents.

 

All code implemented in class procedures are performed on the server side because UniGui is 100% server side, which may cause some delay when many iterations are performed by the user.

 

Best Regards,

 

Cristiano Testai

[Oliver Morsch]

If the UniPanel has the class "hoverpanel" and the UniImage has the class "hoverbutton" (And: UniImage.visible := true in UniGui !) then use the following CSS:

.hoverpanel:hover {
  background-color:#00FF00;
}

.hoverpanel .hoverbutton{
  visibility:hidden;
}
.hoverpanel:hover .hoverbutton{
  visibility:visible;
}

i also have a problem with my tests: if i click the image witch is in the uniPanel, both funktions are starting - so i see the uniPanel.onClick AND the uniImage.onClick message ????

 

With UniImage -> ClientEvents -> ExtEvents -> Onclick you can do the following:

function Onclick(sender)
{
  alert('delete');
  
  var e = window.event;
  if (e.stopPropagation) {
    e.stopPropagation();
    //alert('SP');
  } else {
    e.cancelBubble = true;
    //alert('CB');
  };
}

But works only with IE and Chrome. FF has no "window.event" and the onclick of a TUniImage has no event/e parameter.

[erich.wanker]

Hello Oliver,

 

thank you for your help - the "hoverbutton" CSS works fine !  :-) .. thanks ..

 

and the "hoverpanel" CSS works NOW also fine - if i use:

                my_uniPanel_01.ClientEvents.ExtEvents.Add                
                ('OnAfterrender=function OnAfterrender(sender)'+
                ' {document.getElementById(sender.body.id).className ="hoverpanel"; }');

..the wrong syntax i used was:

                my_uniPanel_01.ClientEvents.UniEvents.Add
                ('OnAfterCreate=function OnAfterCreate(sender)'+
                ' {sender.cls="hoverpanel"; }');

Thanks again and nice greetings :-)

[rullomare]

hi,

 

if you want you can try  : 

without CSS 

 

 

 

procedure TMainForm.UniFormCreate(Sender: TObject);

begin

   unipanel1.ClientEvents.ExtEvents.Add('Onmouseover=function Onmouseove(sender) {Ext.getCmp( ' +

                                         uniimage1.jsname +'.show()); ' +

                                        'Ext.getCmp(sender.getId()).body.setStyle(''background'',''lightblue'');} ');

 

   unipanel1.ClientEvents.ExtEvents.Add('Onmouseout=function Onmouseout(sender) {Ext.getCmp( ' +

                                         uniimage1.jsname +'.hide()); ' +

                                        'Ext.getCmp(sender.getId()).body.setStyle(''background'',''white'');} ');

 

 

   uniimage1.ClientEvents.ExtEvents.Add('Onclick=function Onclick(sender) { ' +

                                         unipanel1.JSName +'.setDisabled(true) ;' +

 

                                        '  Ext.MessageBox.show({ msg:"you pressed on Image.",buttons:Ext.MessageBox.OK,maxWidth:300,' +

                                        '   fn:showResult , icon:Ext.MessageBox.ERROR}); function showResult(btn){ ' + unipanel1.JSName +'.setDisabled(false) ;} }') ;

 

    unipanel1.ClientEvents.ExtEvents.Add('Onclick=function Onclick(sender) { ' +

                                        '  Ext.MessageBox.show({ msg:"you pressed on Panel.",buttons:Ext.MessageBox.OK,maxWidth:300,' +

                                       '   fn:showResult , icon:Ext.MessageBox.ERROR}); function showResult(btn){} }') ;

 

 

 

 

end;

 

 

regards, 

 

Salvatore Marullo.