I was implementing an Ajax feature for a project and felt the need to display messages (progressing, savings prompt, etc.) to the users visibly and unobtrusively. Usually, to indicate a background activity, I tend to hide the link/button/checkbox and show a spinning indicator when the Ajax request was created, then return the link when the request has completed. In this case, there is no user-controllable submit button. It is a photo album page which allows users to rearrange their photos by simply dragging-and-dropping the photos into the correct positions. The positions are saved automatically on the fly. If I am to implement a typical spinning indicator, I have to make sure that it is visible enough for the user to know that the positions are being saved. However, if the user is at mid-page, any indicator at the top section of the page won’t be visible. If I place the indicator at the bottom of the page, I still run into the same situation. My solution is to implement a smart “Prompt” bar that stays affixed to the screen. With Prototype and Scriptaculous, implementation is a breeze.
Show, don’t just tell
Here is a demo which you can try out.
Details
This is made possible by using the “position:fixed” feature of CSS. According to W3Schools,
position: fixed
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
The markup
Here is the HTML for the prompt bar. You can place this HTML anywhere in the page. Ideally it should be outside any container.
Some Prompt Here
CSS
#prompt
{ position: fixed; width: 400px; height: 20px; border: 1px solid #7F7F7F;z-index: 9999; background-color: #F3FF8F; }
#prompt_message
{ float: left; text-align: center; width: 380px; font-weight: bold;}
#prompt_close
{ float: right; width:16px;}
We have to set the prompt bar’s position to be fixed so that it will stay in place when we scroll the browser window.
The script
The javascript code is fairly simple, since Prototype and Scriptaculous already do the all the heavy lifting (e.g. positioning, animation). The only catch with position:fixed div is that we cannot center the prompt div using CSS. We have to explicitly set the left coordinate before we display the bar (line 16, _center() method). This is to also useful when the user resizes the browser window, we recalculate the position and center the div accordingly.
var Prompt = {
autoHideTime: 5000
,display: function( msg, options ) {
$('prompt_message').innerHTML = msg;
Prompt.show();
if( options && options.autoHide )
setTimeout('Prompt.hide()', options.autoHideTime || Prompt.autoHideTime );
}
,working: function(msg, options) {
msg = '
’ + msg;
Prompt.display( msg, options );
}
, _center: function(){
$(’prompt’).style.left = ( ( document.viewport.getWidth() - parseInt( $(’prompt’).offsetWidth ) ) / 2 ) + ‘px’ ;
}
,show: function(){
Prompt._center();
new Effect.Move ($(’prompt’),{ x: parseInt( $(’prompt’).style.left ), y: 0, mode: ‘absolute’, duration: 0.2 });
}
,hide: function( msg) {
new Effect.Move ($(’prompt’),{ x: parseInt( $(’prompt’).style.left ), y: -30, mode: ‘absolute’, duration: 0.1 });
}
}
Since the code is simple enough, I’d like to leave the details to you to work out.
Enjoy!
Download
I packaged the demo as a zip file so you can grab it and have some fun. Cheers!
I guess my relationship with the Lenovo 3000 N100 laptop is a complicated one: as much as I hated the Home/End/Page up/Page down combo madness, I truely missed that 2 extra buttons that my Dell D830 doesn’t have. Now instead of just flicking my finger to hit Home or End, I have to move my entire arm to reach for either End or Home. Even though now I won’t make any mistakes with Home/End jumping as with the Lenovo, I have to slow down the typing with the Dell…. NO! Only if Dell put the 2 extra home/end button next to their Arrow buttons… Why can’t we just live happily with each other? Is it really that hard to design a good working keyboard, or is it me that just being picky about laptop keyboard?
I had to order a new replacement for my new Dell Latitude D830. I thought that there was something wrong with my particular D830’s battery compartment since there is a gap between the memory and the rest of the laptop body. I have a 9-Cell battery and it was not fully tight-fit. The gap wasn’t that big but I could actually wiggle the battery and had it making some clicking noise. So I had Dell send me a new replacement. An exact D830 was sent to me. It’s so exact that the same issue happens, again! 2 brand new D830, same wiggling battery compartment! Anyhow, I think I just live with it since I can fix the issue by putting a small peace of folded paper between the battery and the compartment wall to nudge-fit it. I think that the issue is specific to the 9-Cell battery and the D830. Buyer beware!
Since these days I practically live inside Visual Studio (and e editor at night for RoR), here is a small list of shortcuts for Visual Studio. These shortcuts will vary depend on your coding environment, but so far these I have tested to work for VB# environment in VS2005. Enjoy!
I’m back from a period of hibernation. Lots of exciting stuff and new things, just barely have enough time to sleep and catch up with all the pending projects that I’ve been crazily taking on. Anyway, today I’d like to share something that maybe useful for someone out there: how to retrieve live stock quote data using Yahoo quote service with ColdFusion.
The code is pretty simple: we will read from the result the Yahoo CSV service using the