jquery gradient

Guten Abend zusammen!

Bei folgendem JQuery hab ich das Problem, das ich die id nur ein einziges mal anwenden kann..Warum?

Das Script macht die Schrift bunt.

(function($) {
/**
 *  Function executed by jQuery
 *
 */
    $.fn.gradienttext = function(options) {
    //  Merge options and defaults
        var options = $.extend({
            colors:             ['#000000', '#FFFFFF'],
            style:              'vertical',
            shadow:             false,
            shadow_color:       '#000000',
            shadow_offset_x:    1,
            shadow_offset_x:    1,
            shadow_blur:        1
        }, options);
    //  Replace each matched element with a canvas
        $(this).each(function() {
            try {
            //  Create canvas
                var canvas              = document.createElement('canvas');
                canvas.width            = $(this).width();
                canvas.height           = $(this).height();
                var context             = canvas.getContext("2d");
            }
            catch(e) {
            //  Canvas not supported
                return false;
            }
        //  Get H1 font
            var font_family         = $(this).css('font-family');
            var font_size           = $(this).css('font-size');
            var font_weight         = $(this).css('font-weight');
            var line_height         = $(this).css('line-height');
        //  Get H1 text
            var text                = $(this).text();
        //  Set canvas font
            context.textBaseline    = 'top';
            context.font            = font_weight + ' ' + font_size + ' ' + font_family;
            var text_metrics        = context.measureText(text);
        //  Make canvas gradient
            switch(options.style) {
            case 'horizontal':
            //  Horizontal
                var gradient = context.createLinearGradient(0, 0, text_metrics.width, 0);
                break;
            case 'vertical':
            default:
            //  Vertical
                var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
                break;
            }
            var gradient_step = 1 / options.colors.length;
            for (var idx_color=0; idx_color<options.colors.length; ++idx_color) {
                gradient.addColorStop(idx_color * gradient_step, options.colors[idx_color]);
            }
            context.fillStyle = gradient;
        //  Shadow?
            if (options.shadow === true) {
                context.shadowOffsetX = options.shadow_offset_x;
                context.shadowOffsetY = options.shadow_offset_x;
                context.shadowBlur    = options.shadow_blur;
                context.shadowColor   = options.shadow_color;
            }
        //  Set canvas text
            context.fillText(text, 0, 0);
        //  Replace!
            $(this).replaceWith($(canvas));
        }); //  each matched element
    };  //  function gradienttext
})(jQuery);

Der Head

   <script>
$(document).ready(function(){
    $('#coloring').gradienttext({
        colors: [
            '#FF0000',
            '#FF6600',
            '#CCFF00',
            '#00FF00',
            '#0066FF',
            '#FF00FF'
        ],
        style: 'horizontal'
    });
});
</script>

Der Body

<font id="coloring">mein text 1</font> <!-- geht -->
<font id="coloring">mein text 1</font> <!-- geht nicht -->

Ich verstehe nicht wieso?!

Eine ID hat dokumentweit eindeutig zu sein.
(Solche HTML-Grundlagen sollte man kennen, bevor man mit JavaScript und fancy Frameworks herumzuspielen beginnt ...)

Warum verwendest du nicht einfach eine Klasse, wenn es mehrere solcher Elemente gibt, auf die du das ganze anwenden willst ...?

Zitat von wahsaga

Eine ID hat dokumentweit eindeutig zu sein.
(Solche HTML-Grundlagen sollte man kennen, bevor man mit JavaScript und fancy Frameworks herumzuspielen beginnt ...)

Warum verwendest du nicht einfach eine Klasse, wenn es mehrere solcher Elemente gibt, auf die du das ganze anwenden willst ...?

oh man wie peinlich.. sorry, hab ich beim testen vergessen zurück zu ändern.
und ja, ist klar das ne id nur einmal vorkommen darf.

aber mit ner klasse gings genauso wenig.
siehe:

  <head>
        
 
    <script>
$(document).ready(function(){
    $('.tutut').gradienttext({
        colors: [
            '#FF0000',
            '#FF6600',
            '#CCFF00',
            '#00FF00',
            '#0066FF',
            '#FF00FF'
        ],
        style: 'horizontal'
    });
});
</script>
    
  </head>
  <body>






<font class="tutut">mein text 1</font> <!-- geht -->
<font class="tutut">mein text 1</font> <!-- geht nicht -->




  </body>

edit: bzw mit ner klasse gehts garned, darum hat ichs mit ner id versucht

Du weißt schon, dass gradienttext ein externes Plugin ist?

Peter

jQuery.each() – jQuery API

Zitat von onemorenerd

jQuery.each() – jQuery API

Der muss einfach nur das "radient text jQuery plugin" einbinden. dann hat er seinen Effekt. Habs eben ausprobiert. Auch wenn es sch***e aussieht.

Peter

hey, ja ich weiß das es ein externes plugin ist.
ich hab mich hier auf den quellcode nur aufs wesentliche beschränkt.
und ja, ich hab das eingebunden klar. sonst ginge es ja mit der id geschichte ned..mit den klassen klappt das allerdings nicht bei mir *denk..
na gut, wenns bei euch geht, muss ich da nochmal genauer nach meinem problem schauen. vielen dank erstmal

<font> ist veraltet und sollte nicht mehr verwendet werden.