Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.

Fade In / Fade Out with CSS Transition

It is easy to make fade in / fade out effect with pure CSS, means no need to any JavaScript or jQuery. But this fade in/out effect only working in latest browsers only, here is the list of the supported WebKit browsers:

Browsers list:

  1. Chrome 1.0
  2. Firefox(Gecko) 4.0(2)
  3. Internet Explorer 10
  4. Opera 10.5
  5. Safari (WebKit) 3.2

To make it all browser compatible you have to use jQuery or JavaScript, in jQuery it is simple with the fadein() and fadeout() function. There are few transition property that we are using in this fade in / out effect.

Keyboard key codes detect with JQuery

JavaScript is one of the best Server Scripting Language for client side programming and JQuery is one of its library. JQuery is widely used by designers because it’s providing a lot of functionality just with few easy steps well I am not talking here about the designing part; we are talking about the keyboard key detection.

JavaScript Methods to Detect Keyboard keys:

There are three methods to detect the key codes of keyboard.

  1. keyup
  2. keydown
  3. keypress

If we are talking about the cross-browser compatible then keyup and keydown are the best solution for this.

Access Cross Domain feeds with PHP

Now easy to access and display cross domain feeds with php. With the use of DOMDocument() class we can easy access the feeds. In this given example I have fetched only the title and the link from the feeds. First of all start with the path from where you want to access the feeds, make sure that your path will be full with the complete URL, like I have mentioned on the given example. Then simply access the Tag of that feed/xml file with the member function getElementsByTagName(), and follow the code :

Ajax based contact form

If you want to make an application which respond quickly without refreshing the page then, JSON(JavaScript Object Notation) and AJAX(Asynchronous JavaScript And XML) combination is great to achieve that. In this post we are making a simple Ajax based contact form which respond the result in JSON format that we want, and with the help of jquery we display the JSON data.

Through AJAX we are sending the contact form data to a php file(submit_contact_form.php) and then getting the response as an JSON format, but as you see that in my php file, i didn’t used the ‘json_encode()’ function, the reason behind this is ‘json_encode()’ require PHP5 or above. But in this example i created the same format with the help of ‘echo’ that will work for me in PHP4.4.9 too.

So, Here is the HTML structure for the contact form, just put this structure inside the body tag.

Image upload and resize with php

There is a lot of things that we want to do with in less time and working properly. Lets take an example to resize an image, for doing this first of all we need an image edit software and then open that image and resize and at the last save. That will take a lot of time, I am not talking here about image editing software or how to edit an image. I am talking about how to resize an image with php. Obvisioly if you want to edit an image then Adobe Family’s products are far batter whose provide you a lot of functionality.

Now lets come to the point, Before starting let i tell you a bit about this image resizing class. First of all we need to verify an image means get the file extension and check whether it is an image or not. I allow only .jpeg, .jpg, .gif, .png files. After that we have to check the image size, then set the image width and height according to real image, so that the quality of an image remain same, means not stretch when we resize it. Then simply genrate a new image that’s it.