Hello everybody, it has been a long time since my last post. Here I go again today because I’ve found a great jQuery tooltip script at cssglobe.com and made a change to have it detect the edge of the browser and change the position of the tooltip (large image in this case).

First of all, I want to thank Alen Grekalic for the plugin and also Nando Fernández, from disenando.com for helping me to understand how to get it done.

Please check here for the original post from cssglobe.com.

The code for the plugin is this:

<code>

/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){
	/* CONFIG */

		xOffset = 30;
		yOffset = 10;

		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result

	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
		$("#preview")
			.css("top",(e.pageY - yOffset) + "px")
			.css("left",(e.pageX + xOffset) + "px")
			.fadeIn("fast");
    },
	function(){
		this.title = this.t;
		$("#preview").remove();
    });
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - yOffset) + "px")
			.css("left",(e.pageX + xOffset) + "px");
	});
};

// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

</code>

The way I’m using this plugin is to show a photo gallery in a similar way iStockphoto.com does. There’s a bunch of thumbnails and when you roll over any of them, you will get a larger version of this image. If you keep moving the pointer of the mouse on top of the thumbnail, the image will move along. Now, if we are close to the edge of our browser window, in order to avoid the image to go “outside” the browser, we need to add some conditions before we tell the script how to display the enlarged image . We basically want to detect when the image is opening off the screen. What we are going to do is to detect if the thumbnail is close to the edge of our browser window.

<code>

if(e.pageX + xOffset > $(document).width()){

}

</code>

where e.pageX is the position of the thumbnail and xOffset is how far from it the image will open.

Then, inside the condition we request to get the position of the enlarged image either to the left or right, depending how close we are from the edge and how big our image will be. So if your enlarged image is supposed to be 500 pixels wide, then the IF should read something like:

<code>

if(e.pageX + 500 + xOffset > $(document).width()){

$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400))  + “px”)
.fadeIn(“fast”);

} else {

$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”)

.fadeIn(“fast”);

}

</code>

Please note the “-xOffset-400″ I’ve added to the code. You might need to play with those values in order to get the image in the place you want it to be. Also, remember that we will need to add the similar changes to the “mousemove” event in order to get the same effect when we move the mouse over the images.

Please take a look at the final script:

<code>

/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.imagePreview = function(){

/* CONFIG */

xOffset = 30;
yOffset = 10;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$(“a.preview”).hover(function(e){

this.t = this.title;
this.title = “”;
var c = (this.t != “”) ? “<br/>” + this.t : “”;

$(“body”).append(“<p id=’preview’><img src=’”+ this.href +”‘ alt=’Image preview’ />”+ c +”</p>”);

if(e.pageX + 500 + xOffset > $(document).width()){

$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400))  + “px”)

.fadeIn(“fast”);

} else {

$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”)

.fadeIn(“fast”);

}
},
function(){
this.title = this.t;
$(“#preview”).remove();
});
$(“a.preview”).mousemove(function(e){
if(e.pageX + 500 + xOffset > $(document).width()){
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400))  + “px”);
}else{
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”);
}
});
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

</code>

You may need to repeat these steps if your images are going off window in the lower edge.

I hope this helps someone and again, thank you to the owner of this script, mister Alen Grekalic and also Nando Fernández for pointing this out.

Don’t let anyone or anything prevent you from dreaming. Not on this holiday season. As a matter of fact, never. Let the illusion put a smile on your face once again. Let the joy fill your corners. Let your wishes come true so you can have more wishes. Let the ideas flow. Listen to that song that makes you smile. Listen to it again so you keep smiling. Jump for joy. Cry tears of happiness. Write a poem. Don’t surrender. Even when things look messy and difficult, don’t retreat, don’t give up. Do not surrender.

Here I go again. I wasn’t planning to write about this subject, but it’s something I want to do now because it has been a great experience.

During the last two weeks I was working on three different Web Development projects as well as some packaging projects. I had planned my schedule in order to fit everything and to deliver in time. I knew I had a couple of clients visiting as well hence I’ve included two business lunches on my plans. I’m glad, really glad I made plans.

The day after my first meeting with my client took place, my 5 years-old son got the flu. My studio is at home, so I was able to manage it, working and spending time with him. Things were falling into schedule, my son was happy I was also playing with him, everything seems to be as planned..until the unplanned…I got the flu.

The first day was relatively ok, I had fever but I was able to work. The second day I couldn’t leave my bed. At that point, I knew I was running a little bit behind schedule and also, at that point, my 2 years-old got it too. And then my wife. I’m glad the cats were ok all the time.

What it helped me to accomplish what I have planned – and this is the reason I’m writing this – is the relationship with my clients. I speak to them almost everyday. I visit them at least once a week. We team up, we build strong relationships.

Strong relationships allow me to get more work. They allow me to buy more time when unplanned events take place. They also get me recommended. Strong relationships allow me to manage stress when a marathon of events like the one I wrote here, takes place.

