Revolution Web Design Blog - Javascript

5 CSS3 Techniques For Major Browsers - using jQuery???

Thu, 26 Feb 2009 06:09:00 -0600

yah, great post, from a site that i found while reading some tweets this morning. thanks ray camden for the point in the direction, this is a cool little explanation of 5 different things you can do with jQuery that used to be cumbersome, if not down right impossible with plain old css. anyhow, check this post out... cool info.

Thickbox + Jquery = Great lightbox effect!

Sat, 16 Feb 2008 09:07:00 -0600

so, im doing a new site for a friend and had to implement a new web 2.0 style (woo hoo yeah woo) lightbox effect. well, after toying around with mooFX, scriptaculous and jquery (by itself), i got really really frustrated. the code seemed to be bloated (as ive read now), the visuals were kinda klunky, and it just was more than i needed... thankfully, the dude who wrote this, thinned things out, and it works like a charm... so, here we have THICKBOX - a great tool built on jQuery that needs, jquery's latest build, the thickbox.css file, and the thickbox.js file to include. literally, its as simple as this... for the javascript files

and like this... for the .css file

and then for the ajax part of it, and to actually make it work, use this


Description:

Use a hidden HTTP request (AJAX) to fetch files from the same server and have ThickBox display the contents of the files.
Instructions:

    * Create a link element ()
    * Give the link a class attribute with a value of thickbox (class="thickbox")
    * Provide a path in the href to the file/directory on the server. (href="ajaxLogin.htm")
    * In the href attribute, after the URL path to the file, add the following query on to the end of the URL:

      ?height=300&width=300

    * Change the values of height and width in the query accordingly
    * Optionally you may add modal=true to the query string (e.g. ?height=300&width=300&modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the login example, where you must click cancel to close the ThickBox.

and in the tag you want to use to activate the lightbox, simply use this:


Update your profile

where the .html file i have could be any file you want to pull into the div that becomes your lightbox! its that easy!!! im a designer/developer hybrid, not quite a javascript expert, and more of a designer than a developer, except when it comes to ColdFusion, whereby, EVERYONE can be a developer :) hahha, ok, anyway, the implementation is soo darn simple, i can only say, that thanks to jake at rainn for showing me about thickbox, and dan vega who last night told me about jQuery, not only am i implementing thickbox, but im populating the thickbox window with another external html file, using AJAX! hah! so, me, a lowly designer is using all these cool things, and it couldnt have been any easier to implement. head on over to the thickbox implementation page, and check it out... ps. here is my little piece that im doing click on "Update Your Profile" on the left side, just a bit down the page... (the site isnt done yet, its going to be a cool site overall, and the cause is awesome, so, if when im done the site, you feel like donating to RAINN, go here, and do so. thanks!)

cfwindow for cf7

Mon, 07 Jan 2008 10:11:00 -0600

dan vega, a tireless cf developer has created a great little custom tag that enables cf developers who are still on cf7 to have cfwindow like functionality by extending the extjs library. here is a link to the riaforge page, and here is a link to his demo page.

Got API? The most comprehensive API Collection on the Web

Mon, 19 Mar 2007 16:56:00 -0600

Found a cool little site, GotAPI.com, "The most comprehensive API Collection on the Web", that VERY clearly lays out some very handy information about all your favorite web languages, and other API's in a user interface, that makes accesing the information, QUITE EASY.

Included on the site: PHP, Ruby/Rails, Python, Perl, Macromedia, Groovy, Drupal CMS, Flickr Prolog, Databases, JAVA, Java2ME, Apache Ant, HTML, Cascading Style Sheets (CSS), JavaScript/HTML DOM, AJAX and Frameworks, XML, C/C++

I was poking around for quotedValueList as a type of function, google popped this site up for me, and im quite impressed. Mostly, I'm impressed because it also allows for user input of information.

Anyway, check it out... its quite impressive and very well done! The usability is spot on!

GotApi.com

Escapa! Flash Javascript game of the day

