Jump to content

Need help with CSS ....


erich.wanker
 Share

Recommended Posts

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;
Link to comment
Share on other sites

 

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :-)

  • Upvote 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...