How come one jquery script cant effect another jquery script

Tags: jquery,css,jquery-ui

Problem :

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.."/

    var prevImage = "";
    var nextImage = "";
    $(".demo .mover").contents().filter(function() {return this.nodeType === 3;
     $('<img src=" ' + prevImage + '"/>').appendTo("a.prev-tab");
    $('<img src=" ' + nextImage + '"/>').appendTo("");

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?

Solution :

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:

    CSS Howto..

    How to float elements in rows.

    How to get All Defined CSS Selectors for a given DOM Element?

    How to crop Google GeoChart and center its content?

    How to make divs float on both ends of another div?

    CSS-how to text-indent a nested unordered list

    how to align the td on top/bottom with css

    How to move items to left inside a div?

    How to open html document within

    How to do a resizable link a:hover in CSS

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    ExtJS 4.2 How to set grid filter height when header text is wrapped?

    Show and hide img

    How to write css for fixed header and scrollable table

    CSS: how to make the font icon and text under it closer?

    How to bound CSS3 animation to class

    How to use @page CSS in ASP.NET MVC View

    How to make a CSS bar go from right to left?

    How to create color custom scrollbar in pure css? [closed]

    How to make a very simple coloured 1-line text area?

    How to make animation smooth

    How to Hide Specific Part of Flash Object Using CSS?

    How do I disable position:fixed in web pages?

    How do I do the css for this?

    How to expand sidebars sub-menu to the correct size?

    How to style CGI python with CSS?

    How to extract attribute values using css selectors?

    How to detect if html contains block level elements using jQuery?

    how to position nested list items?

    How do I move this scrolling bar closer to the post area?