Mon, 06 Feb 2006 11:52:00 -0600

yet another cool little flash game makes its rounds through the web, and they always seem to to end up here. this one is fun, a bit simple, YOU'D THINK! well, think again, this is fun, this is tough, and there is a pattern that if you can figure out... will make your stay quite rewardable! from what i hear of you slam past 18, you are doing good. at the time of this post, i can barely get past 17. http://members.iinet.net.au/~pontipak/redsquare.html

prevent double-click form submit

Wed, 20 Oct 2004 21:02:00 -0600

this handy little snippet will prevent your users from double-clicking a form submission. its quick its easy, and ALL websites should have it. imagine the processing that goes on due to a double clicker who double click's EVERYTHING! onclick="this.disabled=true;this.form.submit();" drop that in the end of your submit button. here is the full code (be sure to put this in between tags:

another cool javascript

Tue, 28 Sep 2004 12:06:00 -0600

the ever elusive type-and-look ahead select boxes (combo boxes) that windows programmers had for years is available in javascript form. thanks to danny goodman for this bit of code that makes type and look ahead functionality possible... link to type and look ahead javascript code the code:

/***************
"search"
select Element Type-Ahead for IE/Windows by Danny Goodman (www.dannyg.com)
A bonus recipe for readers of O'Reilly's
"JavaScript & DHTML Cookbook"
This recipe first published at O'Reilly Network (www.oreillynet.com)
For full implementation notes, read the article.
****************/

// global storage object for type-ahead info, including reset() method var typeAheadInfo = {last:0,
accumString:"",
delay:500,
timeout:null,
reset:function() {this.last=0; this.accumString=""}
};
// function invoked by select element's onkeydown event handler function typeAhead() {
// limit processing to IE event model supporter; don't trap Ctrl+keys if (window.event && !window.event.ctrlKey) {
// timer for current event var now = new Date();
// process for an empty accumString or an event within [delay] ms of last if (typeAheadInfo.accumString == "" || now - typeAheadInfo.last < typeAheadInfo.delay) {
// make shortcut event object reference var evt = window.event;
// get reference to the select element var selectElem = evt.srcElement;
// get typed character ASCII value var charCode = evt.keyCode;
// get the actual character, converted to uppercase var newChar = String.fromCharCode(charCode).toUpperCase();
// append new character to accumString storage typeAheadInfo.accumString += newChar;
// grab all select element option objects as an array var selectOptions = selectElem.options;
// prepare local variables for use inside loop var txt, nearest;
// look through all options for a match starting with accumString for (var i = 0; i < selectOptions.length; i++) {
// convert each item's text to uppercase to facilitate comparison // (use value property if you want match to be for hidden option value) txt = selectOptions[i].text.toUpperCase();
// record nearest lowest index, if applicable nearest = (typeAheadInfo.accumString > txt.substr(0, typeAheadInfo.accumString.length)) ? i : nearest;
// process if accumString is at start of option text if (txt.indexOf(typeAheadInfo.accumString) == 0) {
// stop any previous timeout timer clearTimeout(typeAheadInfo.timeout);
// store current event's time in object typeAheadInfo.last = now;
// reset typeAhead properties in [delay] ms unless cleared beforehand typeAheadInfo.timeout = setTimeout("typeAheadInfo.reset()", typeAheadInfo.delay);
// visibly select the matching item selectElem.selectedIndex = i;
// prevent default event actions and propagation evt.cancelBubble = true;
evt.returnValue = false;
// exit function return false;
}
}
// if a next lowest match exists, select it if (nearest != null) {
selectElem.selectedIndex = nearest;
}
} else {
// not a desired event, so clear timeout clearTimeout(typeAheadInfo.timeout);
}
// reset global object typeAheadInfo.reset();
}
return true;
}

what to do with the drop down box:

<select onkeydown="typeAhead()">
<option value="tony">tony
<option value="your mom">your mom
<option value="your dad">your dad
<option value="krishna">krishna
<option value="rocky">rocky
</select>