jQuery vs. prototype.js

I’m basically a jQuery developer. I had little knowledge about prototype.js. All I knew is jQuery is better than prototype, so I never got interested about it.

However, for some reason I started a project with prototype.js and each line of code makes it clearer that which one is better. Somehow I finished the project using prototype.js along with scriptaculous.js and effects.js. Everything was fine in IE7 and FF 3. But it breaks in IE6. I was not happy with the unnecessary huge code. For example there is no live event in prototype.js, you can not apply an event to a group of elements with same class (You have to use loop for it), there is nothing like jQuery.animate function by which you can do any css animation (You have to add scriptaculous.js for some pre-built animation effects!) and a lot more limitations.

Even the scriptaculous.js is not that rich, for example using ScrollTo effect you can smoothly scroll to any anchor tag “vertically” only but no way of ScrollTo horizontally(!) in case your page is landscape orianted. Here is the code that I used instead(I found the idea from the source code of ScrollTo function):

var scrollOffsets = document.viewport.getScrollOffsets();
var elementOffsets = $$('div.active ul li')[index].cumulativeOffset();
new Effect.Tween(null,scrollOffsets.left,elementOffsets[0] - lo,function(p){window.scrollTo(p,scrollOffsets.top);});

The equivalend jQuery code is:

$("html,body").animate({
scrollLeft: ($('div.active ul li').eq(index).offset().left - leftOffset) + 'px'
}, "slow", "swing");

There are a lot more examples like this. The summary is the code using prototype.js was 180 lines and the equivalent code using jQuery is now only 160 lines + a lot of mental relief that it would work on all browsers

One thing I want to make clear is I have no intention to boost anything. In fact both of them are free.

Tags | code compare, code optimization, coding, compare jquery prototype, comparison, JavaScript, jQuery, jquery vs. prototype, optimization, prototype.js

A better process to find maximum z-index within a page

Once I needed to get maximum z-index of a DIV to show message at the top of the screen.
Usually, I used arbitrary z-index of 100 of the DIV. But that one is not at the top and it’s hidden by others.
What’s wrong? And unfortunately I found that there are 3 more div-s which have z-index attribute which are greater than 100.
So I changed the z-index to 1000. This time I can see one portion of the DIV.
But 2 more elements get the desired message container DIV overlaid. Frustrating! Huh!
Trial and error method always makes you delay.
I know JavaScript or jQuery may get rid of this hell.
I made an absolute tinny code to find the highest z-index of absolute DIV
to show my shouting box and to make it appear absolutely at the top of all html elements.

//include jQuery.js --  visit: http://jquery.com/
$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});

I used selector of ”body > *‘ instead of ‘body *‘.

”body > *‘ means all tags/elements which are found at first depth of
whether ”body *‘ selects all tags/elements at any depth.
It doesn’t matter what’s is the maximum/highest z-index of an absolute element
rather it matters what’s the maximum/highest z-index of the absolute elements
which are next to in first depth only to show the shouting box on top most strata.

N.B. Shouting box is appended to document.body in this case.

Tags | css, get maximum z-index of a div, help, JavaScript, jQuery, max z-index, maximum z-index of a div, selector, style, tutorial, z-index, zIndex

How to get currently logged on windows username in PHP and Javascript

It is very simple to get the current windows username in PHP. The following one line of code will output the username of the system where the server is running. If you are running this from localhost then your system login name will be shown. But you can not get the visitor’s system login username.

<?php echo getenv("username"); ?>

By using javascript (actually VBscript) you can get the visitor’s windows username. But there are also limitations. It only works on IE.

<script language="VBscript">
Dim X
set X = createobject("WSCRIPT.Network")
dim U
U=x.UserName
MsgBox "username: " & U
</script>
<script language="Javascript">
var a = U;
alert("Hello, " + a.toString());
</script>

This code will show you the current windows username. But won’t work if run from http://. Open the page from your computer with IE and it’ll work, otherwise not.

Actually it is not possible to get the windows username of your website visitors as it is a security issue. So don’t waste your time if you are trying to do that.

Tags | easy, function, get currently logged on windows username, get user, get windows user name using javascript, JavaScript, PHP, pull username, script, simple, username, VBscript, windows, windows system variable, windows username

Javascript timer – advanced features, simple to use

javascript is the core of rich UI development and ajax driven website. i enjoy doing these. but in many cases, i thought things would be easier if the setTimeout(…) or setInterval(…) functions were simpler to handle. if you ever tried to make something like fadeout effect or accordion or anything that happens with a certain interval, you may understand what i mean. so, i thought it would be great to use a timer if anyone made already. i searched, got hundreds. but, none of them seemed perfect for me to use everywhere. for example, if you are familiar with visual basic (former) or .NET timer object, its very easy to use anywhere, anyhow. actually, this was the basic idea for my development (though it supports more than the basic).

