You are currently browsing the tag archive for the ‘jQuery’ tag.
Perfect for situations that have no clear timeout, but only happen once.
Usage
untilTimeout(function(){
var elements = $('.foo select');
if(elements.length > 1){
doStuffWith(elements)
return true;
}
}, 100)
Code
function untilTimeout(callback, time){
var timer = setInterval(function(){
if(callback()){
clearInterval(timer);
}
}, time)
}
I recently set out to find a good slideshow for our homepage, but most of them are monsters, with 20kb code, no thanks…
The simples/best solution i found was the s3Slider somewhat simple and looks good.
But after it started behaving silly (sliding to fast/slow, hanging on mouseover) I decided to fix it and discovered a pile of spaghetti. So here is my s3_slider rewrite download that is smaller(now ~1kb) / simpler / maintainable and more easy to setup! Demo of the new version
So far we parsed our feeds with the acts_as_feed Rails plugin but as long as you only want to show them to users, there is an easier alternative: Googles JS Feed API!
Result
rss feed through google rss api
(The Example uses jQuery)
Example
<script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.js'></script>
<script type="text/javascript" src='http://www.google.com/jsapi?key=YOUR_API_KEY'></script><script>
google.load("feeds", "1");
$(function(){
var feed = new google.feeds.Feed("http://rathershort.weblo.gg/rss.xml");
feed.load(function(result) {
if (result.error)return;
$feed = $('#feed_entries');
for (var i = 0; i < 3; i++) {
var entry = result.feed.entries[i];
$feed.append(
'<div class="home_container_item">'+
'<h3><a href="'+entry.link+'">'+entry.title.truncate(25)+'</a></h3>'+
'<div class="small_gray">'+entry.publishedDate.toDate().formatted()+'</div>'+
'<div>'+entry.contentSnippet.truncate(60)+'</div>'+
'<br>'+
'</div>'
);
}
});
});
//DATE
Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Date.prototype.formatted = function(){
return this.getDate()+' '+Date.shortMonths[this.getMonth()]+' '+this.getFullYear();
};
//STRING
String.prototype.toDate = function(){
var d = new Date();
d.setTime(Date.parse(this));
return d;
};
String.prototype.truncate = function(to_length){
if(to_length >= this.length)return this;
return this.substring(0, to_length-3)+'...';
};
</script>
# Controller
class UserController < ApplicationController
autocomplete_for :user, :name
end
#Customized....
autocomplete_for :user, :name do |items,method|
render :text => items.map{|item| "#{item.send(method)} -- #{item.id}"}.join("\n")
end
# View
<%= f.text_field :auto_user_name, :class => 'autocomplete', 'autocomplete_url'=>autocomplete_for_user_name_users_path %>
# Routes
map.resources :users, :collection => { :autocomplete_for_user_name => :get}
#JS
#any library you like
#(includes examples for jquery jquery.js + jquery.autocomplete.js + jquery.autocomplete.css )
jQuery(function($){//on document ready
//autocomplete
$('input.autocomplete').each(function(){
var input = $(this);
input.autocomplete(input.attr('autocomplete_url'));
});
});
#Model(input/output association)
class User
find_by_autocomplete('name')
end
class Post
autocomplete_for('user','name') # auto_user_name= + auto_user_name
end
.
Not as thought free as the default version, but gives you a lot more control.
script/plugin install git://github.com/grosser/simple_auto_complete.git
README
I needed a simple Tic Tac Toe game for a easter egg in one of our products, but all games out there are a horrible code mess (think html 3.0 style *urgs* with js calls everywhere and inline styles *urgs*) so i took the best one and refactored all js/css out of the code, and here it is, still ugly code, but it will keep your namespace clean!
Have fun!
