Demo

The HTML

Its necessary for the element to [...]]]> This is one sure question that every budding web developer would have in his mind.  Today I am going to explain how to achieve  cross fade effect using JavaScript and CSS opacity property. As always lets use pure 100% home grown JavaScript. No frameworks are used.

Demo

The HTML

Its necessary for the element to have an id to identify for the cross fade function.

<div id=”myElement”>This text will toggle fade effects </div>

The JavaScript

function fadeOut(id,val){
if(isNaN(val)){ val = 9;}
document.getElementById(id).style.opacity=’0.’+val;
//For IE
document.getElementById(id).style.filter=’alpha(opacity=’+val+’0)’;
if(val>0){
val–;
setTimeout(‘fadeOut(“‘+id+’”,’+val+’)',90);
}else{return;}
}

function fadeIn(id,val){
if(isNaN(val)){ val = 0;}
document.getElementById(id).style.opacity=’0.’+val;
//For IE
document.getElementById(id).style.filter=’alpha(opacity=’+val+’0)’;
if(val<9){
val++;
setTimeout(‘fadeIn(“‘+id+’”,’+val+’)',90);
}else{return;}
}

You might have noticed two functions fadeOut and fadeIn. The function names define what they do.

The Concept

CSS opacity property of the element to be faded is increased / decreased using JavaScript. To achieve the fade effect the fade functions are recursively called while introducing a time delay with native JavaScript setTimeout function.

Demo Download Code

Lets start with [...]]]> I have been always fascinated about the slideshows, how do they make one. Well here is the basic slideshow with pure JavaScript. No frameworks are used, No chunks of codes,  Simple Slideshow with 100% pure home grown JavaScript.

Demo Download Code

Lets start with the HTML.

<div id=”show”>
<div id=”slideHolder”>
<img src=”images/slide1.jpg” />
<img src=”images/slide2.jpg” />
<img src=”images/slide3.jpg” />
<img src=”images/slide4.jpg” />
</div>
</div>

• div “show ” – this is where the images are displayed [ fixed width/ height, overflow hidden]
• div “slideHolder” – is the div that holds the slides [relative to "show", images float left]

Here is the CSS

#show{
width:800px;
height:250px;
border:8px solid #E9E9E9;
margin:5px auto;
overflow:hidden;
box-shadow:2px 2px 5px #514F4F;
}
#slideHolder{
width:3200px;
position:relative;
}
#slideHolder img{
float:left;
}

Slide Concept

Use the margin left property to move the slideHolder div inwards show div.  The overflowing part is hidden by the css. A timer function is used to iteratively reduce the margin left , lets call the function as slider(). A function named revert() is used to revert back the margins to its original position.

The JavaScript

var show={};
show.duration = 5000; // Delay between each slides
show.speed = 5; // slide speed [should be even multiples of 5]
show.width = 800; // slide width [should be even number]

