Simple Image Swaping or Slide Show using Java Script

Tuesday, January 13, 2009 8:27
Posted in category Java Script, Programming

Its very simple to create a slide show using JavaScript.

 < html >
< head  >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title> < /title>
< script type="text/javascript">
function f1(){
if(document.getElementById("d1").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='block';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d2").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='block';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d3").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='block';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d4").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='block';
} else if(document.getElementById("d5").style.display=='block'){
  document.getElementById("d1").style.display='block';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
  }
}
window.onload=function(){
setInterval("f1()", 3000)
}
< /script>

< body>
< div id="d1" style="display:block"> < img src="Druv.jpg"  /> < /div>
< div id="d2" style="display:none"> < img src="DSC00177.jpg"  /> < /div>
< div id="d3" style="display:none"> < img src="family 2.jpg"  /> < /div>
< div id="d4" style="display:none"> < img src="s2-6x8-2.jpg"  /> < /div>
< div id="d5" style="display:none"> < img src="Vanda.jpg"  /> < /div>
< /body>

Above code can be divided into 2 parts. that is javascript and html.

< script type="text/javascript">
function f1(){
if(document.getElementById("d1").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='block';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d2").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='block';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d3").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='block';
  document.getElementById("d5").style.display='none';
} else if(document.getElementById("d4").style.display=='block'){
  document.getElementById("d1").style.display='none';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='block';
} else if(document.getElementById("d5").style.display=='block'){
  document.getElementById("d1").style.display='block';
  document.getElementById("d2").style.display='none';
  document.getElementById("d3").style.display='none';
  document.getElementById("d4").style.display='none';
  document.getElementById("d5").style.display='none';
  }
}
window.onload=function(){
setInterval("f1()", 3000)
}
< /script>

The above part is the java script. It has to be inserted the head tag of the HTML Page.

< div id="d1" style="display:block"> < img src="Druv.jpg"  />< /div>
< div id="d2" style="display:none"> < img src="DSC00177.jpg"  />< /div>
< div id="d3" style="display:none"> < img src="family 2.jpg"  />< /div>
< div id="d4" style="display:none"> < img src="s2-6x8-2.jpg"  />< /div>
< div id="d5" style="display:none"> < img src="Vanda.jpg"  />< /div>

The above code is to be included in the Body of the HTML page.
In the above script we create 5 div tags which contains images. Only one of the div is set to visible and remaining are hidden using the

style="display:block"

and

style="display:none"

.

In the javascript we call the f1() function for every 3 seconds using

window.onload=function(){
setInterval("f1()", 3000)
}

This part of the code loads the function on page load. And in the f1 function we check and swap the images.

Bookmark and Share

Parsing XML Feeds in PHP with simplexml

Tuesday, December 30, 2008 13:56
Posted in category PHP, Programming

Parsing XML feeds is always something I’ve wanted to to do with PHP. But I’ve only bothered to learn how to do it. Now, there are different ways to do this, many of which uses different packages/plugins which need to be installed on the server. I am going to use simplexml, since it’s built into the PHP core. I’ve created a really simple XML file, which I am going to use for this.

< ?xml version="1.0" encoding="UTF-8"?>



                   Satya
                   24/11/2009
                   
                    we have 3 posts in this silly little XML example file! 
             


                   Satya
                   23/11/2009
                   
                    So, this is the second post! 
             


                   Satya
                   22/11/2009
                   
                    This is the first post, in this simple little XML example. 
             

You can see, there are 3 post tags under the global recentposts tag. Each of them contains tags which contain information on the title, author, date, time and content of the post. A simple structure. We begin writing the PHP to parse the information in this XML file and display it in regular HTML.

// URL of the XML feed.

$feed = 'example.xml';

// How many items do we want to display?

$display = 3;

// Check our XML file exists

if(!file_exists($feed)) {
  die('The XML file could not be found!');
}

