/ Gists / JavaScript

Gists - JavaScript

On gists

Custom events - jquery

•
JavaScript jQuery jQuery-plugins

2.html #

  <dl>
    <dt>Question</dt>
    <dd>Answer</dd>
  </dl>
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

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

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){}
      }
On gists

Capslock.js - example how to write js native plugin

JavaScript-OOP JavaScript Helpers-Filters-Plugins

capslock.js #

/*

CapsLock.js

An object allowing the status of the caps lock key to be determined

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the CapsLock object
var CapsLock = (function(){

  // initialise the status of the caps lock key
  var capsLock = false;

  // initialise the list of listeners
  var listeners = [];

  // store whether we are running on a Mac
  var isMac = /Mac/.test(navigator.platform);

  // Returns whether caps lock currently appears to be on.
  function isOn(){
    return capsLock;
  }

  /* Adds a listener. When a change is detected in the status of the caps lock
   * key the listener will be called, with a parameter of true if caps lock is
   * now on and false if caps lock is now off. The parameter is:
   *
   * listener - the listener
   */
  function addListener(listener){

    // add the listener to the list
    listeners.push(listener);

  }

  /* Handles a key press event. The parameter is:
   *
   * e - the event
   */
  function handleKeyPress(e){

    // ensure the event object is defined
    if (!e) e = window.event;

    // store the prior status of the caps lock key
    var priorCapsLock = capsLock;

    // determine the character code
    var charCode = (e.charCode ? e.charCode : e.keyCode);

    // store whether the caps lock key is down
    if (charCode >= 97 && charCode <= 122){
      capsLock = e.shiftKey;
    }else if (charCode >= 65 && charCode <= 90 && !(e.shiftKey && isMac)){
      capsLock = !e.shiftKey;
    }

    // call the listeners if the caps lock key status has changed
    if (capsLock != priorCapsLock){
      for (var index = 0; index < listeners.length; index ++){
        listeners[index](capsLock);
      }
    }

  }

  // listen for key press events
  if (window.addEventListener){
    window.addEventListener('keypress', handleKeyPress, false);
  }else{
    document.documentElement.attachEvent('onkeypress', handleKeyPress);
  }

  // return the public API
  return {
    isOn        : isOn,
    addListener : addListener
  };

})();
On gists

jQuery - Array of GET variables

JavaScript Helpers-Filters-Plugins

array-get.js #

var searchArray = document.location.search.substring(1).split("&");
//Take off the '?' and split into separate queries
 
//Now we'll loop through searchArray and create an associative array (object literal) called GET
var GET = []; 
for (var searchTerm in searchArray){
	searchTerm.split("="); //Divide the searchTerm into property and value
	GET[searchTerm[0]] = searchTerm[1]; //Add property and value to the GET array
}
On gists

Nahrazeni obrazku na webu 1px transparentnim gifem

JavaScript

replace-img.js #

(function(img) {
    for (var i = img.length; i--; ) {
        img[i].src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAAHAP8ALAAAAAABAAEAAAICRAEAOw==";
    }
})(document.images);
On gists

From https://forum.nette.org/cs/11005-nette-ajax-js-alt-obsluha-pro-ajax-s-jquery?p=5

Nette JavaScript

spinner-nette-ajax.js #

(function($, undefined) {
$.nette.ext('spinner', {
        init: function () {
                spinner = $('<div></div>', { id: "ajax-spinner" });
                spinner.appendTo("body");
        },
        before: function (xhr, settings) {
                $("#ajax-spinner").css({
                        visibility: "visible",
                        left: settings.nette.e.pageX,
                        top: settings.nette.e.pageY
                });
        },
        complete: function () {
                $("#ajax-spinner").css({
                        visibility: "hidden"
                });
        }
});
})(jQuery);
On gists

Move between two select

JavaScript jQuery

move.html #

<select id="from" style="float: left; width: 200px;" multiple>
	
	<option value="1">AA</option>
	<option value="2">BB</option>
	<option value="3">CC</option>
	<option value="4">DD</option>
	<option value="5">EE</option>

</select>

<button style="float: left; margin-left: 10px; margin-right: 10px;" id="a">&gt;</button>
<button style="float: left; margin-left: 10px; margin-right: 10px;" id="b">&lt;</button>
<select id="to" style="float: left;  width: 200px;" multiple></select>




<script>
	var $from = $("#from");
	var $to = $("#to");


	$("#a").click(function(){

		moveOptions($from, $to);
	});	

	$("#b").click(function(){

		moveOptions($to, $from);

	});


	function moveOptions(from, to)
	{
		$("option:selected", from).appendTo(to);
		var x = $("#from option").sort(function(a, b){

			a = a.value;
			b = b.value;

			return a-b;
		});	



		var y = $("#to option").sort(function(a, b){

			a = a.value;
			b = b.value;

			return a-b;
		});


		$("#from").html(x);
		$("#to").html(y);
	}

</script>