How do I use the “highlight” jquery effect without temporarily hiding the background-image?

StackOverflow https://stackoverflow.com/questions/1731807

  •  20-09-2019
  •  | 
  •  

Question

I am trying to use the jquery ui "highlight" effect on an input html element with a background image set in the CSS (A search bar with a magnifying glass). During the "highlight" animation, however, the background image temporarily goes away and then appears once the highlight animation is over. I would like the image to remain throughout the 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;

}
Was it helpful?

Solution

When highlight is called, the source sets the backgroundImage to 'none', and I don't know of a way to configure that. You can always create your own highlight effect and simply not remove the backgroundImage(I've done this, just copy/paste the original and change one .css() call).

Another thing you can do, although it isn't as clean is:

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

There will be a gap, but this will put the background image back in place right after the highlight animation has started.

OTHER TIPS

Add !important to your CSS, like this:

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

Use with care.

I dug into the highlight code of JQuery UI, and I think line #4583 is your problem:

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

You could change your copy of this function to look more like this:

el.css({backgroundColor: color});

Can you add a transparent alpha channel to the highlight color? I'm not really familiar with CSS, but that would seem like the place to check.

Otherwise, could you just replace the bg image with a version you made that appears highlighted and not highlight the box at all?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top