We need to tell the script where the XML is located. If it’s in the same directory as our script, a simple filename will do. If it’s hosted externally, the full URL will be needed (parsing external XML files will not work if allow_url_fopen is not enabled on your server).

Secondly, the maximum number of items we want to display from our XML file? In this example, I’ve gone for 3, which is all my XML file contains.

Now, we should check to see if the XML file actually exists, and if not, stop the scripts.

// First, open the XML file.

$xml = simplexml_load_file($feed);

// Set the counter for counting how many items we've displayed.

$counter = 0;

We need to use the simplexml_load_file function, and place it into a variable, in this example $xml and we initialise a new variable and set it to 0.

// Start the loop to display each item.

foreach($xml->post as $post) {

  echo '

' . $post->title . '

Written by ' . $post->author . ' on ' . $post->date . ' at ' . $post->time . ' ' . $post->content . ' '; // Increase the counter by one. $counter++; // Check to display all the items we want to. if($counter == $display) { // Yes. End the loop. break; } // No. Continue. } foreach($xml->post as $post)

This initialises a foreach loop. Everything inside this loop while be executed for every post item in the XML file. Which this line is doing, is taking all the information found under post in the feed, and assigning it to the $post variable. This information will then be able to accessed using $post->title, $post->author, etc. If there is more than one item in the feed (which in this case, there is: 3 posts), the information will be put into arrays. for example, displaying only the title of the most recent post would be done using $post->title[0]. However, in this example, we neednot concern ourselves with arrays, since the foreach loop will automatically display it all for us.

echo '

' . $post->title . '

Written by ' . $post->author . ' on ' . $post->date . ' at ' . $post->time . ' ' . $post->content . ' ';

We are simply displaying the title of the post in a h1 tag, displaying the author, date and time of the post as italics, and then displaying the main content of the post.

// Increase the counter by one.

  $counter++;

After every iteration of the loop, the contents of the $counter variable we initialised earlier will be incremented by one. This is so the script know how many posts we have so far displayed in total.

// Check to display all the items we want to.

  if($counter == $display) {

    // Yes. End the loop.

    break;

  }

  // No. Continue.

}

The script will check if $counter is equal to $display (have we displayed the maximum amount of posts we want to display?), and if this is indeed the case, break out of the foreach loop, thus ending the script. If not, nothing happens, and the loop begins once again.

So, putting all that together, this final script will look something like this:

< ?php

// URL of the XML feed.

$feed = 'example.xml';

// How many items do we want to display?

$display = 3;

// Check our XML file exists

if(!file_exists($feed)) {

  die('The XML file could not be found!');

}

// First, open the XML file.

$xml = simplexml_load_file($feed);

// Set the counter for counting how many items we've displayed.

$counter = 0;

// Start the loop to display each item.

