Question

To explain. I have jquery UI tabs on my site. Now I appropriated this position from a previous developer who had 100’s of tabs on individual pages, apparently he didnt realize you only need to do it once. Well now I need to update these 100’s of tabs to include images instead of the word text.

Attempt 1 was to do it with css.. Put a background on it, did text indent -9999px but text didnt move at all.

Attempt 2 was to write a script to appendTo a new image of the button we want. Works in jsfiddle but not on the site… How is that possible, that you cant change something created by jquery using jquery..http://jsfiddle.net/cornelas/hnYQf/1/”/

    var prevImage = "http://www.pflivedevelopment.com/custom/images/prev.png";
    var nextImage = "http://www.pflivedevelopment.com/custom/images/next.png";
    $(".demo .mover").contents().filter(function() {return this.nodeType === 3;
    }).remove();
     $('<img src=" ' + prevImage + '"/>').appendTo("a.prev-tab");
    $('<img src=" ' + nextImage + '"/>').appendTo("a.next-tab");

Attempt 3-………. Change them by hand….. days of work…. especially using a CMS… Any suggestions on how to effectively change one jqueryUI code using another jquery script?

Answer 1

It sounds like this can and should be done with CSS, but you might’ve left out an important bit. For text-indent to function properly the element can’t be set to inline, which a‘s are by default.

Here is a working fiddle with the link text replaced with images via CSS: http://jsfiddle.net/crMhU/