so, i wrote a javascript timer object trying to provide a complete object oriented solution (basically for me, but you can use it too . its very simple to use, yet very powerful. you can set your desired interval and a callback function which will be called after each interval.

the simplest use would be:

var timer = new Timer(1000, myfunction);
timer.start();

first parameter sets the interval in milliseconds and second is the callback function to call. so, this will call myfunction() every second.

methods of Timer object and their parameters and return values (API reference) can be found here.

but, dont you want something more? well, in that case, first of all you should know that Timer object supports concatenation for almost every function. so you can rewrite the above code as:

var timer = new Timer(1000, myfunction).start();

whenever you want to stop the timer, just call:

timer.stop();

isn’t that simple? well, that’s just the beginning.

its time you are introduced to some necessary functions:

//pauses the timer
timer.pause();

//resumes the timer, if it was paused
timer.resume();

you should keep in mind that, there is a difference between stop() and pause(). when you pause the timer, it remembers how much of its interval is left. after resuming, it runs the remaining time of its interval. for example, if you set interval to 2000 milliseconds and pause the timer after running 1500 milliseconds; when you resume, it will call the callback function (i.e., myfunction ) after 500 milliseconds. this feature could be useful for rotating ads of news flashers in a website.

also, you have various functions like interval, addCallback, and many more. so, our very first code can be rewritten as:

var timer = new Timer().interval(1000).addCallback(myfunction).start();

or, to please eyes:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction)
.start();

note that, Timer class also supports empty constructor like Timer() which is my personal favorite.

wait.. where is the multiple callback feature? well here it is:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction1)
.addCallback(myfunction2)
//......
.addCallback(myfunctionN)
.start();

okay? well, you should know that functions are executed in parallel. if you dont trust me, try this:

var timer = new Timer();
timer.interval(1000)
.addCallback( function() { alert('hi there.'); } )
.addCallback(myfunction)
.start();

see, alert doesn’t block executing myfunction. i tried adding 20 callback functions. some of them showed time in a div, and some did something else. all of them executed in parallel. i.e., none block others’ execution.

well, so far everything runs forever unless you call timer.stop() or timer.pause(). what if you want the basic setTimeout(…) function back? there’s a way:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction1)
.addCallback(myfunction2)
.runOnce(true)
.start();

this works same as setTimeout(…), i.e., executes myfunction1() and myfunction2() simultaneously one time after the specified interval. plus, you have the ability to stop or pause it anytime. is that sufficient for you? well, there’s more.

imagine, you are building an ajax driven webmail interface (for example, consider gmail). you have a clock showing current time in user’s inbox. also, you want to check if there is internet connection available in every 3 seconds. and you want to check for new mails in every 10 seconds. you may want more, but i will show you a skeleton program of these three feature using Timer object. your code should be something like this:

function update_clock(){
//code to update the clock
}

function check_connection(){
//code to check if there is connectivity with your server
//a simple XMLHttp request may be.
}

function check_mail(){
//an XMLHttp request to check for new mails
}

var timer = new Timer();
timer.interval(1000)
.addCallback(update_clock)
.addCallback(check_connection, 3)
.addCallback(check_mail, 10)
.start();

isn’t that too easy for that complex task? notice the second parameter in addCallback method. think like, the Timer object generates a pulse at given interval. the second parameter of addCallback method tells Timer object that this callback method should be executed at every Nth pulse; where N=1, 2, 3, … (here, N=3, 10). the seconds parameter, N, is optional and default value is 1.

now, off the record, someone asked me, if it can trigger a callback function (say, check_connection function from the example above) in 1.5 second interval!!! whoever is thinking to pass 1.5 (that is the quickest solution, i guess) as the second parameter, please dont. it only accepts integer number. but, there’s a work around. you need to learn some elementary math and come back here. then you will come-up with a solution like this:

var timer = new Timer();
timer.interval(500)
.addCallback(update_clock, 2)    //500 * 2 = 1000
.addCallback(check_connection, 3)    //500 * 1.5 * 2 = 1500
.addCallback(check_mail, 20)    //500 * 10 * 2 = 10000
.start();

thats a good solution and this is what i had in mind . wait, one question is still hanging.

what will happen if i add .runOnce(true) just above .start() in the example above?

well, what is desired? i think, each callback function should be executed exactly once. thats what i implemented. so, regardless of continuous pulses provided by Timer object, update_clock() will execute exactly once after 1 sec, check_connection() will execute once after 1.5 sec and check_mail() will execute once after 10 sec. then the timer will stop. any suggestion?

well, there are still few more functions left to mention. but, they are too easy to explain. see API Reference for description/usage of functions of Timer object.

lastly be sure to have a good asp.net web hosting provider, it can make all the difference. for any suggestion, bug report or query, please leave a comment. hope you like it.

Links:

• API Reference
• Source Code
  
• Examples

Tags | advanved timer, callback, JavaScript, multiple callback, object oriented, timer