foreach($xml->post as $post) {

  echo '

' . $post->title . '

Written by ' . $post->author . ' on ' . $post->date . ' at ' . $post->time . ' ' . $post->content . ' '; // Increase the counter by one. $counter++; // Check to display all the items we want to. if($counter == $display) { // Yes. End the loop. break; } // No. Continue. } ?>
Bookmark and Share

Some PHP Resource Websites

Tuesday, December 30, 2008 13:00
Posted in category PHP

PHP is a very vast language. It’s hard master it.You may know how to crop an image using GD and process web requests with XML-RPC. You may know one of them, but not the both. There are many of resources there that help you learn the basics of PHP Processing forms, security, database interactions and array manipulation. I’ve compiled a list of websites that will help you learn the basics’ of PHP as well as taking them a step further.

w3school.com PHP Tutorial’s
W3Schools.com has a list of various PHP tutorials for the bothe the PHP Basics and PHP Advanced. This Tutorials are very easey and simple to understand with simple examples and referances.

tizag.com PHP Tutorial’s
Tizag.com is another site that provides the tutorials for biggnears. The examples and tutors in the site are simple and easy to understand.

KillerPHP.com’s Video Tutorials
I used these when I was initially learning PHP and are still a great resource today. These screen casts are typically 10 minutes long and cover the absolute basics getting your development environment up and running to variables and includes.

  • Local server setup
  • Variables
  • Arrays
  • Includes
  • Loops
  • Form Processing
  • Functions
  • Sessions
  • OOP

Pixel2Life’s Tutorial Index
Pixel2Life is a tutorial index where loggers can submit their tutorials and articles. The result of hundreds of people doing this is a very large library of specialized’ links. For example, at the time of writing this, the front page contains tutorials about Twitter, Code Igniter, Graveyards and Converting Excel to CSV with PHP. There are also numerous tutorials and articles on PHP frameworks (Code Igniter, Cake PHP etc) that aren’t on the framework’s web site. Be aware that there are excellent tutorials back 6 or 7 pages, so have a dig around for them.

NetTut’s PHP Tutorials
Nettuts is well known for it’s high quality tutorials. They have recently done a 3 part series on making your own PHP framework something you don’t see on an everyday blog. Although there aren’t many PHP tutorials now, new authors are writing more tutorials on them. Often the tutorials are not only PHP, a recent one showed how to make a twitter clone in PHP which used mootools for the AJAX and effects. Lately the editor, Jeff Way, has been doing some screen casts.

PHP.net Quickref
Sorry, I had to put it in. If you don’t know what a certain function does, do a quick search on the quickref page and find it in seconds. The documentation provided by PHP isn’t the only good part, read peoples comments on real application usage of function. For example the sleep function (http://www.php.net/manual/en/function.sleep.php) , it not only shows usage of it, but mini hacks people have used to get it working better, or an alternative way to do it.

PHP Builder
PHP Builder is a portal for everything PHP. It has PHP job lisitings, original articles, a snippet library, forum and a mailing list. Some of the articles on there are really interesting, using PHP as a shell language (http://www.phpbuilder.com/columns/darrell20000319.php3?page=1) not only covers the basic hello world’ tutorial, but using arguments and reading input from the console. The forum (http://phpbuilder.com/board/) is incredibly useful. There are fully certified Zend Engineers that help you think up

Learnphp.org
Lean PHP
is a portal for everything PHP. It has PHP job lisitings, original articles, a snippet library, forum and a mailing list. Some of the articles on there are really interesting, using PHP as a shell language (http://www.phpbuilder.com/columns/darrell20000319.php3?page=1) not only covers the basic hello world’ tutorial, but using arguments and reading input from the console. The forum (http://phpbuilder.com/board/) is incredibly useful. There are fully certified Zend Engineers that help you think up.

Bookmark and Share

Apple Iphone In and Outs.

Monday, December 1, 2008 5:34
Posted in category Product Reviews

Hi Guys, As i am using Apple Iphone from last few months. I just want to share my own reviews for Apple Iphone with all my friends who wants to know more about Iphone before buying. First things in iphone which is noticed by everyone its nice sleek looks. Easy to use and navigate. Lots of space for your favourite movies and songs. In iphone you can access your mails via using safari, an apple browser. we can esily install Games, utilities, applications and softwares viw Itunes. You Tube is there we can easily watch the videos in you tube. I am pretty happy with this phone. But there is few draw backs is there Like battery back up is really poor. no Video coverage. there is no option to forwad the messages, you can forward the message but for this you have to buy the application which is avaialable on Itunes application software.

But i must say its an nice phone and love using it.

Bookmark and Share

The file structure of the Zend Framework QuickStart Tutorial

Sunday, November 23, 2008 5:35
Posted in category PHP

 

I started working  through the tutorial for the PHP Zend Framework.  After few pages they  neglected to mention where the  piece of code is supposed to be. Maybe I learnt a lot more, but it did not make for a very ‘quick’ start to work out things go from the error messages.

Here’s the structure of the QuickStart Tutorial






The file structure of the Zend Framework QuickStart Tutorial 

Bookmark and Share