/ Gists / jQuery

Gists - jQuery

On gists

jQuery document ready

jQuery

document-ready.js #

// =======================================================================
//             Document Ready Example 1
// =======================================================================
 
$(document).ready(function () {
  // do jQuery stuff when DOM is ready
});
 
// =======================================================================
//             Document Ready Example 2
// =======================================================================
 
$(function() {
  // jQuery code here
  // This is equivalent to example 1 they literally mean the same thing.
});
 
// =======================================================================
//             Document Ready Example 3
// =======================================================================
 
jQuery(document).ready(function ($) {
  // do jQuery stuff when DOM is ready
});
 
// Adding the jQuery can help prevent conflicts with other JS frameworks.
// 
// Why do conflicts happen?
// Conflicts typically happen because many JavaScript Libraries/Frameworks use the same shortcut
// name which is the dollar symbol $. Then if they have the same named functions the browser gets
// confused!
// 
// How do we prevent conflicts?
// Well, to prevent conflicts i recommend aliasing the jQuery namespace (ie by using example 3 above).
// Then when you call $.noConflict() to avoid namespace difficulties (as the $ shortcut is no longer available)
// we are forcing it to wrtie jQuery each time it is required.
 
jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready(function () {
  // do jQuery stuff when DOM is ready with no conflicts
});
 
// =======================================================================
//               Document Ready Example 4
// =======================================================================
 
$(window).load(function () {
  //initialize after images are loaded
});
 
// Sometimes you want to manipulate pictures and with $(document).ready() you won't be able to do that
// if the visitor doesn't have the image already loaded. In which case you need to initialize the
// jQuery alignment function when the image finishes loading.
On gists

jQuery form select helpers

jQuery Helpers-Filters-Plugins jQuery-plugins

jQuery form select helpers.js #

jQuery.fn.containsOption = function (query) {
  var found = false;
 
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      for (var i = 0; i < this.options.length; i++) {
        if (query.value) {
          found = (query.value.constructor == RegExp) ? this.options[i].value.match(query.value) : this.options[i].value == query.value;
        } else if (query.text) {
          found = (query.text.constructor == RegExp) ? this.options[i].text.match(query.text) : this.options[i].text == query.text;
        }
        if (found) break;
      }
    } else {
      return this;
    }
  });
 
  return found;
};
 
jQuery.fn.addOption = function (o) {
  var opt = o;
 
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      var option = document.createElement('OPTION');
      option.value = opt.value;
      option.text = opt.text;
 
      if (opt.selected) option.selected = opt.selected;
 
      this.options[this.options.length] = option;
    } else return this;
  });
 
  return this;
};
 
jQuery.fn.clearOptions = function () {
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      this.options.length = 0;
    }
  });
};
 
jQuery.fn.removeOptionByValue = function (val) {
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].value == val) {
          this.options[i] = null;
        }
      }
    } else {
      return this;
    }
  });
  return this;
};
 
jQuery.fn.removeOptionByText = function (txt) {
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].text == txt) {
          this.options[i] = null;
        }
      }
    } else {
      return this;
    }
  });
  return this;
};
 
jQuery.fn.selectOptionByValue = function (val) {
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].value == val) {
          this.options[i].selected = true;
        } else {
          this.options[i].selected = false;
        }
      }
    } else return this;
  });
  return this;
};
 
jQuery.fn.selectOptionByText = function (txt) {
  this.each(function () {
    if (this.nodeName.toLowerCase() == 'select') {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].text == txt) {
          this.options[i].selected = true;
        } else {
          this.options[i].selected = false;
        }
      }
    } else return this;
  });
  return this;
};
 
// USAGE
$('select#languages').containsOption({
  text: 'Text'
});
 
$('select#languages').containsOption({
  value: '19'
});
 
$('select#languages').selectOptionByValue('19');
$('select#languages').selectOptionByText('Apache');
 
$('select#languages').addOption({
  'text': 'rubyonrails',
  'value': '100'
});
 
$('select#languages').removeOptionByValue('19');
$('select#languages').removeOptionByText('Apache');
 
$('select#languages').clearOptions(); // deletes all options
On gists

form in popup

JavaScript jQuery

form-in-poup.js #

$(document).ready(function() {
  $('#myform').submit(function() {
    window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    this.target = 'formpopup';
  });
});
On gists

Jquery slice - gt, lt like functions

jQuery jQuery-plugins

jquery-gt-lt-slice.js #

$("li").slice(0,4); // :lt(4)
$("li").slice(5); // :gt(4)

$.fn.lt = function(n) {return this.slice(0,n);};
$.fn.gt = function(n) {return this.slice(n+1);};
On gists

nette - autocomplete - handle ** via JS

Nette JavaScript jQuery

nette-js-handle-autocomplete.js #

        $('#autocomplete').focus().keyup(function(event) {
                            $.getJSON("\/?do=autoComplete", {'text': $('#autocomplete').val()}, function(payload) {
                                    $('ul.autocomplete').remove();

                                    var list = $('<ul class="autocomplete"></ul>').insertAfter('#autocomplete');

                                    for (var i in payload.autoComplete) {
                                            $('<li></li>').html(payload.autoComplete[i]).appendTo(list);
                                    }
                            });
                    });
On gists

Vytváření elementů v jQuery

jQuery Helpers-Filters-Plugins

new-element.js #

// <a style="color: red;" onclick="..." href="https://phpfashion.com">blogísek</a>
var $el = $('<a>', {
    href: url,
    text: title,
    click: function(e) {
        alert(this.href);
    },
    css: {
        color: 'red'
    }
});



// <a href="https://phpfashion.com"><img alt="Logo" src="images/logo.gif"></a>
var $el = $('<a>', {
    href: url,
    html: $('<img>', {
        src: 'images/logo.gif',
        alt: 'Logo'
    })
});
On gists

Custom events $.trigger()

•
JavaScript jQuery

trigger.html #

<form id="msgbox" action="#" method="get">
<fieldset>
<label for="msg">your message</label>
<input id="msg" value="" />
<button>SEND</button>
</fieldset>
</form>
On gists

Custom events - jquery

•
JavaScript jQuery jQuery-plugins

2.html #

  <dl>
    <dt>Question</dt>
    <dd>Answer</dd>
  </dl>
On gists

jQuery exists fn

jQuery Helpers-Filters-Plugins

jquery-exists-fn.js #

// Tiny jQuery Plugin
// by Chris Goodchild
$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length) {
    callback.call(this, args);
  }

  return this;
};

// Usage
$('div.test').exists(function() {
  this.append('<p>I exist!</p>');
});
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>');
	    }
	});