ReviewSpindle
A gateway between articles and affiliate links.

Key features:
* It dynamically updates the suggestion list with bold character recognition.
* The suggestion list can be navigated using arrow keys and mouse.
* When using arrow keys, movement takes over from mouse location.

The application JS code is easily available through viewing the source. The PHP used is just a 2-dimensional array with titles and urls. And a foreach-loop to check for form submits, along with populating the JS version of the array.

You can check it out here.

You can view all the javascript code simply by right-clicking and “view source” after it opens in a new window.

An onclick event will work perfectly in Firefox, but when you try in Internet Explorer 7 (and maybe 6) it will seemingly bug out without any error or warnings at all.

Reason
This is simply because of how IE decides to “remember” visited links (the one you call in the AJAX function), and it simply don’t run your onclick event more than perhaps once per click.

I solved this by adding something I’d like to call a no-cache-seed to the url that will be unique for every click, forcing the browser to handle every event as a new URL. Then it worked perfectly.

The following javascript snippet will create a variable with the number of seconds since January 1, 1970. Needless to say it will always be different unless you demand reaction times under 1 millisecond which is unrealistic from a single user.

var currentTime = new Date();
var nocacheseed = currentTime.getTime();

Code in effect:
http://example.com/file.php?foo=1&bar=1&nocacheseed=

Reload the page to see how it is different every time.

Below I have created a small matrix with 8 vectors rotating around a center point by using the vector coordinates instead of a preset radius like I did in the 2D rotation. I’ve used DHTML for functionality and illustration. Viewing the source may help you grasp the use of the formula.

Click here to open the script in a new window.

In the 2D script I used this formula to rotate around a center point:

x = Math.cos(Radian)*XRadius(hypotenuse)
y = Math.sin(Radian)*YRadius(hypotenuse)

By changing the radius, you can simulate x,y rotation as well, but only on a 2D plane. It would be simulation, not real 3D. Add depth with another z calculation with the above formula, and you would have the 3D effect available.

It means to give the coordinate or a vector’s ‘x’ and/or ‘y’ new values based on finding the radian x and y ratio through cosine and sine multiplied by hypotenuse to keep the proper center point (radius). This formula could be used for simulating 3D on a 2D plane.
It could even be used for real 3D calculation, but you would need to find a way to make the rotation radius/hypotenus values work together when e.g crossing a z-axis with a y-axis rotation. When e.g. the z-rotation closes in on the y-axis, the radius of z-rotation (x) would have to be shortened accordingly, start a x-rotation as well and you have a calculation challenge.

Here is a formula that does the proper job of 3D calculation.
It respects every axis radius/hypotenuse in regards to each other.

// Rotation around the X axis
xy = Math.cos(RadianX)*y - Math.sin(RadianX)*z
xz = Math.sin(RadianX)*y + Math.cos(RadianX)*z

// Rotation around the Y axis
yz = Math.cos(RadianY)*xz - Math.sin(RadianY)*x
yx = Math.sin(RadianY)*xz + Math.cos(RadianY)*x

// Rotation around the Z axis
zx = Math.cos(RadianZ)*yx - Math.sin(RadianZ)*xy
zy = Math.sin(RadianZ)*yx + Math.cos(RadianZ)*xy

Where zx(X), zy(Y), yz(Z) are the new values to use after every calculation in a 3D space of coordinated rotation. By running this formula on every vector in my little ASCII cube matrix, I get coordinated movement based on the Radians given to it.

By changing the RadianX, RadianY, RadianZ up to 2π(6.28)(360°) in this formula you control every axis rotation, and each rotation radius/hypotenuse should work in harmony. The trick here is basically how each axis calculation inherits the results from the previous.

It will help to repeat the chapter in a math book on trigonometry (especially sine and cosine) if you are having a hard time understanding the formula above.

In this script the rotation is made around the ‘would be’ z-axis in a 3D environment. As we keep looping the angle θ value in radian up to 2π(6.28)(360°), sine and cosine relationship/ratio values will keep changing accordingly. So, in math when you want to know the exact length of the θ’s opposite line, you multiply hypotenuse with its sine, in our case the coordinate Y. Multiply hypotenuse with co-sinus, and you get the actual length of the adjacent line as well, in our case the coordinate X. Hypotenuse becomes the range(line) from θ to the coordinates X/Y, ie. the radius.

Click here to open the script in a new window.

 Example with "if/else"
$true_or_false = true;
$need_a_value = '';

if($true_or_false == true) {
  $need_a_value = 'It was true.';
} else {
  $need_a_value = 'It was not true.';
} 

 Example with the ternary operator "?:"
$true_or_false = true;
$need_a_value = '';

$need_a_value = ($true_or_false==true?'It was true.':'It was not true.'); 

First the javascript function.

function ajaxFunction() {
var xmlHttp;

if(window.XMLHttpRequest) {
  xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} else {
  alert("Your browser does not support AJAX!");
  return false;
}

xmlHttp.open("GET","links.txt",true);
xmlHttp.onreadystatechange=function() {
  if(xmlHttp.readyState==4) {
    document.getElementById('relatedLinks').innerHTML = xmlHttp.responseText;
  }
}
xmlHttp.send(null);
}

The HTML.

<div id="relatedLinks">This will be filled with the link in links.txt.</div>
<a href="#" onclick="ajaxFunction()">Click me to change div content</a>

And the links.txt.

<a href="http://www.domain.com/">The Domain!</a>

Sending GET data example

xmlHttp.open("GET","getreceiver.php?foo=bar",true);
xmlHttp.send(null);

Sending POST data example

xmlHttp.open("POST","postreceiver.php",true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('foo=bar');


One thing I had a problem with when playing around in the beginning was that you can’t call data sources outside of the domain of the file calling it, this is a safety measure in some browsers. There are some ways to get outside this. Absolutely nice to know in advance to save some headache.

Deeper details of AJAX can be found through an online search engine very easily.

Microsoft.XMLHTTP might be worth checking for as well if the browser check above fails. There are many ways and means of checking validation of browsers, the one illustrated is just one of them.