JSFiddle

  • Link Effects

    jQuery 1.11.0, HTML, CSS, JavaScript

    <table class="" width="100%" border="1">
        <tr>
            <td>
                <div class="cl-effect-1"> 
                    <a href="#">cl-effect-1</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-2"> 
                    <a href="#"><span data-hover="cl-effect-2">cl-effect-2</span></a>
                </div>
            </td>
            <td>
                <div class="cl-effect-3">	
                    <a href="#">cl-effect-3</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-4">	
                    <a href="#">Woebegone</a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="cl-effect-5">	
                    <a href="#"><span data-hover="SomeText">cl-effect-5</span></a>
                </div>
            </td>
            <td>
                <div class="cl-effect-6"> 
                    <a href="#">cl-effect-6</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-7">	
                    <a href="#">cl-effect-7</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-8">	
                    <a href="#">cl-effect-8</a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="cl-effect-9">	
                    <a href="#"><span>cl-effect-9</span><span>Some other text</span></a>
                </div>
            </td>
            <td>
                <div class="cl-effect-10">	
                    <a href="#" data-hover="cl-effect-10 data show"><span>cl-effect-10</span></a>
                </div>
            </td>
            <td>
                <div class="cl-effect-11">	
                    <a href="#" data-hover="cl-effect-11 data show">cl-effect-11</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-12">
    					<a href="#">cl-effect-12</a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="cl-effect-13">	
                    <a href="#">cl-effect-13</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-14">	
                    <a href="#">cl-effect-14</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-15">	
                    <a href="#" data-hover="cl-effect-15 data Show">cl-effect-15</a>
                </div>
            </td>
            <td>
                <div class="cl-effect-16">	
                    <a href="#" data-hover="cl-effect-16 data Show">cl-effect-16</a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="cl-effect-17">	
                    <a href="#" data-hover="cl-effect-17">cl-effect-17 ...</a></div></td></tr></table>
  • Hover Effects

    jQuery 1.11.0, HTML, CSS, JavaScript

    // JS is only for on click version
    $(function() {
       $( "#target" ).click(function() {
          //alert( '' + this + '');
           $(this).addClass('clicked');
         
        });
       $( "#target" ).mouseout(function() {
          //alert ...
  • extending jquery

    extending jquery

    //(function($){
    //  $.fn.your_plugin_name: function() {
    // Your plugin code
    //  };
    
    //  $.fn.another_method: function() {
    // Another method code
    //  };
    //})(jQuery);
    
    (function ($) {
        $.fn.extend({
            myPlugin: function () {
                return ...
  • SVG to Raphael Js - triangle test

    Raphael 2.1.0, HTML, CSS, JavaScript

    $(function () {
        
        //IMPORTANT NOTES FOR LINKS in IE6-IE8
            //http://www.eccesignum.org/blog/styling-raphaeljs-elements-with-css
    
            //JSFIDDLE LINK jsfiddle.net//js/lib/raphael-1 ...
  • SVG to Raphael Js - triangle test #12 is the latest revision

    Raphael 1.5.2 (min), HTML, CSS, JavaScript

    //IMPORTANT NOTES FOR LINKS
    //http://www.eccesignum.org/blog/styling-raphaeljs-elements-with-css
    
    
    $(function () {
        var paper, tctLogo1, tctLogo2, tct1, tct2, tct3, year1, year2 ...
  • SVG paths with jquery #2 is the latest revision

    jQuery 2.1.0, HTML, CSS, JavaScript

    $(function () {
        $('#t2').hover(function () {
            $(this).attr({
                fill: 'url(#img1)'
            });
        }, function () {
            $(this).attr({
                fill: 'transparent'
            });
        });
        
        $('#t3').hover(function () {
            $(this).attr({
                fill ...
  • SVG to Raphael Js - triangle test #11 is the latest revision

    Raphael 1.5.2 (min), HTML, CSS, JavaScript

    //IMPORTANT NOTES FOR LINKS
    //http://www.eccesignum.org/blog/styling-raphaeljs-elements-with-css
    
    
    $(function () {
        var paper, tctLogo1, tctLogo2, tct1, tct2, tct3, year1, year2 ...
  • SVG paths with jquery

    jQuery 2.1.0, HTML, CSS, JavaScript

    $(function () {
        $('#t2').hover(function () {
            $(this).attr({
                fill: 'url(#img1)'
            });
        }, function () {
            $(this).attr({
                fill: 'transparent'
            });
        });
        
        $('#t3').hover(function () {
            $(this).attr({
                fill ...
  • Rapeal testing

    Raphael 1.5.2 (min), HTML, CSS, JavaScript

    $(function () {
        
        var paper = new Raphael('rapeal-box', '100%', 381, 0, 0);
        var t1 = paper.path("M273.185,144.42L200.313 270 ...
  • polygon to path

    Raphael 1.5.2 (min), HTML, CSS, JavaScript

    $(function () {
        
        var polys = document.querySelectorAll('polygon,polyline');
    [].forEach.call(polys,convertPolyToPath);
    
    function convertPolyToPath(poly){
      var svgNS = poly.ownerSVGElement.namespaceURI;
      var ...