Kleurverloop in tekst BBcode generator

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Kleurverloop in tekst BBcode generator

Bericht van TonnyKamper op do 5 jul 2018 - 19:35

Kleurverloop in tekst BBcode generator

Hier leer ik je om een pagina te maken met een BBcode generator om een verloopkleur en /of grootte in bbcode te genereren:
Om dit te gebruiken, volstaat het om de waarde van startpunt, aankomst en precisie in te voeren (door een figuur met grotere precisie te kiezen, zullen er minder tags nodig zijn maar is het wel minder nauwkeurig). Voorbeeld:


Je kunt de volgende code op een html-pagina van je forum plaatsen, ga naar :

Beheerderspaneel Modules HTML & Javascript - HTML pagina beheer

Maak een nieuwe pagina aan:

Titel: eigen keus
Gebruik header en footer van je forum : NEE
Plaatsing als homepagina : NEE
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" id="min-width" xml:lang="nl" lang="nl" dir="ltr">
  <head>
    <title>Gradiënt bbcode op een tekst</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
body { font-family: Arial, sans-serif }
.title {
    font-size: 20px;
    border-bottom: 1px solid #aaa;
}
.content {
    font-size: 13px;
    color: #333;
    padding: 20px;
    overflow: hidden;
}
.content input { border: 1px solid #aaa }
.content textarea {
    border: 1px solid #aaa;
    width: 90%;
    height: 100px;
}
.miniColors-trigger {
    height: 22px;
    width: 22px;
    background: url(https://i.imgur.com/KKaXy.png) center no-repeat;
    vertical-align: middle;
    margin: 0 .25em;
    display: inline-block;
    outline: none;
}
.miniColors-selector {
    position: absolute;
    width: 175px;
    height: 150px;
    background: #FFF;
    border: solid 1px #BBB;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    z-index: 999999;
}
.miniColors-selector.black {
    background: #000;
    border-color: #000;
}
.miniColors-colors {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/Ekxy2.png) center no-repeat;
    cursor: crosshair;
}
.miniColors-hues {
    position: absolute;
    top: 5px;
    left: 160px;
    width: 20px;
    height: 150px;
    background: url(https://i.imgur.com/JmyPi.png) center no-repeat;
    cursor: crosshair;
}
.miniColors-colorPicker {
    position: absolute;
    width: 11px;
    height: 11px;
    background: url(https://i.imgur.com/j36Lh.gif) center no-repeat;
}
.miniColors-huePicker {
    position: absolute;
    left: -3px;
    width: 26px;
    height: 3px;
    background: url(https://i.imgur.com/QJ574.gif) center no-repeat;
}
    </style>
    <script type="text/javascript">
jQuery && function(d) {
  d.extend(d.fn, {miniColors:function(k, i) {
    var B = function(a, b) {
      var e = l(a.val());
      e || (e = "ffffff");
      var c = r(e), g = d('<a class="miniColors-trigger" style="background-color: #' + e + '" href="#"></a>');
      g.insertAfter(a);
      a.addClass("miniColors").data("original-maxlength", a.attr("maxlength") || null).data("original-autocomplete", a.attr("autocomplete") || null).data("letterCase", "uppercase").data("trigger", g).data("hsb", c).data("change", b.change ? b.change : null).attr("maxlength", 7).attr("autocomplete", "off").val("#" + m(e, b.letterCase));
      b.readonly && a.prop("readonly", !0);
      b.disabled && s(a);
      g.bind("click.miniColors", function(b) {
        b.preventDefault();
        "" === a.val() && a.val("#");
        t(a)
      });
      a.bind("focus.miniColors", function() {
        "" === a.val() && a.val("#");
        t(a)
      });
      a.bind("blur.miniColors", function() {
        var b = l(a.val());
        a.val(b ? "#" + m(b, a.data("letterCase")) : "")
      });
      a.bind("keydown.miniColors", function(b) {
        9 === b.keyCode && j(a)
      });
      a.bind("keyup.miniColors", function() {
        o(a)
      });
      a.bind("paste.miniColors", function() {
        setTimeout(function() {
          o(a)
        }, 5)
      })
    }, s = function(a) {
      j(a);
      a.prop("disabled", !0).data("trigger").css("opacity", 0.5)
    }, t = function(a) {
      if(a.prop("disabled")) {
        return!1
      }
      j();
      var b = d('<div class="miniColors-selector"></div>');
      b.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>').append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>').css({top:a.is(":visible") ? a.offset().top + a.outerHeight() : a.data("trigger").offset().top + a.data("trigger").outerHeight(), left:a.is(":visible") ? a.offset().left : a.data("trigger").offset().left, display:"none"}).addClass(a.attr("class"));
      var e = a.data("hsb");
      b.find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:e.h, s:100, b:100})));
      var c = a.data("colorPosition");
      c || (c = u(e));
      b.find(".miniColors-colorPicker").css("top", c.y + "px").css("left", c.x + "px");
      (c = a.data("huePosition")) || (c = v(e));
      b.find(".miniColors-huePicker").css("top", c.y + "px");
      a.data("selector", b).data("huePicker", b.find(".miniColors-huePicker")).data("colorPicker", b.find(".miniColors-colorPicker")).data("mousebutton", 0);
      d("BODY").append(b);
      b.fadeIn(100);
      b.bind("selectstart", function() {
        return!1
      });
      d(document).bind("mousedown.miniColors touchstart.miniColors", function(b) {
        a.data("mousebutton", 1);
        d(b.target).parents().andSelf().hasClass("miniColors-colors") && (b.preventDefault(), a.data("moving", "colors"), w(a, b));
        d(b.target).parents().andSelf().hasClass("miniColors-hues") && (b.preventDefault(), a.data("moving", "hues"), x(a, b));
        d(b.target).parents().andSelf().hasClass("miniColors-selector") ? b.preventDefault() : d(b.target).parents().andSelf().hasClass("miniColors") || j(a)
      });
      d(document).bind("mouseup.miniColors touchend.miniColors", function(b) {
        b.preventDefault();
        a.data("mousebutton", 0).removeData("moving")
      }).bind("mousemove.miniColors touchmove.miniColors", function(b) {
        b.preventDefault();
        1 === a.data("mousebutton") && ("colors" === a.data("moving") && w(a, b), "hues" === a.data("moving") && x(a, b))
      })
    }, j = function(a) {
      a || (a = ".miniColors");
      d(a).each(function() {
        var a = d(this).data("selector");
        d(this).removeData("selector");
        d(a).fadeOut(100, function() {
          d(this).remove()
        })
      });
      d(document).unbind(".miniColors")
    }, w = function(a, b) {
      var e = a.data("colorPicker");
      e.hide();
      var c = {x:b.pageX, y:b.pageY};
      b.originalEvent.changedTouches && (c.x = b.originalEvent.changedTouches[0].pageX, c.y = b.originalEvent.changedTouches[0].pageY);
      c.x = c.x - a.data("selector").find(".miniColors-colors").offset().left - 5;
      c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 5;
      -5 >= c.x && (c.x = -5);
      144 <= c.x && (c.x = 144);
      -5 >= c.y && (c.y = -5);
      144 <= c.y && (c.y = 144);
      a.data("colorPosition", c);
      e.css("left", c.x).css("top", c.y).show();
      e = Math.round(0.67 * (c.x + 5));
      0 > e && (e = 0);
      100 < e && (e = 100);
      c = 100 - Math.round(0.67 * (c.y + 5));
      0 > c && (c = 0);
      100 < c && (c = 100);
      var d = a.data("hsb");
      d.s = e;
      d.b = c;
      q(a, d, !0)
    }, x = function(a, b) {
      var e = a.data("huePicker");
      e.hide();
      var c = {y:b.pageY};
      b.originalEvent.changedTouches && (c.y = b.originalEvent.changedTouches[0].pageY);
      c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 1;
      -1 >= c.y && (c.y = -1);
      149 <= c.y && (c.y = 149);
      a.data("huePosition", c);
      e.css("top", c.y).show();
      e = Math.round(2.4 * (150 - c.y - 1));
      0 > e && (e = 0);
      360 < e && (e = 360);
      c = a.data("hsb");
      c.h = e;
      q(a, c, !0)
    }, q = function(a, b, e) {
      a.data("hsb", b);
      var c = p(n(b));
      e && a.val("#" + m(c, a.data("letterCase")));
      a.data("trigger").css("backgroundColor", "#" + c);
      a.data("selector") && a.data("selector").find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:b.h, s:100, b:100})));
      a.data("change") && c !== a.data("lastChange") && (a.data("change").call(a.get(0), "#" + c, n(b)), a.data("lastChange", c))
    }, o = function(a) {
      a.val("#" + y(a.val()));
      var b = l(a.val());
      if(!b) {
        return!1
      }
      var b = r(b), e = a.data("hsb");
      if(b.h === e.h && b.s === e.s && b.b === e.b) {
        return!0
      }
      e = u(b);
      d(a.data("colorPicker")).css("top", e.y + "px").css("left", e.x + "px");
      a.data("colorPosition", e);
      e = v(b);
      d(a.data("huePicker")).css("top", e.y + "px");
      a.data("huePosition", e);
      q(a, b);
      return!0
    }, m = function(a, b) {
      return"lowercase" === b ? a.toLowerCase() : "uppercase" === b ? a.toUpperCase() : a
    }, u = function(a) {
      var b = Math.ceil(a.s / 0.67);
      0 > b && (b = 0);
      150 < b && (b = 150);
      a = 150 - Math.ceil(a.b / 0.67);
      0 > a && (a = 0);
      150 < a && (a = 150);
      return{x:b - 5, y:a - 5}
    }, v = function(a) {
      a = 150 - a.h / 2.4;
      0 > a && (h = 0);
      150 < a && (h = 150);
      return{y:a - 1}
    }, y = function(a) {
      return a.replace(/[^A-F0-9]/ig, "")
    }, l = function(a) {
      a = y(a);
      if(!a) {
        return null
      }
      3 === a.length && (a = a[0] + a[0] + a[1] + a[1] + a[2] + a[2]);
      return 6 === a.length ? a : null
    }, n = function(a) {
      var b, e, c;
      b = Math.round(a.h);
      var d = Math.round(255 * a.s / 100), a = Math.round(255 * a.b / 100);
      if(0 === d) {
        b = e = c = a
      }else {
        var d = (255 - d) * a / 255, f = (a - d) * (b % 60) / 60;
        360 === b && (b = 0);
        60 > b ? (b = a, c = d, e = d + f) : 120 > b ? (e = a, c = d, b = a - f) : 180 > b ? (e = a, b = d, c = d + f) : 240 > b ? (c = a, b = d, e = a - f) : 300 > b ? (c = a, e = d, b = d + f) : 360 > b ? (b = a, e = d, c = a - f) : c = e = b = 0
      }
      return{r:Math.round(b), g:Math.round(e), b:Math.round(c)}
    }, p = function(a) {
      var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
      d.each(b, function(a, c) {
        1 === c.length && (b[a] = "0" + c)
      });
      return b.join("")
    }, r = function(a) {
      var b = a, b = parseInt(-1 < b.indexOf("#") ? b.substring(1) : b, 16), a = b >> 16, d = (b & 65280) >> 8, b = b & 255, c = {h:0, s:0, b:0}, g = Math.min(a, d, b), f = Math.max(a, d, b), g = f - g;
      c.b = f;
      c.s = 0 !== f ? 255 * g / f : 0;
      c.h = 0 !== c.s ? a === f ? (d - b) / g : d === f ? 2 + (b - a) / g : 4 + (a - d) / g : -1;
      c.h *= 60;
      0 > c.h && (c.h += 360);
      c.s *= 100 / 255;
      c.b *= 100 / 255;
      0 === c.s && (c.h = 360);
      return c
    };
    switch(k) {
      case "readonly":
        return d(this).each(function() {
          d(this).hasClass("miniColors") && d(this).prop("readonly", i)
        }), d(this);
      case "disabled":
        return d(this).each(function() {
          d(this).hasClass("miniColors") && (i ? s(d(this)) : d(this).prop("disabled", !1).data("trigger").css("opacity", 1))
        }), d(this);
      case "value":
        if(void 0 === i) {
          if(!d(this).hasClass("miniColors")) {
            break
          }
          var z = d(this), A = l(z.val());
          return A ? "#" + m(A, z.data("letterCase")) : null
        }
        d(this).each(function() {
          d(this).hasClass("miniColors") && (d(this).val(i), o(d(this)))
        });
        return d(this);
      case "destroy":
        return d(this).each(function() {
          if(d(this).hasClass("miniColors")) {
            var a = d(this);
            j();
            a = d(a);
            a.data("trigger").remove();
            a.attr("autocomplete", a.data("original-autocomplete")).attr("maxlength", a.data("original-maxlength")).removeData().removeClass("miniColors").unbind(".miniColors");
            d(document).unbind(".miniColors")
          }
        }), d(this);
      default:
        return k || (k = {}), d(this).each(function() {
          "input" === d(this)[0].tagName.toLowerCase() && !d(this).data("trigger") && B(d(this), k, i)
        }), d(this)
    }
  }})
}(jQuery);
    </script>
    <script type="text/javascript">
