/ Gists

Gists

On gists

Disable zooming on safari (mobile)

•
JavaScript

disable-zooming-mobile.js #

// http://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari
document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});
On gists

Wrap image with caption

jQuery Helpers-Filters-Plugins jQuery-plugins

image-with-caption.js #

	$(".img-left, .img-right, .article-detail img", this).each(function() 
	{
	    var image = $(this);
	    var imageCaption = image.attr("alt");
	    if (imageCaption != '') 
	    {
	    	image.wrap('<div class="image-w-caption">');
	    	image.parent('.image-w-caption')
	    	     .css('max-width', image.width())
	    	     .addClass(image.attr('class'))
	    	     .append('<div class="caption">'+imageCaption+'</div>');
	    }
	});
On gists

Bootstrap mixins

Bootstrap

bootstrap-mixins.scss #

@mixin respond($minWidth: 0, $maxWidth: 0) {
    @if $minWidth and $maxWidth
    {
        @media screen and (min-width: $minWidth) and (max-width: $maxWidth) { @content; }
    }
    @else if $minWidth
    {
        @media screen and (min-width: $minWidth) { @content; }
    }
    @else if $maxWidth
    {
        @media screen and (max-width: $maxWidth) { @content; }
    }
    @else
    {
        @warn "error - undefined params";
    }
}


@mixin breakpoint($class) 
{

    @if $class == xs
    {
        @media (max-width: 480px) { @content; } 
    }

    @elseif $class == is 
    {
        @media (max-width: 767px) { @content; }
    }

    @else if $class == sm 
    {
        @media (max-width: 991px){ @content; }
    }

    @else if $class == md 
    {
        @media (max-width: 1199px) { @content; }
    }

    @else if $class == lg 
    {
        @media (min-width: 1200px) { @content; }
    }

    @else 
    {
        @warn "Breakpoint mixin supports: is, xs, sm, md, lg";
    }
}


#test
{
    @include breakpoint(lg)
    {
        background: red;
    }

    @include breakpoint(md)
    {
        background: green;
    }    

    @include breakpoint(sm)
    {
        background: purple;
    }

    @include breakpoint(xs)
    {
        background: blue;
    }

    @include breakpoint(is)
    {
        background: gold;
    }
}
On gists

Mysql update join

MySql

update-join.sql #

UPDATE table A
JOIN table B ON {join fields}
JOIN table C ON {join fields}
JOIN {as many tables as you need}
SET A.column = {expression}
Example:

UPDATE person P
JOIN address A ON P.home_address_id = A.id
JOIN city C ON A.city_id = C.id
SET P.home_zip = C.zipcode;
On gists

jQuery - keyup with delay (timeout)

•
jQuery Helpers-Filters-Plugins jQuery-plugins

keyup-delay1.js #

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();


$('input').keyup(function() {
    delay(function(){
      alert('Time elapsed!');
    }, 1000 );
});
On gists

CSS - full height with resizable header & footer with TABLE LAYOUT

CSS CSS trick

layout.css #

html, body {
    height: 100%;
    margin: 0;

}
.container {
    display: table;
    height: 100%;
    /*border-spacing: 10px;
    margin: 0 -10px;
    */
    width: 100%;
}
.nav, .content, .footer {
    display: table-row;
}
.cell {
    display: table-cell;
}
.nav div, .footer div {
    background-color: #1565C0;
}
.content div {
    height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */
    border: 1px solid;
}
p {
    padding: 1em;
    margin: 0;
}
On gists

Very simple autosave functionality using local storage

JavaScript Helpers-Filters-Plugins jQuery-plugins

test.html #

<html>
    <body>    
        <textarea rows=24 cols=80></textarea>
        <script type="text/javascript" src="autosave.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                AutoSave.start();
            })

            $(window).unload(function(){
                AutoSave.stop();
            });
        </script>
    </body>
</html>
On gists

Client-side Autosave Using localStorage with jQuery in textarea

JavaScript

autosave.js #

$(document).ready(function() {

///////////////////////
//
// Recovery Below
//
///////////////////////

  // Retrieve the object from storage onReady
  var autosave = localStorage.getItem('file');

  // parses the string (btw. its UTF-8)
  var text = JSON.parse(autosave);

  //modifies the textarea with the id="inputTextArea" 
  $("textarea#inputTextArea").val(text);

////////////////////////
//
//  Autosaver below
//
////////////////////////

  // Autosave on keystroke works in offline mode
  $("textarea#inputTextArea").change (function(){

     // pulls the value from the textarea
     var file = $('textarea#inputTextArea').val();

     // sets the file string to hold the data
     localStorage.setItem('file', JSON.stringify(file));
  });

});
On gists

MathUtils

jQuery Helpers-Filters-Plugins jQuery-plugins

mathutils.jquery.js #

(function($) {
  $.mathUtils = {
    sum: function(array) {
      var total = 0;

      $.each(array, function(index, value) {
        total += $.mathUtils.parseCzechFloat(value);
      });
      return total;
    },
    parseCzechFloat: function(string) {
      var value = $.trim(string);
      return parseFloat(value.replace(' ', '').replace(',', '.')) || 0;
    },
    formatCzechFloat: function(number) {
      return String(number).replace('.', ',');
    },
    average: function(array) {
      if ($.isArray(array)) {
        return $.mathUtils.sum(array) / array.length;
      }
      return '';
    }
  };
})(jQuery);
On gists

On responsive no hover etc

JavaScript Helpers-Filters-Plugins

on-responsive-no-hover.js #


      if ('createTouch' in document)
      {
          try
          {
              var ignore = /:hover/;
              for (var i=0; i<document.styleSheets.length; i++)
              {
                  var sheet = document.styleSheets[i];
                  for (var j=sheet.cssRules.length-1; j>=0; j--)
                  {
                      var rule = sheet.cssRules[j];
                      if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText))
                      {
                          sheet.deleteRule(j);
                      }
                  }
              }
          }
          catch(e){}
      }