Throughout my working life I came across many clients who wanted to have the ability to track whatever was related to their businesses.

A construction company wanted to keep track of the working places, workers, material expenses, construction schedule, etc.

A commercial dishwasher company wanted to track the service calls and issues per unit.

A physiotherapy clinic wanted to keep track of the medical history of its patients, the time spent by the specialist with each patient, etc.

And like these companies, I can mention some more. So I built the applications. Over the time I noticed that some of my clients never used the web applications. They were very intuitive and easy to use and I did the delivery with a manual on how to use them. But they were left empty, no info was being entered to it.

It was weird. A web application can simplify your work.  it can improve your productivity. Well, not always. And that’s the reason of this post. There many variables involved when using a web application.

For instance, if your company is a small company and all your staff is overwhelm, who would enter the information to the application? If inputting data to it takes you away from the actual work, for how long would you do it? My experience says a couple of months. No more than that. And believe me, the application was very simple to use.

So after trying to understand the reasons these applications weren’t being used, I came up with some conclusions (please correct me if I’m wrong, you web applications gurus) – A web application is useful if:

• you take calls to log problems.
• your web site needs a shopping cart.
• you write down important information on the first piece of paper you find close to you (i.e. child registration on a day care center).
• you need to use the saved data to create reports or statistics (a company was using the web application to track defective units per shipment from the factory. After 6 months of analyzing the info reported. they decided to change manufacturers).

If your company is in any of the above mentioned situations, of course,  you can contact me .

A while ago a client approached me with a very interesting project: he wanted a website where he could talk to his visitors. Very exiting project considering he is a Public Speaker. I remember he told me “that’s what I do for a living, I talk to people”. That’s how we started to plan his website. You can see it here.

By using chroma key video on your website you are talking directly to your potential clients. You are looking to them directly into their eyes. You are selling your products or services in an attractive way. I say “attractive” because it is innovative, eye-catching and it can be used to enhance your website effectiveness.

If you checked the previous link, you were able to see Ennio Vita-Finzi  “walking on” to his website and present his message to a new visitor. He also interacted with students in the classroom and also with a group of participants in a conference, all during the same video.

This technology allows you to speak to your potential clients by appearing almost anywhere on your website. And the most beautiful feature is the possibility of adding almost any type of background to it, both still or animated.

When working with chroma key, the possibilities are endless, they go along with the creativity involved in the process.

Yesterday it was a good day. A great day I would say.

I’m in the process of rebuilding my site and relaunching the company. I need to grow the income, I want to make it work.

After changing the design towards a more modern, web 2.0 and social media oriented concept, I showed it to a couple of friends and colleagues to get some feedback. Fito, who’s my best friend and has been in the real state insdustry for almost 10 years, was not blown from his chair. He pointed out about marketing shortcomings. Then he asked me about my product. “Why your product would be the chosen one?” he shot. Touché. It was hard to get a clear answer about it. Even though I feel I have a nice and solid product to sell, I couldn’t answer to that question.

Then I spoke to Augusto. I was watching Inspector Gadget when he developed and sold his first system. He has a lot of experience. We were chatting about my product, his product and what could we do together. After understanding that even though we both are developers, we are in different markets, I started again asking myself what’s my market. Are the small companies in need of a site that won’t handle more than 200 clients? Are “one man shop” entrepreneurs needing a design?

My last feedback came from Bruno. He wasn’t shocked about the site either. He said is lacking energy, magic, something that will keep the potential client, the visitor, asking for more.

I have to admit that I feel a bit lost. Well, a lot. Augusto talked to me about coaching. I know I need coaching. When there’s a lot of information around your head and you can’t grab it, when you just read the headlines of what you would like to do, but you never jump into it, you need coaching.

So what is Coaching anyway?

Some things I’ve found online:

It helps you solve everyday situations that make you shake or make you question things.

• You have a love or family conflict, coaching can help.
• You think you are not capable of something, coaching can help.
• You want a career change but you feel lost, coaching can help.

The coach is a person that helps you understanding your decisions, guides you through work meetings, observes your development while with clients and helps you improve and reinforce your strategy.

Let’s see how coaching works for me. I just found this link. I haven’t used her services but she gives a very good idea about why Coaching is important:

http://www.passionforbusiness.com/

Ok people, here we go towards a new direction.

Thiez Multimedia is taking the social media bus and I know we still have a very long journey ahead. And that’s what we want to do. We want to enjoy every minute of it. We want to explore the opportunities this path has for us. Then we start brainstorming. Oh, yes. Brainstorming is key. We sit down, we put on the table all the ideas we came up with, we connect them, we polish them and the we let it rest for a couple of hours (days).

The passion drawn at this stage is our drug that keeps us going, hungry for more. And more is what we go for. More PASSION, more BRAINSTORMING, more BUILDING.

Those words and concepts will define this new journey we are taking now.