jquery gradient

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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.

    Code:
    (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
    HTML-Code:
       <script>
    $(document).ready(function(){
        $('#coloring').gradienttext({
            colors: [
                '#FF0000',
                '#FF6600',
                '#CCFF00',
                '#00FF00',
                '#0066FF',
                '#FF00FF'
            ],
            style: 'horizontal'
        });
    });
    </script>
    Der Body
    HTML-Code:
    <font id="coloring">mein text 1</font> <!-- geht -->
    <font id="coloring">mein text 1</font> <!-- geht nicht -->
    
    Ich verstehe nicht wieso?!

  • #2
    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 ...?
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Zitat von wahsaga Beitrag anzeigen
      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:

      Code:
        <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

      Kommentar


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

        Peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          jQuery.each() – jQuery API

          Kommentar


          • #6
            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
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              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

              Kommentar


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

                Kommentar

                Lädt...
                X