Geek Answers Handbook

How to use jquery "highlight" effect without temporarily hiding the background image?

I am trying to use the jquery ui "highlight" effect for an html input element with a background image set to CSS (search bar with magnifying glass). However, during the “highlight” animation, the background image temporarily disappears and then appears after the highlight animation has completed. I would like the image to remain in the whole animation. Any ideas?

HTML:

<input class="searchInput" id='searchInputWithMap' type="text" tabindex="100" name="searchStructures" />

CSS

 .searchInput { font-family:Trebuchet MS,Helvetica,sans-serif; background:transparent url(/images/search4.png) no-repeat scroll 8px 6px; height:22px; line-height:28px; padding-left:32px; padding-right:3px; padding-top:5px; padding-bottom:5px; margin:5px 0; border:1px solid #999999; font-size:130%; height: 32px; width: 400px; vertical-align:center; color:#BBBBBB; }
+6
jquery highlight effects
source share
4 answers

When the highlight is called, the source sets backgroundImage to "none", and I don't know how to set it up. You can always create your own highlight effect and just do not delete backgroundImage (I did this, just copy / paste the original and change one call to .css ()).

Another thing you can do, although this is not so clean:

 $("#searchInputWithMap").click(function () { $(this).effect("highlight", {}, 3000); $(this).css('backgroundImage','url(/images/search4.png)'); });

There will be a space, but this will return the background image immediately after the start of the selection animation.

+2
source share

Add !important to your CSS , for example:

 .searchInput { background-image:url(/images/search4.png) !important; }

Use with caution.

+6
source share

I dug up the jQuery UI highlight code, and I think your line is No. 4583:

 el.css({backgroundImage: 'none', backgroundColor: color});

You can change your copy of this function to look like this:

 el.css({backgroundColor: color});
+5
source share

Can I add a transparent alpha channel to the highlight color? I'm not very familiar with CSS, but this seems like a place to check.

Otherwise, could you just replace the bg image with the version you made, which is highlighted, and not select the field at all?

0
source share

More articles:


All Articles