October 14, 2008 by romuald.halasz

I recently found a Javascript library which adds a nice effect to a website. It’s called jParalax and what it does is create layers from an element and its children to give a nice effect. The layers are absolutely positioned and move in response to the mouse, to give a parallax effect. They have the script available for download, and many nice demos.

Here is the link.

by romuald.halasz

I must admit I always felt fascinated by the limitless possibilities of creating rich user interfaces using Javascript. You can see all sorts of examples out there, but it’s always a lot of fun to mess around with the code to get your own results, plus, as a web developer, it keeps you in shape.

The latest experiment resembles the igoogle interface, meaning you can drag and drop divs around, and also have certain areas where a div can snap to a predefined position.

So, you can check it out here, and if you want to look at the source code, click here.

I didn’t have any idea what to call this one, so I named it DivOps, short for Div Operations…

I used Firefox for development, so please don’t comment on the way it works on IE and other browsers. I have checked it on IE just for the hell of it, and except the fact that it calculates to margins differently, it works just the same.

September 30, 2008 by romuald.halasz

This time, we’ll do something a little bit different. I want to explain an idea based on a project.

The project was, in fact, a web directory for all the companies in my city. Each company had an image attached, and a link (besides the normal stuff, like name, phone number etc.). This was the basic package, meaning that a company could appear on the site for free. However, there was an option for customers which wanted to pay, in order to get their name faster to the users of the site… Because, really, this was the main idea to begin with.

So, besides the above-mentioned items, a paying company could add 3 photos more (like a small gallery), a wide description, and…oh yes, “sponsored link” treatment. What this means is that, if a user searches for something within the page, the first results would be the ones with a paid account. Pretty nifty, if I may say so myself.

And here is where the main discussion starts. How to go about implementing a sponsored links search system. As I’m sure you all are guessing there are many ways to do this, so I’ll only be talking about one.

For this, I used PHP, MySQL and a small bit of Javascript. We won’t focus so much on the first two, because it should be very easy implement a system that adds/modifies/removes items from a MySQL database using PHP for sending queries.

I will say that each item had a field to determine if it is sponsored or not, a simple, boolean (true/false) field. For the search system I used Sphider. It is a very nice search script, which crawls a site and then indexes the inner pages, based on keywords. Of course the tricky part was to modify the script in order to recognize the pages with a paid account. That means linking a search result with the MySQL database in order to determine its status.

With that out of the way, the only obstacle left was to display the sponsored links first. That was a challenge because the database didn’t make a difference between a paid and a free account (except for that certain field), and a “SELECT” query would return all the items regardless of their status.

And now, on to the final part of the story. For such a vast introduction, I know you would expect for an ending to match. But I have to say right from the start, that it’s a simple idea, but works really well in this situation. Sphider returns search results in the form of an array, which can be parsed in order to display the results. This was of great help, because each result can be manipulated individually. That means they can be styled or whatnot…but in this case they can be displayed as sponsored links, if that’s the case.

So, how do you display the sponsored links at the top of the page, even if they are at the bottom of the database? Easy:

You make a container <div> before the results and append the sponsored links to it. That way, they will be on top regardless of their previous order. Another simple but very effective concept. Unfortunately I can’t post any source code this time because I don’t have it anymore…but I have a small script which shows this concept:

<div id="div1" style="height:100px; width:300px; border:1px solid red;"></div>
<div id="div2" style="height:75px; width:250px; border:1px solid blue;"></div>

<script language="javascript">
var el1 = document.getElementById('div1');
var el2 = document.getElementById('div2');
el1.appendChild(el2)
</script>

That might not be much, but if you ever had to do something similar, I have no doubt this article was at least a little bit helpful. So, I hope you enjoyed reading this, because when I searched for some hints on this topic, I didn’t manage to find any out there.

August 25, 2008 by romuald.halasz

It was kind of hard to pick the first topic, because I couldn’t make up my mind in which category to post. I had to choose between PHP, Ajax and JS. In the end, I decided to post an article about an older experiment which never got used in a project, because it’s really simple to implement, but if it is used in the right circumstances, it can enhance the visual feel of a website.

To put it simply, if you have a <div> element, it would look good if it had a drop shadow, that has a dynamic light source, in this case, the mouse cursor.

You can see it here.

The document structure is really simple, 2 divs:

<body>
<div id=”div2″></div> <!– the shadow –>
<div id=”div1″></div> <!– the div which casts the shadow –>
</body>

The CSS part is also very simple. We start out with two styles:

#div1
{
background-color:#00CCFF;
height:175px;
left:100px;
position:absolute;
top:100px;
width:300px;
}

#div2
{
background-color:#000000;
filter:alpha(opacity=25); /*IE opacity*/
height:175px;
left:100px;
opacity:0.25;
position:absolute;
top:100px;
width:300px;
}

Now that we have the element structure and the styles in place, the only thing that remains is to move the “div2″ element accordingly. We can do this using Javascript.

The hardest part is to get the mouse coordinates, since IE handles this issue differently. IE uses the event handler to get the mouse coordinates

We start by doing a browser check:

var IE = document.all?true:false;

The next step is to tell the browser that we need to access the mouse coordinates:

if (!IE) document.captureEvents(Event.MOUSEMOVE)

and we specify the event (mouse movement) function:

document.onmousemove = getMouseXY;

Finally, the function itself:

var tempX = 0; /*mouse X*/
var tempY = 0; /*mouse Y*/

function getMouseXY(e)
{
	if(IE)
	{
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}
	else
	{
		tempX = e.pageX;
		tempY = e.pageY;
	}  

	if(tempX < 0) //clamp to 0
	{
		tempX = 0;
	}
	if(tempY < 0) //clamp to 0
	{
		tempY = 0;
	}  

	xDrop = 100 + (240 - tempX) / 10;  // dropshadow X coordinate
	yDrop = 100 + (177 - tempY) / 10;  // dropshadow Y coordinate

	document.getElementById('div2').style.top = yDrop + 'px';   //style position update
	document.getElementById('div2').style.left = xDrop + 'px';

	return true;
}