function slider(val){
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
if(Math.abs(val)%show.width > 0){
val= val-show.speed;
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
setTimeout(‘slider(‘+val+’)',1);
}else{
if(Math.abs(val)==(show.width*3)){ // for 4 slides -> [n-1] = 3
setTimeout(‘revrert(‘+val+’)',show.duration);
}else{
val= val-show.speed;
setTimeout(‘slider(‘+val+’)',show.duration);
}
}
}

function revrert(val){ // Quick revert the margin back.
if(Math.abs(val)!=0){
val= val+(show.speed*2); // reverting is twice the speed of slide
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
setTimeout(‘revrert(‘+val+’)',1);
}else{initSlider();}
}

function initSlider(){
setTimeout(‘slider(‘+(-5)+’)',show.duration);
}

window.onload = function(){
initSlider();
}

Demo Download Code

<div id=”feedWraper”>
<div id=”twitterFeed”></div>
<div id=”feedCache”></div>
</div>

Features

Written for  Moo tools version  1.2  and above, works fine with Moo tools 1.4. The plugin features a fully configurable moo bar class .  See the live demo here.

Inspirations and Supporting Packages.
Inspired by the very simple event list by Eric Kittal, and Moo tools Ajax calender

The Tool
Powered with PHP – MySQL back end  and Moo Tool on the [...]]]>    Simple Event Manager as the name says is a simple implementation of events calender.

Inspirations and Supporting Packages.
Inspired by the very simple event list by Eric Kittal, and Moo tools Ajax calender

The Tool
Powered with PHP – MySQL back end  and Moo Tool on the frond end, this one is a nifty tool for those who love simplicity. Simple event manager is capable of storing the events with date and time. Other fields include “Event Title” and “Description” .

Event manager is comes with multi-user  log in , events are tracked and named after the user who created it.  Irrespective of the user who created it , the events are visible to all the users. Making it a tool for collaborative work environment as well .

Installation and customization

Download and extract all the files , within the admin.php file you need to set the timezone,  Event manager uses PHP timezones, find yours and modify accordingly.

$timezone = "Asia/Calcutta";

Sorry guys … there is no specific configuration file where you can tweak in all the settings at this time ,  Lets play arround. Next is database, you can find the sql schema inside the schema folder,  grab it and create the tables. Its a very simple straight forward sql.  Create your own user name and password entry in the “event_user” table. The fields are plain text and no encryption is implemented. Done…..!! Lets login now using the created user name and password.

Point your browser to event manager folder

eg : http://yourhost/EventManager/

You should see the log in screen now… Enjoy..!!  Feel free to modify rebuild and redistribute the code.  Its licensed under GNU for PHP code and has an MIT license for MooTools  codes [Both Open and free].

Feel free to approach me for any quires and help.

Download Simple Event Manager

Gone are days of origin policy and cross website data access. In the modern world data needs to be librated. Its one such idea that gave birth to JSON.  JSON is simply JavaScript Object  Notation and it’s a plain text data transfer method using JavaScript. Unlike XML which need a server side program [...]]]>  

Gone are days of origin policy and cross website data access. In the modern world data needs to be librated. Its one such idea that gave birth to JSON.  JSON is simply JavaScript Object  Notation and it’s a plain text data transfer method using JavaScript. Unlike XML which need a server side program to process the xml, JSON does not need a backend to process.  JSON is processed within your browser by the JavaScript.  Now that’s something that’s really interesting.

JSON

As I mentioned before , JSON a plain text representation of data which is easily readable .

Sample Json Segment:

{ "firstName": "John",
 "lastName" : "Smith",
 "age" : 25,
 "address" :
  { 
 "streetAddress": "21 2nd Street",
  "city" : "New York",
   "state" : "NY",
  "postalCode" : "10021" 
 },
 "phoneNumber": [ {
  "type" : "home",
  "number": "212 555-1234"
  },
  {
  "type" : "fax",
 "number": "646 555-4567" 
 } ] }

Advantages :

·         Json data is processed by JavaScript within the browser without sending it to the server.

·         JSON being in plain text format , loads faster. Since it is not made up of tags like XML the amount of data transferred is bare minimum to the actual required data.

·         Loading and processing the data on client side removes server overhead.

·         Live feed becomes a reality with JSON,  Applications that requires live data , for example : Stock market, Sports Score, Live news ..etc can use a JSON feed with fetch intervals set within the JavaScript and inject the live data into webpage.

JSONP

JSONP is the new protocol that lets you access JSON feed from domains other than your domain, in other words remote domain or cross domain.  This is useful when you need to incorporate an API based on  JSON.  Unlike SOAP, REAST, or WML which is markup or tag oriented,  JSON has less data transferred over an API making it a faster and powerful API format.

The Problem

Like any emerging trend, websites / people around the world did not move to the new JSON technology. Most of the websites and services sticked  on to XML / RSS/ATOM format which is basically of XML origin.

The Google RSS to JSON API[Google Feed API]

Google was first to break the XML – JSON barrier.  Google came up with Its own RSS to JSON API based on JSON.  The goggle API looks like this.

Moo Tools Based JavaScript Code segment

function fbLookup(fbuser)
{ 
 new Request.JSONP({ url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q='
 +encodeURIComponent('http://www.facebook.com/feeds/page.php?format=rss20&id='+fbuser),
 onComplete: function(data){ 
 var fstatus='';
 data.responseData.feed.entries.each(function(ffeed){
  if(ffeed.content != ''){ 
 fstatus = fstatus+'<li><div>'+ffeed.publishedDate+ '</div>'+ffeed.content +'</li>'; 
 }
  });
$('facebookfeedholder').set('html', '<h3>Live Feed</h3><div id="facebookfeed"><ul>' +fstatus+'</ul></div>');
 } }).send();}

The FEED to Jsonaccepts one parameter. Yes you guessed it right, it’s the URL to the RSS feed and returns you a feed in JSON format.

The above code segment will accept a facebook pagename / username and returns their latest wall posts and injects them to HTML page element with the id  ‘facebookfeedholder’

<div id=’facebookfeedholder’></div>

Come on guys give a try with JSONP .. Grab your favourite feed and do some JSON fun.

Hope you enjoyed this post, dont forget to leave your comments.

-@Distilinfo

Last day I was in a meeting with one of my client  and a content writer.  The content writer and me brainstormed to bring up a presentable sitemap and content flow structure to the client.  After [...]]]> Well I know that most of you might wonder about the title.  Does a website have an emotion?.

