Question

I just wrote a really simple jQuery plugin.. sort of, that I want some help with.

(function($){
    $.fn.highlight = function(words){
        return this.each(function(){
            //Get text from within
            var text = $(this).html();
            //Replace with new text
            $(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
            //Get the all the highlight classes within this
            var highlights = $(this).find(".highlight");
            //Go through all
            return highlights.each(function(){
                var $this = $(this);
                //Get to the next word
                var wordDiv = $this.nextAll(".word").eq(0);
                //Set highlight span same height as word
                $this.height(wordDiv.height()+2);
                //Set highlight span same width +4 then positioning
                var newWidth = wordDiv.width()+4;
                wordDiv.replaceWith(function(){
                   return $(this).contents();
                });
                $this.width(newWidth+2).css({
                    left:(newWidth)+"px",
                    marginLeft: "-"+(newWidth)+"px"
                });
                $this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
                  $this.remove();
             });
        });         
        });
    }
})(jQuery);
$(document).ready(function(){
    $("div").highlight(/(simple|wrote|knowledge)/g);
});​

and the CSS:

.highlight{
    background: #FBB829;
    display: inline-block;
    position: relative;
    z-index: -1;
    top: 5px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}​

and is it better a better practice to put that CSS in the jQuery plugin?
Here’s a jsFiddle:

http://jsfiddle.net/aVCtA/11/

and you see my text moves when the last .highlight span disappears. Why’s that? Thought relative and z-index: -1 would fix that?

Should I instead use position absolute and calculate the positioning?

Answer 1

Made some changes to your code, check the test on jsfiddle

Changelog:

jQuery:

Removed the .css() from the following line,

$this.width(newWidth + 2);

CSS:

Changed the styling to,

.highlight{
    background: #FBB829;
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: 0px;
    margin-left: -2px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}