Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

Recently I created a sliding menu for a project using jQuery and ScrollTo functions.

See demo: Slider  Menu

We can use the jQuery function $(“.menubar”).scrollTo(id_of_element) to scroll any scrollable area to a particular location.

The idea behind every smooth sliding is using scroll function with overflow:hidden mode.

You can download the source code from : http://www.sajithmr.me/downloads/slider/slider.zip

Here div menu-bar is the scrollable div with overflow:hidden mode contains set of menu and a duplicate as a  buffer

At the bottom of the code, you can see a filler div, this is for filling the menu one by one to the right side menu-bar to make the sliding very smooth

The function setMotion(this) calls  the scroll function and it moves till the called DOM object’s id reaches

If you use an ajax call after the motion to load the content at the bottom, you can make this sliding menu for proper navigation purpose.

Thanks

Sajith

Here, a new plugin of jQuery can be used to display the flash messages like twitter. (see twitter’s settings page)

I added some more functions to this plugin to display the notification in different context, say information, warning or error message. The function show_flash(‘message here’); can be used for this purpose. Second parameter is the type of message. For example, show_flash(‘Error in deleting file’, ‘error’) OR  show_flash(‘Email address entered is invalid’, ‘warning’)

If you use sessions to save flash message , for example in codeigniter $this->session->set_flashdata(‘message’,'hello’); you can use this plugin to display them by adding a php code in the footer  (or header) of every page

<?php if($this->session->flashdata(‘message’) != ” )  : ?>

<script>show_flash(‘<?= $this->session->flashdata(‘message’) ?>’)</script>

<?php endif; ?>

Here you can download the full source code:  http://www.sajithmr.me/downloads/jbar.zip

Thanks

Sajith

screen shot

But the zip file i got is not well arranged, so it shows some errors . I arranged it in proper way and uploaded here:

Download:

http://sajithmr.com/downloads/grabber.zip

(Under GNU Public License)

Using this php code , you can export the email contacts as csv file.

Here is the actual source website : http://www.phpclasses.org/browse/package/3895.html

It prompts the user a confirmation message before they close the browser window or tab. After that a lightweight window popup jumps up with your preset announcement or message  (in richtext format)

The Advantages >>

1. You can avoid the accidental close of browser window
2. You can tell or mention any message or offers before they navigate away from your website
3. It works not only on closing, but in any type of external navigation (Internal navigation is screened out from this warning)
4. Since it is built on lightweight window support, your message or warning appears very eye-catchy

You can download the plugin from : http://www.sajithmr.com/downloads/onclose-warning.zip

Screen Shot - Warning before close

From the setting page, you can set your rich text message or warning / offer . See the screen shot:

Warning Before Closing

Please feel free to mail me regarding any clarification and upgrade to admin@sajithmr.com

Regards

Sajith

(image after watermarked with gmail logo)

Those who haven’t seen  the online photoshop tool created by me, just click here: http://www.sajithmr.com/photoshop

Today we will implement the watermarking on images using php gd library. Intelligent watermarking means, apply a logo or a watermark image on another image by measuring the color depth of the applied image. For this water marking, use png images as logo or watermark  for better results.

Live example for watermark implementation: http://sajithmr.com/photoshop-tuts/watermark/addwatermark.php

You can see different watermark location by changing the x1,y1 and x2,y2 parameters of the following url:

http://sajithmr.com/photoshop-tuts/watermark/showresult.php?x1=405&y1=285&x2=520&y2=392&width=115&height=107

See the watermark php source code here: http://sajithmr.com/photoshop-tuts/watermark/watermark.class.txt

Download the full-source code of watermarking implementation using php+gd from here: http://sajithmr.com/photoshop-tuts/watermark.rar

Whenever a visitor visits your website, he can see what are the posts currently reading by other visitors. It is like youtube’s currently watching videos.

You can see its current working at the top right corner of this website.

Download the plugin for here: http://www.sajithmr.com/downloads/CurrentlyWatching.zip

Go to Admin > Plugins > and activate the plugin.

Paste this code: <?php wp_show_currently_watching() ?> by editing your template / theme . (I placed the code in header.php file)

It is implemented with ajax support.

Do you wanna inform any important news or message to your readers ? Here is a simple plugin, WordPress Announcement Plugin.

Download the plugin from : http://downloads.wordpress.org/plugin/announcement.zip

Go to Admin > Plugin > and activate announcement plugin. After that, go to options and select Announcement. By default the plugin will be inactive. You have to set your announcement and activate the announcement by checking ‘Active’ checkbox.

Never Forgot to Run the Announcement. By Default the Announcement will be inactive

Enough !!! You visitors can now see your announcement. It will be displayed only one time for a particular user .

(If you want to see the announcement again, for testing purpose, Clear browser cookies, or atleast cookies from your blog. Otherwise you have to wait another 24 hours to play the announcement again)

The plugin is created with cute design and animation. It will never interrupt your blog reader.

Regards

Sajith

If you wanna know , what is others review or opinion about your website, You can use this wordpress plugin. It will provide the blog readers and your regular visitor to rate your blog. You can put this plugin anywhere in your blog. The plugin name is sexyrate plugin.

Here is the screen shot:

There are 4 types for rating , Perfect, Good , Bad and Too-Bad. One user can rate one time only. The whole thing is made out of Ajax. For providing more attraction , the plugin is created with images of sexy ladies .

If you want to place this plugin, what to do is , download it from http://downloads.wordpress.org/plugin/sexyrate.zip

Go to your wordpress Admin > Plugin and activate this plugin. After that , go to Admin > Presentation > Theme Editor and edit any place you want (header, single.php , index.php, home.php or sidebar.php) as suit to your blog and add this line:

<?php wp_show_my_rate() ?>

*Remember, this plugin is referred to those who has white backgroud wordpress theme.

Comment me your opinion about this plugin

Later
Sajith

Today we will discuss about cropping of images using php and gd library.

Look at the simple example here:

http://www.sajithmr.com/photoshop-tuts/crop/simplecrop.php

$x1 = $_GET['x1'];
$y1 = $_GET['y1'];

$x2 = $_GET['x2'];
$y2 = $_GET['y2'];	

$image_object =   imagecreatefromjpeg('hari.jpg');
$image_cropped =  Crop($image_object,$x1, $y1, $x2,$y2);
$temp_path = rand(1,99999)."hari.jpg";
imagejpeg( $image_cropped,$temp_path);

header('Location: simplecrop.php?img='.$temp_path );	  

?>

Here the Crop function is doing the real work. x1 and y1 are Top-Left Coordinates of new image and x2, y2 are the Bottom-Right .

Here is the function for Crop

function Crop($image, $xpos1,$ypos1,$xpos2,$ypos2)
	{
		require_once('class.cropcanvas.php');
		$cc =& new CropCanvas();
		$cc->loadImageFromObject($image);
		$cc->cropToDimensions($xpos1, $ypos1, $xpos2,$ypos2 );
		return $cc->getImageObject();

	}

?>

You can see the class.cropcanvas.php file from the attachment.

In the above example, we have to enter each coordinates manually. See the example below:

http://www.sajithmr.com/photoshop-tuts/crop/realcrop.php

Here you can select the area by click and drag (like orkut)

This is implemented with the help or jslib javascript. The given attachment in the end of this post contains the all.

http://www.sajithmr.com/photoshop-tuts/crop.zip

Keep reading for the further posts in this series. Next post is on Intellegent watermarking on images.

Subscribe to my Feeds: http://www.sajithmr.com/feed/