All posts

RadComboBox + jQuery

Do you think that RadComboBox animations are boring? We can spice them up

with a little  help from jQuery.

Let's make the dropdown fade for example - This can be done very easily

using the fadeIn, fadeTo and fadeOut jQuery methods. You can download a

sample project for more details.

We can also animate the text of the items. All you need  to do is to

animate the padding-left css attribute of the item's DOM element. The

following script shows how the text can be moved when you hover over the

item:

$('.rcbItem')

.mouseover(function(){

         $(this).stop().animate({paddingLeft:"54px"}, {duration:500});

})

.mouseout(function(){

         $(this).animate({paddingLeft:"4px"}, {duration:500});

})

And the result is:

image

If you want to see more about our controls and jQuery you can refer to Vladimir Enchev's blog post about RadGrid  animation.

Facebook Twitter DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Add diigo bookmark

Comments  3

  • 02 Oct

    I'd like to see an example that dynamically changes the width of the dropdown based on the widest item in the list using jQuery. That is one thing that is missing from the combo...

    Michael

  • 02 Oct

    Are there plans to utilize JQuery to replace the animations used with Rad Comtrols?

    Brook

  • 02 Oct

    Thanks for the great feedback, Michael. Although we don't think this could be easily done with jQuery we will log this request and consider it for implementation.

    Rosi F

Post a comment
  1. Formatting options
       
     
     
     
     
       
  2. Security image