Ergebnis 1 bis 4 von 4
  1. #1
    Torte ist offline Grünschnabel
    registriert
    16-02-2017
    Beiträge
    5

    Background im Readmorebutton

    Hallo Mitglieder, ich brauche euch wissen, da ich Anfänger bin in diesem Bereich! Ich habe ein readmore Script gefunden, der super funktioniert. Jetzt hätte ich aber gern die Schrift Weiß und den Buttenhintergrund in #808080. Leider finde ich nicht die Anweisung hierfür. Könntet Ihr mir helfen?
    Code:
    <script>
    
      (function(factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
      } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'));
      } else {
        // Browser globals
        factory(jQuery);
      }
    }(function($) {
      'use strict';
    
      var readmore = 'readmore',
          defaults = {
            speed: 100,
    
            collapsedHeight: 295,
            heightMargin: 26,
            moreLink: '<a href="#">mehr...</a>',
            lessLink: '<a href="#">Schlie&szlig;en</a>',
            embedCSS: true,
            blockCSS: 'display: block; width: 95%; text-align: right;',
            startOpen: false,
    
            // callbacks
            blockProcessed: function() {},
            beforeToggle: function() {},
            afterToggle: function() {}
          },
          cssEmbedded = {},
          uniqueIdCounter = 0;
    
      function debounce(func, wait, immediate) {
        var timeout;
    
        return function() {
          var context = this, args = arguments;
          var later = function() {
            timeout = null;
            if (! immediate) {
              func.apply(context, args);
            }
          };
          var callNow = immediate && !timeout;
    
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
    
          if (callNow) {
            func.apply(context, args);
          }
        };
      }
    
      function uniqueId(prefix) {
        var id = ++uniqueIdCounter;
    
        return String(prefix == null ? 'rmjs-' : prefix) + id;
      }
    
      function setBoxHeights(element) {
        var el = element.clone().css({
              height: 'auto',
              width: element.width(),
              maxHeight: 'none',
              overflow: 'hidden'
            }).insertAfter(element),
            expandedHeight = el.outerHeight(),
            cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
            defaultHeight = element.data('defaultHeight');
    
        el.remove();
    
        var collapsedHeight = cssMaxHeight || element.data('collapsedHeight') || defaultHeight;
    
        // Store our measurements.
        element.data({
          expandedHeight: expandedHeight,
          maxHeight: cssMaxHeight,
          collapsedHeight: collapsedHeight
        })
        // and disable any `max-height` property set in CSS
        .css({
          maxHeight: 'none'
        });
      }
    
      var resizeBoxes = debounce(function() {
        $('[data-readmore]').each(function() {
          var current = $(this),
              isExpanded = (current.attr('aria-expanded') === 'true');
    
          setBoxHeights(current);
    
          current.css({
            height: current.data( (isExpanded ? 'expandedHeight' : 'collapsedHeight') )
          });
        });
      }, 100);
    
      function embedCSS(options) {
        if (! cssEmbedded[options.selector]) {
          var styles = ' ';
    
          if (options.embedCSS && options.blockCSS !== '') {
            styles += options.selector + ' + [data-readmore-toggle], ' +
              options.selector + '[data-readmore]{' +
                options.blockCSS +
              '}';
          }
    
          // Include the transition CSS even if embedCSS is false
          styles += options.selector + '[data-readmore]{' +
            'transition: height ' + options.speed + 'ms;' +
            'overflow: hidden;' +
          '}';
    
          (function(d, u) {
            var css = d.createElement('style');
            css.type = 'text/css';
    
            if (css.styleSheet) {
              css.styleSheet.cssText = u;
            }
            else {
              css.appendChild(d.createTextNode(u));
            }
    
            d.getElementsByTagName('head')[0].appendChild(css);
          }(document, styles));
    
          cssEmbedded[options.selector] = true;
        }
      }
    
      function Readmore(element, options) {
        this.element = element;
    
        this.options = $.extend({}, defaults, options);
    
        embedCSS(this.options);
    
        this._defaults = defaults;
        this._name = readmore;
    
        this.init();
    
        // IE8 chokes on `window.addEventListener`, so need to test for support.
        if (window.addEventListener) {
          // Need to resize boxes when the page has fully loaded.
          window.addEventListener('load', resizeBoxes);
          window.addEventListener('resize', resizeBoxes);
        }
        else {
          window.attachEvent('load', resizeBoxes);
          window.attachEvent('resize', resizeBoxes);
        }
      }
    
    
      Readmore.prototype = {
        init: function() {
          var current = $(this.element);
    
          current.data({
            defaultHeight: this.options.collapsedHeight,
            heightMargin: this.options.heightMargin
          });
    
          setBoxHeights(current);
    
          var collapsedHeight = current.data('collapsedHeight'),
              heightMargin = current.data('heightMargin');
    
          if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
            // The block is shorter than the limit, so there's no need to truncate it.
            if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
              this.options.blockProcessed(current, false);
            }
            return true;
          }
          else {
            var id = current.attr('id') || uniqueId(),
                useLink = this.options.startOpen ? this.options.lessLink : this.options.moreLink;
    
            current.attr({
              'data-readmore': '',
              'aria-expanded': this.options.startOpen,
              'id': id
            });
    
            current.after($(useLink)
              .on('click', (function(_this) {
                return function(event) {
                  _this.toggle(this, current[0], event);
                };
              })(this))
              .attr({
                'data-readmore-toggle': id,
                'aria-controls': id
              }));
    
            if (! this.options.startOpen) {
              current.css({
                height: collapsedHeight
              });
            }
    
            if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
              this.options.blockProcessed(current, true);
            }
          }
        },
    
        toggle: function(trigger, element, event) {
          if (event) {
            event.preventDefault();
          }
    
          if (! trigger) {
            trigger = $('[aria-controls="' + this.element.id + '"]')[0];
          }
    
          if (! element) {
            element = this.element;
          }
    
          var $element = $(element),
              newHeight = '',
              newLink = '',
              expanded = false,
              collapsedHeight = $element.data('collapsedHeight');
    
          if ($element.height() <= collapsedHeight) {
            newHeight = $element.data('expandedHeight') + 'px';
            newLink = 'lessLink';
            expanded = true;
          }
          else {
            newHeight = collapsedHeight;
            newLink = 'moreLink';
          }
    
          // Fire beforeToggle callback
          // Since we determined the new "expanded" state above we're now out of sync
          // with our true current state, so we need to flip the value of `expanded`
          if (this.options.beforeToggle && typeof this.options.beforeToggle === 'function') {
            this.options.beforeToggle(trigger, $element, ! expanded);
          }
    
          $element.css({'height': newHeight});
    
          // Fire afterToggle callback
          $element.on('transitionend', (function(_this) {
            return function() {
              if (_this.options.afterToggle && typeof _this.options.afterToggle === 'function') {
                _this.options.afterToggle(trigger, $element, expanded);
              }
    
              $(this).attr({
                'aria-expanded': expanded
              }).off('transitionend');
            }
          })(this));
    
          $(trigger).replaceWith($(this.options[newLink])
            .on('click', (function(_this) {
                return function(event) {
                  _this.toggle(this, element, event);
                };
              })(this))
            .attr({
              'data-readmore-toggle': $element.attr('id'),
              'aria-controls': $element.attr('id')
            }));
        },
    
        destroy: function() {
          $(this.element).each(function() {
            var current = $(this);
    
            current.attr({
              'data-readmore': null,
              'aria-expanded': null
            })
              .css({
                maxHeight: '',
                height: ''
              })
              .next('[data-readmore-toggle]')
              .remove();
    
            current.removeData();
          });
        }
      };
    
    
      $.fn.readmore = function(options) {
        var args = arguments,
            selector = this.selector;
    
        options = options || {};
    
        if (typeof options === 'object') {
          return this.each(function() {
            if ($.data(this, 'plugin_' + readmore)) {
              var instance = $.data(this, 'plugin_' + readmore);
              instance.destroy.apply(instance);
            }
    
            options.selector = selector;
    
            $.data(this, 'plugin_' + readmore, new Readmore(this, options));
          });
        }
        else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
          return this.each(function () {
            var instance = $.data(this, 'plugin_' + readmore);
            if (instance instanceof Readmore && typeof instance[options] === 'function') {
              instance[options].apply(instance, Array.prototype.slice.call(args, 1));
            }
          });
        }
      };
    
    }));
      /**************************/
        $('article').readmore({speed: 500});
    
        var blog = {
          'articles': [
            {
              title: 'Post One',
              body: "<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every \"superstar,\" every \"supreme leader,\" every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p><p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p><p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p><p>I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>"
            },
            {
              title: 'Post Two',
              body: "<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every \"superstar,\" every \"supreme leader,\" every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p><p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p><p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p><p>I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>"
            },
            {
              title: 'Post Three',
              body: "<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every \"superstar,\" every \"supreme leader,\" every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p><p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p><p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p><p>I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>"
            }
          ]
        };
    
        $.mockjax({
          url: 'blog.json',
          responseText: blog,
          responseTime: 1500
        });
    
        $.ajax({
          url: 'blog.json',
          dataType: 'json',
          success: function(data) {
            var template = function(article) {
              return $('<article><h2>' + article.title + '</h2>' + article.body + '</article>');
            };
    
            $.each(data.articles, function(index, article) {
              $('#ajax').append(template(article));
            });
    
            $('#ajax').removeClass('loading');
    
            $('#ajax article').readmore({speed: 500});
          }
        });
      </script>
    Danke schon mal im vorraus.

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.550

    AW: Background im Readmorebutton

    * freigeschaltet *
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: Background im Readmorebutton

    Du kannst doch über den Parameter moreLink das Aussehen des "Buttons" beeinflussen.

    PS: href="#" tztztz...
    Geändert von kkapsner (31-07-2017 um 20:20 Uhr)

  4. #4
    Torte ist offline Grünschnabel
    registriert
    16-02-2017
    Beiträge
    5

    AW: Background im Readmorebutton

    Hallo , ja das habe ich schon:
    moreLink: '<a style="color:#fff;" href="#">mehr...</a>',
    lessLink: '<a style="color:#fff; width:80px;" href="#">Schlie&szlig;en</a>',
    LG Thorsten

Ähnliche Themen

  1. background
    Von mattmagic149 im Forum CSS und (X)HTML
    Antworten: 21
    Letzter Beitrag: 17-07-2010, 19:30
  2. style:background().. ersetzt nicht background...
    Von Koksnuss im Forum CSS und (X)HTML
    Antworten: 9
    Letzter Beitrag: 22-01-2006, 22:31
  3. -]background[-
    Von .oO]Ðjh0mb[Oo. im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 02-04-2002, 14:40
  4. background
    Von just-benni im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 09-09-2001, 20:14
  5. background
    Von opaque im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 15-06-2001, 01:44

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •