<a href="#top" onclick="$('html, body').animate({scrollTop:0}, 'slow'); return false;">top</a>
2009-08-22T15:57:58Z
200
16
false
back to top
2009-08-22T15:57:58Z
7
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready( function() {
var url = "http://twitter.com/status/user_timeline/RedWolves.json?count=3&callback=?";
$.getJSON(url,
function(data){
$.each(data, function(i, item) {
$("img#profile").attr("src", item.user["profile_image_url"]);
$("#tweets ul").append("<li>" + item.text.linkify() + " <span class='created_at'>" + relative_time(item.created_at) + " via " + item.source + "</span></li>");
});
});
});
String.prototype.linkify = function() {
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
return m.link(m);
});
};
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
var r = '';
if (delta < 60) {
r = 'a minute ago';
} else if(delta < 120) {
r = 'couple of minutes ago';
} else if(delta < (45*60)) {
r = (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
r = 'an hour ago';
} else if(delta < (24*60*60)) {
r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
r = '1 day ago';
} else {
r = (parseInt(delta / 86400)).toString() + ' days ago';
}
return r;
}
function twitter_callback ()
{
return true;
}
</script>
</head>
<body>
<div id="tweets">
<img id="profile">
<ul></ul>
</div>
</body>
</html>
2009-05-10T18:27:20Z
http://ralphwhitbeck.com/content/binary/twitter-json-jquery.html
176
16
false
jquery twitter
2009-05-10T18:27:20Z
7
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var height = 0;
var to = null;
var theAnimation;
var newsScroller;
$(document)
.ready(function(){
newsScroller = $('#newsScroller');
var curSet = newsScroller
.prev()
.addClass('ns')
.end()
.wrap('<div>')
.parent()
.addClass('ns')
.end()
.wrap('<div>')
.children()
.slice(0,4)
.each(function(){
height += $(this).outerHeight(true);
});
theAnimation = function(){
if( !newsScroller.is(':animated') ){
newsScroller.animate({top:-height},1000,function(){
height = 0;
curSet = newsScroller
.append(curSet)
.css('top',0)
.children()
.slice(0,4)
.each(function(){
height += $(this).outerHeight(true);
});
});
}
};
to = setInterval(theAnimation,4000);
newsScroller.bind('mouseenter',function(){
clearInterval(to);
})
.bind('mouseleave',function(){
theAnimation();
to = setInterval(theAnimation,4000);
});
});
</script>
<style media="screen, projector">
h3#newsScrollerTitle{
margin:0;
padding:0;
font:bold 14px/1.2 Georgia, "Times New Roman", Times, serif;
}
dl#newsScroller{
font:normal 11px/1.4 Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
dl#newsScroller dt{
font-weight:bold;
}
dl#newsScroller dd{
padding:0 0 0 11px;
margin:0;
}
dl#newsScroller dd p{
padding:0;
margin:0 0 11px 0;
}
dl#newsScroller dd + dd{
padding:0 0 0 22px;
}
h3#newsScrollerTitle.ns{
padding:5px 11px;
border:1px solid #B18C58;
border-bottom:none;
background:#beb677;
width:278px;
}
div.ns{
padding:11px;
border:1px solid #B18C58;
border-top:none;
background:#E8E4B4;
width:278px;
height:300px;
position:relative;
overflow:hidden;
}
div.ns div{
height:300px;
overflow:hidden;
}
div.ns dl{
position:relative;
top:0;
}
div.ns dl dt,
div.ns dl dd{
position:relative;
}
</style>
</head>
<body>
<h3 id="newsScrollerTitle">Our News</h3>
<dl id="newsScroller">
<dt>Web Tech November Meetup Presentation</dt>
<dd>
<p>Last night I had the opportunity to speak at the Web Tech
November Meetup in Baltimore about jQuery. I focused mainly
on traversing since I believe once you fully grasp some of
the built in jQuery traversing methods you can do just about
anything using jQuery and do it easily.</p>
<p>Preparations<br/>
I spent about three weeks getting [...]</p>
</dd>
<dd>Tuesday, November 25th, 2008</dd>
<dd>Posted in Presentations, Web Development, jQuery | Edit | No Comments »</dd>
<dt>Slide in tab window using jQuery</dt>
<dd>
<p>Say you want to wanted to put little tabs - you know, the
ones like what you get from a lawyer or a realestate again to
point out important things - off the side of your page so that
your users can click, bring that tab into view to see what
important information you want [...]</p>
</dd>
<dd>Thursday, November 20th, 2008</dd>
<dd>Posted in Tips, Tutorials, Web Development, jQuery | Edit | 5 Comments »</dd>
<dt>Better jQuery Code #2</dt>
<dd>
<p>In a follow up to my Better jQuery Code #1 post I will be
writing about some other small items that I have found to make
my code better and more readable.</p>
<p>Chaining<br/>
Chaining is one of the most beautiful and time save pieces of
code structure that jQuery brought to the game, the problem is
is [...] </p>
</dd>
<dd>Sunday, November 16th, 2008</dd>
<dd>Posted in Tips, Web Development, jQuery | Edit | 2 Comments »</dd>
<dt>Better jQuery Code #1</dt>
<dd>
<p>I've been wanting to write some jQuery tips for a while now
and just never know what to really say until I saw Marc
Grabanski's 5 Tips for Better jQuery Code. Although I have
tips, I don't think I have any that are Earth shattering or ones
that I can rank higher then the other, [...]</p>
</dd>
<dd>Saturday, November 15th, 2008</dd>
<dd>Posted in Tips, Web Development, jQuery | Edit | 8 Comments »</dd>
<dt>Release of jQuery UI v1.5</dt>
<dd>
<p>Well ladies and gents, it is finally here! Mark June 9th, 2008
as the day the web got better, jQuery's long awaited release of
it's UI library update is here. Flushed with many bug fixes, a bunch
of really good examples, many new features and a theme builder.</p>
When jQuery UI first came out [...]
</dd>
<dd>Monday, June 9th, 2008</dd>
<dd>Posted in jQuery | Edit | 2 Comments »</dd>
</dl>
</body>
</html>
2009-04-20T01:06:26Z
from http://benjaminsterling.com/blog-news-ticker/
171
16
false
cool newsticker using jquery
2009-04-20T01:06:26Z
7
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".link").mouseover(function() {
$(this).animate({ color: "#022d3f" }, 1000);
}).mouseout(function() {
$(this).animate({ color: "#ccc" }, 1000);
})
</script>
2009-04-17T18:48:58Z
166
16
false
jquery mouseover/mouseout effect in link
2009-04-17T18:48:58Z
7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#content").vAlign();
$("#content").hAlign();
});
</script>
<style type="text/css">
html { background: #fafafa; }
#content
{
background: #fff;
border: 10px solid #eee;
padding: 20px;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
text-align: justify;
}
#content { width: 400px; }
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique.
</div>
</body>
</html>
2009-02-25T15:21:37Z
from: http://www.nealgrosskopf.com/tech/thread.asp?pid=37
154
16
false
CSS Horizontal And Vertical Align JQuery Plugin
2009-02-25T15:21:37Z
7
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.twitter.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "leozera",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
});
});
//--><!]]>
</script>
<div id="twitter"></div>
2009-01-05T00:18:30Z
from: http://www.tidbits.com.br/download/exemplos/jquery.twitter/jquery.twitter_original.zip
145
16
false
jquery twitter plugin
2009-01-05T00:18:30Z
7
<% form_tag "/login", :onsubmit => 'return validate(this)' do %>
<!-- your form -->
<% end %>
<!-- or -->
<% form_remote_tag :url => "/login", :update => 'temp', :before => 'if( !validate(this) ) return false' do %>
<!-- your form -->
<% end %>
2008-11-30T21:49:03Z
create your javascript validate function and call in your form
124
16
false
validation client-side with form_tag and form_remote_tag
2008-11-30T21:49:03Z
7
<!--[if IE 6]>
IE 6 is a junkie!
<![endif]-->
2008-11-08T20:29:07Z
used here!
92
16
false
ie6 notice
2008-11-08T20:29:07Z
7
<div id="verticalContainer">
This text will always be vertically centered inside the browser window
</div>
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('verticalContainer'); // Be sure to specify the correct ID
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onresize = function() {
setContent();
}
window.onload = function() {
setContent();
}
</script>
2008-11-01T22:29:54Z
source: http://snipplr.com/view/9321/vertically-align-within-browser-window/
89
16
false
vertical align with javascript
2008-11-01T22:29:54Z
7
<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
<input id="search" type="text" name="q" value="search" onclick="clickclear(this, 'search')" onblur="clickrecall(this,'search')"/>
2008-11-01T22:19:15Z
this's used here!
88
16
false
search box onclick clear/unclear
2008-11-01T22:19:15Z
7