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

Tags: featured, html, Javascript, jquery, menu, scroll, slider, source code

Flash messages or notification messages are very essential part of every update/edit or delete operations. We either use ajax update messages like “You account has been updated” or “Your photo has been successfully deleted”

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

Tags: ajax, delete, display, edit, error, flash, information, jbar, jquery, message, notification, plugin, update, warning

If you are a social media website developer , sometimes you might search for grabbing contacts from a particular email account if the password is given. I also did the same.  In most of the cases it did not work properly. But recently i got a contact grabber from phpclasses.org which works perfectly on Gmail, Hotmail, Rediff, Yahoo, Orkut, MySpace, Indiatimes, Linkedin , AOL and lycos

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

Tags: access, AOL, code, contact, download, email, fetch, get, gmail, grab, grabber, Hotmail, Indiatimes, Linkedin, lycos, MySpace, orkut, password, php, Rediff, yahoo

Today i published my new wordpress plugin, which control user navigation. The plugin name is “Close Warning”.

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

Tags: close, message, offer, option, plugin, warning, wordpress

Online Photoshop in PHP Part (5) >>

(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

Tags: code, example, gd, live, online, photoshop, php, source, watermark

After the success of my previous wordpress plugins , Announcement, Show My Page Rank, Sexy Rating, Add to this , Stumble Reviews, I created one more interesting plugin, called Currently Reading Posts Plugin.

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.

Tags: ajax, currently, plugin, sexy, show, watching, wordpress, youtube

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

Tags: announcement, featured, flash, message, news, plugin, wordpress

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

Tags: , ajax, opinion, plugin, rate, sexy, visitor, wordpress

Online Photoshop in PHP (Series Part 4) >>

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/

Tags: crop, gd, image, orkut, php

Today i implemented gmail chat window , not an ajax chat with a chat server, but its client side implementation.

Here you can see the demo: http://www.sajithmr.com/gtalk/

Take this link in a new tab or window, and take any other website without closing it.

After 3 seconds , (Consider it as a new chat message arrived situation) you can see the google chat notification sound , and title changing. (I didn’t get the actual gtalk notification sound, so i used windows notify.wav file )

You know google (gmail) implemented its sound notification is via swf object. Here me too done the same.

I wrote two function to check whether the browser is in focus or not.

Here is the functions:

function lostFocus()
{
document.title = 'Sajith M.R Says...';
state = 'nonfocus';

played =  0 ;

changeColorRed();

alterTitle();

}

function gotFocus()
{
document.title = 'Gmail Inbox(1)';

state = 'focus';

played = 0 ;
}

The alterTitle() function calls in 3 seconds setTimeOut manner.

function alterTitle()
{

if(state =='nonfocus')

{
if ( document.title == 'Gmail Inbox(1)')
{

if(played == 0)
{
soundManager.play('notify');
played = 1;
}

document.title = 'Sajith M.R Says...';

}
else
document.title = 'Gmail Inbox(1)';

setTimeout("alterTitle()",3000);

}
}

The soundmanager.js file handles the swf flash object and sound triggering.

<script type=”text/javascript” src=”script/soundmanager.js”></script>

These three simple scripts together created this demo: http://www.sajithmr.com/gtalk/

If you want the whole source code , mail me: admin@sajithmr.com

Comment Please …

Regards

Sajith.M.R
http://www.sajith.name

Tags: chat, featured, gmail, gtalk, implementation, notification

If you installed stumble toolbar in your browser, you can see a white bubble button. It is called stumble review button. When you browse a website url, if you press this bubble, you can see the reviews regarding that website by different stumbleupon users. Take your wordpress blog posts and click on stumble review bubble, you can see others reviews about each of your blog post.

If you are getting more reviews for your wordpress blog post, it is the time to reveal or expose your reviews in front of your blog readers.

Here is a wordpress plugin which shows your post reviews by stumble users. If you are using wordpress widget, just activate stumble review widget and add to you sidebar after download the plugin files from http://wordpress.org/extend/plugins/stumble-reviews/

If you are not a wordpress widget user, add the below code in Template Editor.

<?php wp_stumble_review_template() ?>

If you want to add stumble review on your sidebar use the below code:

<?php simple_sumble_review_template() ?>

See the screen shot when i activated the stumble review plugin and added the code <?php wp_stumble_review_template() ?> in my single.php file just above the comments area ( <?php comments_template(); ?> )

(Screenshot of sajithmr.com after installing stumble reviews plugin)

Tags: featured, plugin, review, stumble, stumbleupon, wordpress

If your wordpress blog has a better page rank, here is a better chance to reveal it to your blog readers. That is WordPress Page Rank Plugin Show-My-PageRank

Download the plugin from Show-My-PageRank.zip

Screen shot of my blog after installing this plugin is here:

You can also change the size, caption text, text color, font size etc from option window.

By default the rank will be shown just before each post. You can uncheck this option from the plugin option page.

If you want to show your page rank to a custom area , say footer.php or header.php , just add the below line to corresponding section in theme editor window.

<?php wp_show_my_pagerank() ?>

See my blog’s about page after adding this php code in page.php file in theme editor:

So start download now. Happy Blogging !!!

Tags: , google, page rank, pagerank, plugin, show, wordpress