Home

JavaScript

Automatic Header stick to scroll with jQuery

Tags:
Submitted by ruturaj on 7 August 2011 - 2:55pm.

Many must've seen this automatic-header-scroll-stick feature. Where a normal looking header suddenly sticks to the page when the page is scrolled.

Gmail to recently introduced such a "auto-sticking-interaction-header". I thought I should give a simple explanation about it.

Demo

In the above HTML page, observe the following

  • A well defined stickyheader ID
  • jQuery inclusion
  • .. and some jQuery magic !

Explained ...

At first we determine the offset of the #stickyheader, and grab the top variable of the object

Once done that, we bind the scroll event/method to the window object using jQuery magic. And to it we do the following

IF window.scrollTop exceeds the #stickyheader's offsetTop, we simply set #stickyheader's css as position: fixed; top: 0px. As soon as window.scrollTop drops below the offset, we make it stick back to its original position using position: static, The default positioning of the element.

Thats it!

Warning: Doesn't work in IE6x, 7, etc or I don't know - I DONT CARE

»

jQuery 1.4 released

Tags:
Submitted by ruturaj on 15 January 2010 - 10:57am.

My favourite Javascript library, jQuery has a new version, jQuery 1.4.

It features some of these

  • Even better performance compared to v. 1.3.x
  • Serialization like PHP, same param serialized like foo[]=bar1&foo[]=bar2
  • Easy Setter Functions
  • The performance of .css() and .attr() has been improved
  • All Events Can Be Live Events
»

Gmail style Static message box using jQuery

Tags:
Submitted by ruturaj on 2 October 2009 - 2:59pm.

If u want to see a gmail style, "Loading" message box on ur application, its extremely simple using jQuery and CSS. All u need to know is

  1. jQuery
  2. HTML and good CSS, duh!
»

Photography is like Javascript

Tags:
Submitted by ruturaj on 20 February 2008 - 9:30am.

A lovely quote from one of my favourite feeds, dustindiaz.com

Photography is like JavaScript
As if you didn’t know it was coming to this. But let me be the first to put it into words. Photography is like JavaScript, and JavaScript is like photography. They are both expressive and beautiful. They can be done bad or good ... Both can detailed and complicated. Both can be simple. They are both object-oriented.

..more

»

A better $ function

Tags:
Submitted by ruturaj on 23 October 2007 - 12:10pm.

U may remember the $ function from prototype.js and the famous Top 10 JavaScript Functions.

It was when it struck me, that the multiple arguments to the $ function returns an array, a numeric index based array. So to refer to the numeric indexes, u need to remember the order that u'd specified ur ids.

My new $ function is a little better, it returns an object with the id's name as the member name.

function $() {
	var elements = {};
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements[arguments[i]] = element;
	}
	return elements;
}
»

AJAX: Hotmail vs Yahoo Mail

Tags:
Submitted by ruturaj on 24 October 2006 - 1:55pm.

So both Yahoo Mail! and Hotmail have come up with their AJAX based UIs. Its time I did a comparison.

Yahoo! Mail

yahoo-mail-ajax.gif

Hotmail

hotmail-ajax.png

Use of Colors, Icons, images

  • Hotmail, has worked upon its old icons, making them with gradient backgrounds though.
  • Yahoo has created bold new Icons, Their Icons are more intuitive. They are bigger, considering the higher resolutions (more than 1024 x 768). Hotmail’s icons’ main image still is small, with Text beside it to help
  • Hotmail has already given multiple themes like Blue, Red, Black, Sliver, Yahoo still lacks it, or atleast I wasn’t able to find it.

Read the rest of this entry »

»

Web Accessibility: Anchor tags for Popup windows

Tags:
Submitted by ruturaj on 16 September 2006 - 1:46pm.

Many a times, on your page, you need to have a JavaScript pop-up window for Slideshow, gallery, comment form, etc. But you also want to have your site WAI compatible. What do you do ?

The idea is to pop-up windows in Browsers that support JavaScript and provide actual href value to the Anchor tag a. But also provide an onclick event that pops up the window.

»

Spawning popup windows in Firefox

Tags:
Submitted by ruturaj on 22 July 2006 - 4:04pm.

New browsers like Firefox(my fav.), IE 7 are very intelligent, they will not allow the standard popup of window.onload or standard...

...
<body onload="load_popup()">
...

They have decent pop-up blockers, which we want to escape.

The new browsers, will consider it a spammed popup, and will kill it before its spawned. They will only create a popup if there is user interaction, as you can see, window.onload and body's onload is not user interaction.

So, how should my advertiser's pop-up be displayed? What user interaction should I wait before I get my popup?

»

JavaScript

Tags:
Submitted by ruturaj on 22 July 2006 - 3:54pm.

A lot is still unexplored in this area (of JavaScript). I shall try to help out others, who are keen to get with it.

var js = {
  lang: "JavaScript",
  amIGood: function () { return "O u bet!"; },
  start: function () { return "Read more on ruturaj.net"; }
};

alert(js.amIGood());
alert(js.start());
»

Creating a Live Score Board Client Logic

Tags:
Submitted by ruturaj on 28 January 2006 - 8:22pm.

The the custom JavaScript object player is defined as below.

function player () {
	
	this.name = '';
	this.serving = false;
	this.gamepoint = 0;
	this.sets = new Array();
	
	this.toString = function() {
		return (this.name + ": " + (this.serving ? 'Serving' : 'Facing') + "\n" + this.sets + "\n" + this.gamepoint);
	}
}

The sets member variable is an array.

»
12next ›last »