The Code Dreamer : Nitin Hayaran » Uncategorized

Energy Saving Javascript

nitin — Sun, 27 Jun 2010 18:30:38 +0000

Title of this post may seem strange to you but this is true, You can actually save some energy by using this Javascript on your website. Let me tell you how.

This javascript turns the webpage black if there is no user activity on the page for some time. As the page predominantly turn black the script in-effect saves energy.

Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.

Roberson et al, 2002.

Just have a look at the Demo to see how it looks:

Energy Saving Javascript Demo

How to Use

Using this script is damn simple just place following script tag anywhere in the page. It would be good if you place this script just before

<script src="http://apps.nitinh.com/energy.js?time=100&credit=0" type="text/javascript"></script>

Configuration

There are two configurable parameters:

time : This is the amount of idle time before which the screen turn black. The time is in number of seconds and its value should be greater than 10.
credit : This is boolean field to show / hide credits in Black Screen. Values could be 1 or 0

Hope this script saves some of the valuable world energy.

WordPress Hacks : Export and Redirect Posts based on their Category

nitin — Fri, 26 Mar 2010 16:03:06 +0000

WordPress is an excellent blogging engine. It is easy to setup and even easier to use. It has got a huge collection of themes and plugins. Because of all these things WordPress has got so widespread use.

WordPress has the concept of categories to segregate posts in different types. When number of posts in some category becomes really huge, its good to make a separate website for this particular category.

I faced similar problem for one of my website and I decided to migrate all of my posts in “XYZ” category to a different domain. But, unfortunately WordPress Admin Dashboard doesn’t provide any direct method to export all posts in a particular category.

So, to perform such migration we’ll have to go through several steps. For better understanding we can basically divide this full migration in two steps:

Export Posts / Comments based on its category
Redirect posts of this category

Export Posts based on its category

WordPress admin panel is very rich, and it does provide direct method to export posts, pages, comments, custom fields, categories, and tags. But you can only export it based on its author, there isn’t any way based on category. So, basically what I did was :

Create a new user “AUTHOR_1”
Change author of all the posts in category “CATEGORY_XYZ” to “AUTHOR_1”
Export posts of “AUTHOR_1”

Step 1 and 3 are quite obvious and straight, the only challenge is with Step 2. The best way I felt was to dig into the WordPress database and change author on table level itself.

Database Manipulation

WordPress stores all posts in a table called “wp_xxxxxx_posts”. This table consists a column named “post_author”. So basically we’ll have to change this column for our posts. To do this just run following queries on your wordpress database.

NOTE : Before running any query on database level, I’ll recommend you to take backup of the datebase.

Get TERM_ID

SELECT  `term_id` ,  `name` ,  `slug`
FROM  `wp_h8kac5_terms`
WHERE  `name` LIKE  'CATEGORY_XYZ'

Here you'll have to note the "term_id" In following query put term_id taken form above query.

Get TERM_TAXONOMY_ID

SELECT  `term_taxonomy_id` ,  `term_id` ,  `taxonomy` ,  `count`
FROM  `wp_h8kac5_term_taxonomy`
WHERE  `term_id` = %term_id%
AND taxonomy =  'category'

Here you have to note "term_taxonomy_id". Secondly you can see a column "count", this count should be equal to the posts returned in :

http://www.example.com/wp-admin/edit.php?category_name=CATEGORY_XYZ

Update AUTHOR_ID in Posts Table

This is the final sql query to update author. Before this you need to find the user_id of the user we just created. This can be found in table "wp_h8kac5_users".

UPDATE wp_h8kac5_posts
SET post_author = %USER_ID%
WHERE id IN (
SELECT object_id FROM `wp_h8kac5_term_relationships` WHERE `term_taxonomy_id` = %TERM_TAXONOMY_ID% )

You need to replace %TERM_TAXONOMY_ID% from the "term_taxonomy_id" returned from the previous query.

Export Posts

Hurry !! half the battle is won. We have changed author of all the desired posts. Now we just have to log on to admin panel and export the posts of this author. This can be done from:

http://www.example.com/wp-admin/export.php

Imports Posts on New Domain

Now log on to the admin dashboard of new domain and import these posts from:

http://www.example.com/wp-admin/import.php

At at this point we have done with export part of this migration process. Now the only thing left is to redirect these posts. For redirection we’ll use .htaccess rules.

Redirect posts of the category

On my website I have following permalink format :

/%year%/%monthnum%/%category%/%postname%/

So, basically “Category” is the 3rd parameter in my URL Scheme. You need to keep similar URL Scheme on your new website. According to this URL pattern we have to write a rule in .htaccess file.

# BEGIN Redirection

RewriteEngine On
RewriteCond %{REQUEST_URI} ^(/\d{4}/\d{2}/)([^/]+)(/.*)$
RewriteCond %2 ^CATEGORY_XYZ$
RewriteRule ^(.*)$ http://www.new-domain.com/$1 [redirect=permanent,last]

# END Redirection

Just put above code in starting of .htaccess, and you are all done.

You can test our implementation by visiting any post of “CATEGORY_XYZ”, it should be redirected to your new domain.

Feel free to shoot any queries through comments.

Sexy Tooltip using CSS3 (no images)

nitin — Thu, 18 Mar 2010 08:45:59 +0000

CSS is Awesome, but “CSS3” is Awesomely Awesome.

With CSS3 we can make our pages even more beautiful without using additional images and extra markup.

In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.

Here, this example is semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

The inspiration for these tooltips is from the excellent attempt from “Nicolas Gallagher” in Pure CSS speech bubbles.

Lets first head on to the demo for its actual effect.

Tooltip Demo

Tooltip using CSS3

Interested ??? Lets head on to its code

HTML Markup

The HTML used here is very simple, just add class”tooltip” and in title put tooltip text.

<a class="tooltip" title="This is first tooltip" href="#">Link</a>

CSS Code

The CSS for this effect utilizes :before and :after to show tooltip. Moreover box-shadow, gradient, border-radius properties of CSS3 are used to add some glare. Here is the code.

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content: attr(title);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;
 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
 
	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);
 
	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */
}
 
/* creates triangle */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"\00a0";
	display:none;
	width:0;
	height:0;
	border-style:solid;
 
	top:-3px;
	left:0px;
	border-width:15px 7px 15px 7px;
	border-color:transparent transparent #075698;
}
 
a.tooltip:hover::before{
	display:block;
}
 
a.tooltip:hover{
	z-index:10;
	position:relative;
}
 
a.tooltip:hover::after{
	width:200px;
	display:block;
	margin:25px 0 0 10px;
}

Hope you'll like it.

Beautiful Nag Screen using JQuery & CSS3

nitin — Tue, 16 Mar 2010 16:51:18 +0000

Yesterday I wrote about a beautiful implementation for nag screen using mootools and CSS3. Thanks for all of my visitor for showing interest in it.

Considering requests from some of the users, I have also worked on its jQuery version. In jQuery version I have also tried to remove the bugs pointed out by one of the user.

The new jQuery version also have following improvements:

Close button can be used to close nag screen
Now the whole text doesn’t jumps when nag screen sticks to top

thanks “Seeker” for pointing out these bugs.

Head over to Demo and download the source for this page.

Demo of Nag Screen

Download Nag Screen Code

Be sure to check out the MooTools version.

How to Create a Simple Slideshow using Mootools / JQuery

nitin — Sat, 13 Mar 2010 17:13:47 +0000

When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.

Demo using Mootools

Demo using JQuery

So, Interested ??? Lets head over to its implementation.

Action Plan

Step 1 : HTML Code Markup
Step 2 : Setup CSS for the Slideshow
Step 3 : Javascript for getting desired effect

Step 1 : HTML code

In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.

<div id="bigPic">
    <img alt="" src="imgs/1.jpg" />
    <img alt="" src="imgs/2.jpg" />
    <img alt="" src="imgs/3.jpg" />
    <img alt="" src="imgs/4.jpg" />
    <img alt="" src="imgs/5.jpg" />
    <img alt="" src="imgs/6.jpg" />
    <img alt="" src="imgs/7.jpg" />
    <img alt="" src="imgs/8.jpg" />
    <img alt="" src="imgs/9.jpg" />
    <img alt="" src="imgs/10.jpg" />
</div>
 
<ul id="thumbs">
    <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li>
    <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li>
    <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li>
    <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li>
    <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li>
    <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li>
    <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li>
    <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li>
    <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li>
    <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li>
</ul>

Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.

Step 2 : Necessary CSS Code

This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.

#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
 
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

Step 3 : Javascript Magic

The basic idea to get the effect is in following steps:

Increase the z-index of current shown image
Show next image to be shown just below current image.
Now using fade out current image. This way next image will become visible.

Equivalent JS code used is as follows.

Using Mootools

If you use JQuery directly head on to next section with JQuery code.

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index<$('bigPic').getElements('img').length){
        var indexImage = $$('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).setStyle('z-index',2);
                $clear(myTimer);
                var myFx = new Fx.Tween(currentImage, {
                    duration: 250,
                    onComplete:function(){
                        $(this).setStyles({'display':'none','z-index':1});
                        myTimer = showNext.delay(3000);
                    }.bind(currentImage)
                }).start('opacity',0);
            }
        }
        indexImage.setStyles({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $$('#thumbs li').removeClass('active');
        $$('#thumbs li')[index].addClass('active');
    }
}
 
function showNext(){
    var len = $('bigPic').getElements('img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
window.addEvent('domready',function(){
    myTimer = showNext.delay(3000);
    showNext(); //loads first image
    $('thumbs').getElements('li').addEvent('click',function(e){
        var count = this.get('rel');
        showImage(parseInt(count)-1);
    });
});

JQuery Implementation

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.

Download Code

JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip