Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Javascript: Inversely Proportional

Tuesday, January 12th, 2010

I’m working on a project that uses the JScrollPane JQuery Plugin to scroll a number of records. My client wanted the scroll bar to have a variable height (like most modern scroll bars). The height of the scroll bar should be determined by the number of records – the height should decrease as the number of records increase. So the scroll bar height is inversely proportional to the number of records.

First I had to determine the number of records (stored in json record):

^?View Code JAVASCRIPT

var numRecs = data.reviews.length;

I also had to determine the maximum height of the scroll bar. I wanted the scroll bar to never exceed 80% of the height of it’s container.

^?View Code JAVASCRIPT

var cHeight = parseInt(('#myScroll').css('height')); 
var maxBar = Math.ceil(cHeight * .80);

I also determined if the container has 500 or more records the scroll bar height should be 20px. Now this was a bit of a random determination, but my client agreed with the logic (he wanted the scroll bar to be no smaller than 20px).

I used these values to determine the constant.

^?View Code JAVASCRIPT

// xy = k 
// numRecs*barH = constant (500*20 = 10000)
// So,
// barH = constant/numRecs

So now I had my formula for inverse proportionality:

^?View Code JAVASCRIPT

var maxBarHeight = '';
// if the number records is equal to or greater than 500,
// then the bar height is 20px
// else
// calculate the height of the scroll bar based upon
// the inverse proportionality formula 
if (numRecs >= 500) {
	maxBarHeight = 20;
} else {
	maxBarHeight = Math.ceil(10000/numRecs);
}
// if the bar height exceeds maximum height,
// set the bar height at 80% of it's container
if (maxBarHeight > maxBar) {
	maxBarHeight = maxBar;
}
$('#myScroll').jScrollPane({scrollbarWidth: 2, dragMaxHeight: maxBarHeight, scrollbarOnLeft: true});

Easy enough. Here’s the entire code:

^?View Code JAVASCRIPT

var numRecs = data.reviews.length;
var cHeight = parseInt(('#myScroll').css('height')); 
var maxBar = Math.ceil(cHeight * .80);
if (numRecs >= 500) {
	maxBarHeight = 20;
} else {
	maxBarHeight = Math.ceil(10000/numRecs);
}
if (maxBarHeight > maxBar) {
	maxBarHeight = maxBar;
}
$('#myScroll').jScrollPane({scrollbarWidth: 2, dragMaxHeight: maxBarHeight, scrollbarOnLeft: true});

Inverse proportionality is not difficult to determine once you have the constant. Enjoy.

Categories: Javascript, JQuery
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

One Response to “Javascript: Inversely Proportional”

passive online income Says:
April 12th, 2011 at 6:34 pm

Hi, I have been reading and enjoying your posts for some time now. I appreciate your spin on things. I’m finally going to bookmark your website so I can keep returning to it. I repeatedly happen upon it and keep thinking it’s amazing but never saving it. See you next time! Keep providing us with these great writings!

Javascript: Inversely Proportional

One Response to “Javascript: Inversely Proportional”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll