Short Ajax Script

AJAX - it

I wanted to see how small you could make a fully functional AJAX script that worked cross-browser and degraded gracefully, so I went through an old custom AJAX script and made it as small as I possibly could. In the resulting AJAX scripts, the post version is 410 characters and the GET version is only 359 characters long. The scripts are fully functional and accept the following parameters: URL, DATA (in string form), and ELEMENT (to update).

The scripts could be a little smaller, but it would really kill readability.

“Get” AJAX Script

function a(l,d,u){
try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
if(r){
r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
r.open('GET', l+'?'+d, true);r.send(d);
}
}

“Post” AJAX Script

function b(l,d,u){
try{r = new XMLHttpRequest();} catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');} catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
if(r){
r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML=r.responseText;}}
r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');r.send(d);
}
}

Combined AJAX Script

This combined script also accepts a fourth parameter ‘p’ that should evaluate true if the data is to be sent by post.

function a(l,d,u,p){
try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
if(r){
r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
if(p){r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');}else{r.open('GET', l+'?'+d, true);}
}
}

Demo: (Sorry but you will have to go to the full page so the JavaScript is loaded.) Continue reading »

Displaying WordPress categories in a horizontal dropdown menu.

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

<div style="text-align:center;">
    <ul id="menu" style="padding:0; margin:0;">
        <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
    </ul>
</div>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size:1.2em;
}

ul#menu li {
	float: left;
	padding: 0;
	margin: 0;
	border-right:solid 1px #fff;
}

ul#menu ul li {
	float: none;
	position: relative;
	border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
	border-left: 1px solid #FFF;
	z-index:1000;
}

ul#menu li ul {
	margin: 0;
	padding: 0;
	display:none;
	list-style: none;
	position: absolute;
	background: #9CC;
}
ul#menu ul ul{
	margin-left: .2em;
	position: absolute;
	top: 0; /* if using borders, -1px to align top borders */
	left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
	display: block;
	padding: .2em .3em;
	text-decoration: none;
	background: #5587B3;
	 color: #FFFFFF;
}


ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
	width: 8em;
}

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

Now the last step is the to make it work as a drop-down list on all browsers. This could be done in Firefox with a simple CSS declaration, but Internet Explorer doesn’t understand the :hover pseudo classes, so we mimic this in Javascript.

<script type="text/javascript">
 /*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&&document.createElement) {
	var m=document.getElementById(m);
	mbR[mbR.length] = m;
	var i;

	e=m.getElementsByTagName('a');
	if (!mbTf) mbTf=new Function('mbHT();');
	if (!mbSf) mbSf=new Function('mbS(this);');
	for (i=0;i<e.length;i++) {
		e[i].onmouseout=e[i].onblur=mbTf;
		e[i].onmouseover=e[i].onfocus=mbSf;
	}

	m=m.getElementsByTagName('ul');
	for (i=0;i<m.length;i++) {
		mbH(mbL(m[i]));
	}
}}

function mbHA() {
	if (mbA) {
		while (mbA) mbH(mbA);
		mbHE('block');
	}
}

function mbHT() {
	if (!mbT) mbT=setTimeout('mbHA();', 0);
}

function mbTC() {
	if (mbT) {
		clearTimeout(mbT);
		mbT=null;
	}
}

function mbS(m) {
	mbTC();
	if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
	else mbHE('none');

	if (mbM(m)) {
		mbSH(m,'block');
		mbA=m;
	}
}

function mbH(m) {
	if (m==mbA) mbA=mbP(m);
	mbSH(m,'none');
	mbT=null;
}

function mbL(m) {
	while (m && m.tagName != 'A') m = m.previousSibling;
	return m;
}

function mbM(l) {
	while (l && l.tagName != 'UL') l = l.nextSibling;
	return l;
}

function mbP(m) {
	var p = m.parentNode.parentNode;
	if (p.tagName == 'UL') {
		var i = 0;
		while (i < mbR.length) {
			if (mbR[i] == p) return null;
			i++;
		}
	} else {
		return null;
	}
	return mbL(p);
}

function mbSH(m,v) {
	m.className=v;
	mbM(m).style.display=v;
}

function mbHE(v) {
	mbHEV(v,document.getElementsByTagName('select'));
}

function mbHEV(v,e) {
	for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>

A couple notes on the previous code.

  1. To activate it, change your theme’s <body> tag to <body onload=”mbSet(‘menu’);>
  2. It was not written by me, but I’ve been using it for a long time and don’t remember where I got it.
  3. It can occasionally create a JavaScript error, and I’ve intended to rewrite it for a long time, but it usually works fine.

DIY Javascript Effects Library

As part of a project I needed an extremely light-weight special effects library that would allow queuing of effects (required), multiple effects, the ability to set a per-effect “framerate”, and enough extensibility to fill any need, but it had to be independent of any Javascript library or OS.

For the “core”: I needed it to be able to queue effects to run one after another, but still be able to run effects synchronously with their own queues. Setting up the effects should take no more than a few lines, and the library should be easy adapted to the website or app it is currently running on. The library must also be cross browser, run well on lower end computers, and very very small (the main reason for creating it was as a replacement in a project for people who didn’t want to use jQuery or Scriptaculous just for the effects.) The core should be able to do everything with only being told the element’s ID, whether we are showing or hiding it (if applicable), and the effect to use. An added “feature” I wanted was something that could be used to create a tutorial, so no features could be used that were too fancy.

For the effects: I needed each individual effect to take no more than a few lines of setup, processing and finishing, so the framework needed to control everything, but each effect should be able to set its own duration using the framerate set. It should also be extremely simple to add new effects to the library.

The results: A library that is only 8KB in size (without compression or comments) or 2.9KB with natural (not gZip) compression and no comments with 4 built-in effects. While I’ll admit that the syntax to call effects isn’t as “pretty” as some of the other libraries, it is very simple, and queuing is powerful and easy to set up. If you want to jump ahead and see the finished product go here

This is just a demonstration post. The actual code will be explained in the future.

To test the effects library click here


The that group of effects was done with the following code:
AOI_eff.start('test_1', {'mode': 'show', 'eff': 'Expand', 'queue': ['hide::test_1::Fade','show::test_2::ScrollLeft::450','hide::test_2::ScrollLeft::50','show::test_1::Fade::25']} );

Something a little more interesting: here or the same thing, but with opposite displays here or the same thing, but the effects depend on the display. here




The onClick commands for those effects are, respectively, as follows.

AOI_eff.start('test_3', {'mode': 'show', 'eff': 'Expand', 'delay': 75, 'queue': ['show::test_4::Fade','show::test_5::ScrollLeft','show::test_6::SlideUp::50']} ); AOI_eff.start('test_5', {'mode': 'show', 'eff': 'Expand', 'delay': 75, 'queue': ['show::test_3::Fade']} );
AOI_eff.start('test_3', {'mode': 'hide', 'eff': 'Expand', 'delay': 75, 'queue': ['hide::test_4::Fade','hide::test_5::ScrollLeft','hide::test_6::SlideUp::50']} ); AOI_eff.start('test_5', {'mode': 'hide', 'eff': 'Expand', 'delay': 75, 'queue': ['hide::test_3::Fade']} );
AOI_eff.start('test_3', {'eff': 'Expand', 'delay': 75, 'queue': ['::test_4::Fade','::test_5::ScrollLeft','::test_6::SlideUp::50']} ); AOI_eff.start('test_5', {'eff': 'Expand', 'delay': 75, 'queue': ['::test_3::Fade']} );

As you can see this is still a work in progress, but I think over time it will improve greatly.

The Online Desktop.

Is anyone using StartForce? It is an online desktop that is built in JavaScript, I played around with it a little bit and was impressed, but at 424KB compressed and 1305KB uncompressed it is definitely not for the lower end computer if you like to do other things on it.

Update:
Sorry, I forgot there was this thing called anchor text in links.

PHP classes = ‘Happy’; Javascript “classes” = ‘Pull your hair out’;

As mentioned previously I have been trying to move INAP away from a simply function based system to a class based system. The PHP was unbelievably easy to convert. It literally took a couple hours to convert the entire program from prefixed functions to nice, neat and easy-to-read classes. It was rolled out with a few bugfixes and very little stress.

Then I started to do the same to Javascript, so the plugin could clarify its variables and functions and still “play nice,” and I swear the all the Javascript was specifically coded to make it difficult. Getting all the variables alone to be readable where and when they needed to be was bad by itself, throw on top of it some of the bad coding style that has just perpetuated itself over the past year in the scripts and the fact that Javascript doesn’t have real classes.

Oh well, I think switching over to Javascript design patterns will be worth it in the long run. I just wish that Javascript had real classes like PHP, so you didn’t have to fake it so much.

Adsense Creator

This creator makes it painlessly simple for you to adjust your adsense ads. Just select the options you want, and once you are done adjusting the adsense code the creator will update your code and you can move on with life. The creator includes an advanced color picker to make it easy for you to pick just the right color. Originally, I made the following creator for my WordPress Adsense widget; however, I decided that it was being wasted, and I wanted to see if I could make WordPress pages behave as real HTML files, so this became a one-day project to get it working.

A few Preliminary Questions:

Yes No

Public Service Another Ad Url Block Of color

Now onto the basics:

Ad Boxes:Text Text and Image Image

Link Units5 links 4 links

Now let’s style your ads:

Copy Color To Picker

Copy Color To Picker

Copy Color To Picker

Copy Color To Picker

Copy Color To Picker

Copy Color To Picker

To easily pick a color use the following color pickers. The second picker sends the selected color to the first for adjustment

Color Value Increase slow Increase Fast Decrease Fast Decrease Slow
Red: More Red More Red Less Red Less Red
Green: More Green More Green Less Green Less Green
Blue: More Blue More Blue Less Blue Less Blue
Hex value: #
                                   
                                   
                                   
                                   
                                   
                                   
                                   

Click to update Adcode