Change background color on mouse hover.

Questions, tips and tricks and techniques for scripting in Servoy

Change background color on mouse hover.

Postby jeremysingh15 » Tue Mar 05, 2013 9:30 am

Hi,

Before i start writing the problem, it might be a simple thing but i am not getting a good way of doing this.

I have a bunch of button on a form.I want when user hovers over the button its color should change to indicate the selected one. We have image rollover properties but i want to chnage the background color like we have :hover properties in css. I tried with this but seems to be not workngg inmy case
I want that in both smart and web clinent.

Can someone please show me a lead to proceed as i might be some way.

Thanks for the help in advance.
JS
jeremysingh15
 
Posts: 9
Joined: Tue Jul 31, 2012 9:47 am

Re: Change background color on mouse hover.

Postby jeremysingh15 » Wed Mar 06, 2013 3:55 pm

Any help on this, is there any alternative of mouse hover effect or there is any event to capture onMouseOver / Out event..

Thanks..
jeremysingh15
 
Posts: 9
Joined: Tue Jul 31, 2012 9:47 am

Re: Change background color on mouse hover.

Postby david » Wed Mar 06, 2013 5:52 pm

Doable in web client but not via Servoy's default style sheets as they don't support :hover. So you'll need an external style sheet which you attach to your runtime with a call to:

Code: Select all
plugins.WebClientUtils.addCssReference('http://yourserver.com/css/yourstyle.css')


In that style sheet create a css class along the lines of:

Code: Select all
.my-button { background-color:#000000; }
.my-button:hover { background-color:#00ff00; }


Then when show a form, assign the my-button style to your buttons:

Code: Select all
plugins.WebClientUtils.setExtraCssClass(elements.btn_find, 'my-button');
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1726
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: Change background color on mouse hover.

Postby jeremysingh15 » Fri Mar 08, 2013 9:27 pm

Thanks David for this awesome explanation, but the need is basically for the smart client. In my case web client is optional.

Only way to do this is the rollover image?
Is there no way to do it in smart client with only background color??

I have lots of button in a single form,will it cause a performance issue if i attach two images (if i use rollover image property) with buttos as we face problem in web development..?

Any suggestions??
Thanks
jeremysingh15
 
Posts: 9
Joined: Tue Jul 31, 2012 9:47 am

Re: Change background color on mouse hover.

Postby david » Fri Mar 08, 2013 10:34 pm

Only way in smart client is with rollover image.

In web client, there is a slight delay the first time you rollover a particular image that has a rollover while Servoy goes and fetches the image via ajax. For the rest of the session that rollover image is cached. So things will work as you move to web client.

We have a few buttons with images but for the most part, for web client we've defined our button styles in an external style sheet to take advantage of all the latest css3 tricks (gradients, border rounding, hover state, etc) and for performance reasons.
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1726
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.


Return to Methods

Who is online

Users browsing this forum: Google [Bot] and 2 guests