Let's say you want to attach a click handler to every link on a page. The function for that click handler turns all the other links a different color.
var $allLinks = $("a");
$allLinks.click(function() {
$allLinks.not(this).css("color", "red");
});You can use the .not() function to remove elements from a set, so padding this to that function will remove the current element before the color change.
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
It doesn't have all the fancy callbacks and options, but hey, it makes things draggable (and with a specified handle optionally).
(function($) {
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);$('div').drags();
var news = 2;
hidenews = "- Hide news archive";
shownews = "+ Show news archive";
$(".archive").html( shownews );
$(".news:not(:lt("+news+"))").hide();
$(".archive").click(function (e) {
e.preventDefault();
if ($(".news:eq("+news+")").is(":hidden")) {
$(".news:hidden").show();
$(".archive").html( hidenews );
} else {
$(".news:not(:lt("+news+"))").hide();
$(".archive").html( shownews );
}
});<div class="news">First news</div>
<div class="news">Second news</div>
<div class="news">Third news</div>
<a class="archive" href="#"></a>
This snippet will display the latest post in a specified FeedBurner feed. Just set the URL to your desired FeedBurner feed.
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://feeds.feedburner.com/examplefeed",
success: function(data){
$("#date").text($(data).find("item:first>pubDate:first").text());
$("#title").html("<a href='"+$(data).find("item:first>link:first").text()+"'>"+$(data).find("item:first>title:first").text()+"</a>");
$("#description").html($(data).find("item:first>description:first").text());
}
});
});This example assumes that there are 3 elements that this information will be sent to, with the ID attributes set to date, title and description respectively.
$.getJSON("https://api.twitter.com/1/statuses/user_timeline/chriscoyier.json?count=1&include_rts=1&callback=?", function(data) {
$("#twitter").html(data[0].text);
});Make sure you change username.json to your actual username and #twitter to the actual selector you wish to replace the contents of.
You can play around with this on this CodePen (deprecated).
This is jQuery specific, and contains a bit of a hack/fix for dealing with Chrome. This works between jQuery 1.5.1 and jQuery 1.8.3. It's gone in jQuery 1.9. Presumably because it was used too improperly too frequently and it was hurting the web. Better to feature detect when possible.
var userAgent = navigator.userAgent.toLowerCase(),
browser = '',
version = 0;
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// Is this a version of IE?
if ($.browser.msie) {
userAgent = $.browser.version;
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Internet Explorer";
}
// Is this a version of Chrome?
if ($.browser.chrome) {
userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
// If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
$.browser.safari = false;
browser = "Chrome";
}
// Is this a version of Safari?
if ($.browser.safari) {
userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Safari";
}
// Is this a version of Mozilla?
if ($.browser.mozilla) {
//Is it Firefox?
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Firefox"
}
// If not then it must be another Mozilla
else {
browser = "Mozilla (not Firefox)"
}
}
// Is this a version of Opera?
if ($.browser.opera) {
userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Opera";
}
// Now you have two variables, browser and version
// which have the right info