Last day I was in a meeting with one of my client  and a content writer.  The content writer and me brainstormed to bring up a presentable sitemap and content flow structure to the client.  After hearing us , the client asked us

• What is the emotion of this proposed website?
• With what emotion this website is going to approach the audience?

We did not had an answer at that time. I have been developing websites for the past few years and I never  have thought of the fact that the website do have emotions.

After thinking a lot I thought to go for a study and here are the few things that I found for a website to have Emotion.

• Audience Have  Emotions – Every visitor goes to a website seeking something, say .. some need a solution,  some come for entertainment,  some are confused and so on.  A website must be intelligent to capture the emotion of the user and give him the right page / link / solution. In simple words a website should be intelligent.
• FAST is the current Trend – Everybody wants the information in a fraction of second. If they don’t find it, they will jump to another website/ resource that can give them a quick result. Gone are the days where the website had tones of text written in 10 paragraphs. Here the website needs to be clever enough to present the date in very brief and descriptive.

A website content should be like a ” Mini Skirt”  Short enough to keep the viewer interested and long enough to cover the subject

• Keep the audience entertained - the language and the UI can be more  playful and interactive. With the emergence of WEB 2.0 its very easily possible. The more the user interacts the more they retain. Another thing with an interactive website is that we can easily get to know what the user is expecting.

To conclude there should be a balanced emotions mixed up with the website such that the emotion of the website meets the emotion of the targeted audience. For Example : A  charity website should have the emotions of humanity and off course empathy.

Modern websites are representatives of an individual, Company an organization ..etc hence its vitally important for a website to have the emotion of the entity it represents.

To [...]]]> Hello my dear friends, Now this is quite interesting topic for all the PHP newbies and off course OLD bees..!! You might have seen many large PHP libraries that is designed to access emails and send emails. Well this one is going to be a lot more simpler than a HUGE MAIL Library.

To start with we should have the following minimum requirements

• PHP5
• IMAP enabled in your Gmail settings.
• PHP IMAP Extension is enabled [Its a default package with PHP]

Lets start with connection configuration.

/* connect to gmail */
$hostname = ‘{imap.gmail.com:993/imap/ssl}INBOX’;
$username = ‘username@gmail.com’;
$password = ‘password’;

Replace the values with the Gmail account details that you need to access. The host name need not be altered, its the standard gmail IMAP address.

Now lets connect to Gmail using IMAP.

$inbox = imap_open($hostname,$username,$password) or die(‘Cannot connect to Gmail: ‘ . imap_last_error());

Once connected you can access the inbox using imap_search() function

$emails = imap_search($inbox,’UNSEEN’);

// ALL – All emails
// UNSEEN – Gets you the message which is not yet read.

imap_search returns all the email ID’s which are unread and we need to iterate through the ID’s to read the emails

if($emails) { // Check if there are any emails

rsort($emails); /* Sorts the email such that the new emails comes first*/

/*  Get the email one by one using ID */
foreach($emails as $email_number) {
// Get the email [headers]  like FROM, TO, SUBJECT, DATE, SERVER etc
$overview = imap_fetch_overview($inbox,$email_number,0);
echo $overview[0]->subject.”\n”;

// Get the Email Body
$message = imap_fetchbody($inbox,$email_number,1);

echo $message;  // Prints the message in Text format.
}

}

/* close the connection */
imap_close($inbox);

Download Source file

Hope you have enjoyed this Post.!! Leave your comments.