var vcolor1 = {r:0, g:0, b:0}, vcolor2 = {r:0, g:0, b:0};
jQuery(function() {
  jQuery("#color1").miniColors({change:function(a, b) {
    vcolor1 = b;
    generate()
  }});
  jQuery("#color2").miniColors({change:function(a, b) {
    vcolor2 = b;
    generate()
  }});
  jQuery(".content input,.content textarea,.content select").change(function() {
    generate()
  });
  generate()
});
function color_dif(a, b) {
  return Math.abs(a.r - b.r) + Math.abs(a.g - b.g) + Math.abs(a.b - b.b)
}
function rgb_to_hex(a) {
  var b = "0123456789abcdef".split("");
  return b[Math.floor(a.r / 16)] + b[Math.floor(a.r % 16)] + b[Math.floor(a.g / 16)] + b[Math.floor(a.g % 16)] + b[Math.floor(a.b / 16)] + b[Math.floor(a.b % 16)]
}
function t_color(a, b, f) {
  return{r:Math.round(a.r + f * (b.r - a.r)), g:Math.round(a.g + f * (b.g - a.g)), b:Math.round(a.b + f * (b.b - a.b))}
}
function t_size(a, b, f) {
  return Math.round(a + f * (b - a))
}
function generate() {
  var a = jQuery("#src").val(), b = (a.match(/\s/g) || []).length;
  if(b = a.length - b) {
    var f = {}, h = {}, e;
    if(jQuery("#color-act").is(":checked")) {
      var g = jQuery("#color-sharp").val();
      h[0] = "[color=#" + rgb_to_hex(vcolor1) + "]";
      f[0] = '<span style="color:#' + rgb_to_hex(vcolor1) + '">';
      var c = vcolor1, d;
      for(e = 1;e < b;e++) {
        d = t_color(vcolor1, vcolor2, e / b), color_dif(d, c) >= g && (c = d, h[e] = "[/color][color=#" + rgb_to_hex(d) + "]", f[e] = '</span><span style="color:#' + rgb_to_hex(d) + '">')
      }
      h[b] = "[/color]"
    }else {
      g = jQuery("#size-sharp").val();
      c = parseInt(jQuery("#size1").val());
      d = parseInt(jQuery("#size2").val());
      h[0] = "[size=" + c + "]";
      f[0] = '<span style="font-size:' + c + 'px">';
      var i = c, j;
      for(e = 1;e < b;e++) {
        j = t_size(c, d, e / b), Math.abs(j - i) >= g && (i = j, h[e] = "[/size][size=" + j + "]", f[e] = '</span><span style="font-size:' + j + 'px">')
      }
      h[b] = "[/size]"
    }
    f[b] = "</span>";
    c = g = "";
    for(e = d = 0;d < b;) {
      (i = a.match(/^\s*/)[0].length) ? (g += a.substr(0, i), c += a.substr(0, i).replace(/\n/g, "<br>"), a = a.substr(i), e += i) : (h[d] && (g += h[d]), f[d] && (c += f[d]), g += a.substr(0, 1), c += a.substr(0, 1).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), a = a.substr(1), d += 1, e++)
    }
    h[d] && (g += h[d]);
    g += a;
    f[d] && (c += f[d]);
    c += a.replace(/\n/g, "<br>");
    jQuery("#result").val(g);
    jQuery("#dst").html(c)
  }else {
    jQuery("#result").val(""), jQuery("#dst").html("")
  }
};
    </script>
  </head>
  <body>
    <div id="content">
      <div id="color">
        <div class="title">Kleurverloop</div>
        <div class="content">
          <label>Geactiveerd <input type="checkbox" checked="checked" id="color-act" onclick="jQuery('#size-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" /></label> de <input type="text" id="color1" size="6" autocomplete="on" maxlength="10" value="#000000" /> à <input type="text" id="color2" size="6" autocomplete="on" maxlength="10" value="#000000" />met een precisie van
          <select id="color-sharp">
            <option value="1">1 kleur</option>
            <option value="2">2 kleuren</option>
            <option value="3">3 kleuren</option>
            <option value="4">4 kleuren</option>
            <option value="5">5 kleuren</option>
            <option value="10" selected="selected">10 kleuren</option>
            <option value="20">20 kleuren</option>
            <option value="30">30 kleuren</option>
            <option value="40">40 kleuren</option>
            <option value="50">50 kleuren</option>
            <option value="75">75 kleuren</option>
            <option value="100">100 kleuren</option>
            <option value="150">150 kleuren</option>
            <option value="200">200 kleuren</option>
            <option value="300">300 kleuren</option>
            <option value="400">400 kleuren</option>
            <option value="500">500 kleuren</option>
          </select>
        </div>
      </div>
      <div id="size" style="display:none">
        <div class="title">Verloop in grootte</div>
        <div class="content">
          <label>Geactiveerd <input type="checkbox" id="size-act" onclick="jQuery('#color-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" /></label> van
          <select id="size1">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="'4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="selected">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
          </select>
          naar
          <select id="size2">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="'4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="selected">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
          </select>
          met een precisie van
          <select id="size-sharp">
            <option value="1">1 pixel</option>
            <option value="2">2 pixels</option>
            <option value="3">3 pixels</option>
            <option value="4">4 pixels</option>
            <option value="5">5 pixels</option>
            <option value="10">10 pixels</option>
          </select>
        </div>
      </div>
      <div class="title">
        Tekst om op in te werken
      </div>
      <div class="content">
        <textarea id="src"></textarea>
      </div>
      <div class="title">
        Resultaat
      </div>
      <div class="content">
        <textarea id="result" readonly="true"></textarea>
      </div>
      <div class="title">
        Overzicht
      </div>
      <div class="content" id="dst"></div>
    </div><br /><br /><br /><br /><br /><br /><br /><br /><br />
 Host: <a href="https://actieforum.com">ActieForum</a>
  </body>
</html>
Let op! : Als je de forum header en footer niet gebruikt ben je verplicht een link naar Actieforum erin te plaatsen !!

Dat is het, je hebt nu je eigen kleurverloop generator om teksten met kleurverloop te maken  Smile

avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 221
Geboortedatum : 23-10-54
Leeftijd : 63
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum