/
Gists
/
jQuery
Gists - jQuery
On gists
JavaScript
jQuery
Events - target/currentTarget/delegateTarget
example.html #
// CLICK on button
<div class="box">
<button>Button</button>
</div>
$( "body" ).on( "click", ".box", function(e) {
e.delegateTarget; // body
e.currentTarget; // .box
e.target; // button
});
On gists
JavaScript
jQuery
PubSub events
2.html #
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Custom Events</title>
</head>
<body>
<h1>Hi There</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// PubSub
(function( $ ) {
var o = $( {} );
$.each({
trigger: 'publish',
on: 'subscribe',
off: 'unsubscribe'
}, function( key, val ) {
jQuery[val] = function() {
o[key].apply( o, arguments );
};
});
})( jQuery );
$.getJSON('http://search.twitter.com/search.json?q=dogs&callback=?', function( results) {
$.publish( 'twitter/results', results );
});
// ...
$.subscribe( 'twitter/results', function( e, results ) {
$('body').html(
$.map( results.results, function( obj, index) {
return '<li>' + obj.text + '</li>';
}).join('')
);
});
</script>
</body>
</html>
On gists
JavaScript
jQuery
jQuery-plugins
Twitter plugin by JW
twitter.js #
// Utility
if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
function F() {};
F.prototype = obj;
return new F();
};
}
(function( $, window, document, undefined ) {
var Twitter = {
init: function( options, elem ) {
var self = this;
self.elem = elem;
self.$elem = $( elem );
self.url = 'https://api.twitter.com/1.1/search/tweets.json';
self.search = ( typeof options === 'string' )
? options
: options.search;
self.options = $.extend( {}, $.fn.queryTwitter.options, options );
self.refresh( 1 );
},
refresh: function( length ) {
var self = this;
setTimeout(function() {
self.fetch().done(function( results ) {
results = self.limit( results.results, self.options.limit );
self.buildFrag( results );
self.display();
if ( typeof self.options.onComplete === 'function' ) {
self.options.onComplete.apply( self.elem, arguments );
}
if ( self.options.refresh ) {
self.refresh();
}
});
}, length || self.options.refresh );
},
fetch: function() {
return $.ajax({
url: this.url,
data: { q: this.search },
dataType: 'jsonp'
});
},
buildFrag: function( results ) {
var self = this;
self.tweets = $.map( results, function( obj, i) {
return $( self.options.wrapEachWith ).append ( obj.text )[0];
});
},
display: function() {
var self = this;
if ( self.options.transition === 'none' || !self.options.transition ) {
self.$elem.html( self.tweets ); // that's available??
} else {
self.$elem[ self.options.transition ]( 500, function() {
$(this).html( self.tweets )[ self.options.transition ]( 500 );
});
}
},
limit: function( obj, count ) {
return obj.slice( 0, count );
}
};
$.fn.queryTwitter = function( options ) {
return this.each(function() {
var twitter = Object.create( Twitter );
twitter.init( options, this );
$.data( this, 'queryTwitter', twitter );
});
};
$.fn.queryTwitter.options = {
search: '@tutspremium',
wrapEachWith: '<li></li>',
limit: 10,
refresh: null,
onComplete: null,
transition: 'fadeToggle'
};
})( jQuery, window, document );
On gists
JavaScript
jQuery
Twitter object - @Jeffrey Wawy
index.html #
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Twitter</title>
<style>
body { width: 600px; margin: auto; }
ul { list-style: none; }
li { padding-bottom: 1em; }
img { float: left; padding-right: 1em; }
a { text-decoration: none; color: #333; }
</style>
</head>
<body>
<ul id="biebster-tweets">
<script id="tweets-template" type="text/x-handlebars-template">
{{#each this}}
<li>
<img src="{{thumb}}" alt="{{author}}">
<p><a href="{{url}}">{{tweet}}</a></p>
</li>
{{/each}}
</script>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function() {
var Twitter = {
init: function( config ) {
this.url = 'http://search.twitter.com/search.json?q=' + config.query + '&callback=?';
this.template = config.template;
this.container = config.container;
this.fetch();
},
attachTemplate: function() {
var template = Handlebars.compile( this.template );
this.container.append( template( this.tweets ) );
},
fetch: function() {
var self = this;
$.getJSON( this.url, function( data ) {
self.tweets = $.map( data.results, function( tweet ) {
return {
author: tweet.from_user,
tweet: tweet.text,
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
};
});
// For future lessons, research $.deferred, viewers. :)
self.attachTemplate();
});
}
};
Twitter.init({
template: $('#tweets-template').html(),
container: $('#biebster-tweets'),
query: 'Justin Bieber'
});
})();
</script>
</body>
</html>
On gists
JavaScript
jQuery
Jquery plugin with events
demo.html #
What about using triggers? Does anyone know any drawback using them? The benefit is that all internal variables are accessible via the triggers, and the code is very simple.
See on jsfiddle.
Example usage
<div id="mydiv">This is the message container...</div>
<script>
var mp = $("#mydiv").messagePlugin();
// the plugin returns the element it is called on
mp.trigger("messagePlugin.saySomething", "hello");
// so defining the mp variable is not needed...
$("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>
On gists
JavaScript
jQuery
PHP
Responsive
Ul to select (for responsive navigation)
example.js #
$(function(){
var select = $("select");
$("nav a").each(function(){
var $this = $(this);
var text = $this.text();
var level = $this.parents("ul").length;
var indent = '';
if (level > 1)
{
indent = str_repeat("\u2013", level);
}
select.append('<option>'+indent + text+'</option>');
});
});
function str_repeat(string, times) {
var repeatedString = "";
while (times > 0) {
repeatedString += string;
times--;
}
return repeatedString;
}
On gists
JavaScript
jQuery
is element in view while a scrolling?
demo.html #
<h2>Scroll Down! ⇓</h2>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
On gists
JavaScript
jQuery
jQuery - proxy
jquery-proxy.js #
// immediately invoke fn
// nahrazka
$('#myElement').click(function() {
(function(el){
setTimeout(function() {
// Problem! In this function "this" is not our element!
el.addClass('colorme');
}, 1000);
})($(this)); // self executing function
});
On gists
jQuery
Selector Caching in jQuery
Selector Caching in jQuery.js #
function SelectorCache() {
var collection = {};
function getFromCache(selector) {
if (undefined === collection[selector]) {
collection[selector] = $(selector);
}
return collection[selector];
}
return {
get: getFromCache
};
}
var selectors = new SelectorCache();
// Usage $('#element') becomes:
selectors.get('#element');