Coyote Lab

WordPress Posterous Plugin

admin — Fri, 22 Jan 2010 04:42:17 +0000

Share your WordPress posts through Posterous.

Installation:

Upload the wp-posterous folder to your /wp-content/plugins/ directory.
Activate the “Wp Posterous” plugin in your WordPress administration interface.
Create a page or a post, select the networks and publish post as normal.

Create a cool looking jQuery data table

admin — Wed, 25 Nov 2009 09:01:49 +0000

In this article I’ll explain how to create a cool looking data table using jQuery…

Step 1 – HTML Page

File Name: xpand.html





jQuery Data Table







  
    
      
        Austria
        
        
        
      
    
  

  
    
      
        Austria
        
        
        
      
      
        [x]close
        text
        text
        text
      
    
  

  
    
      
        Belgium
        
        
        
      
    
  

  
    
      
        Belgium
        
        
        
      
      
        [x]close
        text
        text
        text
      
    
  

  
    
      
        Bulgaria
        
        
        
      
    
  

  
    
      
        Bulgaria
        
        
        
      
      
        [x]close
        text
        text
        text

Step 2 – Add Style

File Name: style.css

*          {margin: 0; padding: 0;}
body       {font-family: helvetica; font-size: 14px; font-weight: bold; color: #333;}
p          {font-size: 16px; color: #e792b1; padding: 0 0 10px 10px; cursor:pointer;}
.container {width: 760px; margin: 0 auto; padding: 50px 0 0 0;}
.country   {border-top: 1px solid #C7004A; width: 100%;}
.mv        {margin: 0; padding: 0; border-top: 1px solid #C7004A;}
img        {border: 0 none;}
h3         {padding: 5px 10px; font-size: 14px; color: #454545;}
h4	 {cursor:pointer;}

Step 3 – jQuery slider effect

File Name: slide.js

$(document).ready(function(){
	$('div.mv').hide().css('background-color', '#F7D9E4');
  	$('h4').click(function(){
  		$(this).parents("div.country").next().slideDown("slow")
  		.prev().hide(".country").next().siblings('div.mv')
  		.slideUp("slow").prev().show("div.country");
  		return false;
  	});
  	$('p').click(function(){
  		$(this).parents("div.mv").slideUp("slow")
  		.prev().css('background-color', '#FFFFFF').show(".country");
  		return false;
  	});
  	$( function(){
  		$('.country').hover( function(){
  			$(this).css('background-color', '#F7D9E4');
  		},
  		function(){
  			$(this).css('background-color', '#FFF');
  		});
	});
});

Step 3 – jQuery hover effect

File Name: roll-over.js

$(document).ready( function(){
	PEPS.rollover.init();
});
	PEPS = {};
	PEPS.rollover =
	{
		init: function(){
			this.preload();
			$(".ro").hover(
				function () { $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
				function () { $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
			);
		},
		preload: function(){
			$(window).bind('load', function() {
				$('.ro').each( function( key, elm ) { $('').attr( 'src', PEPS.rollover.newimage( $(this).attr('src') ) ); });
			});
		},
		newimage: function( src ) { return src.substring( 0, src.search(/(\.[a-z]+)/) ) + '_o' + src.match(/(\.[a-z]+)/)[0]; },
		oldimage: function( src ){ return src.replace(/_o/, ''); }
	};

Click here to view Live Demo

Upload CSV and Insert into Database Using PHP/MYSQL

admin — Wed, 18 Nov 2009 19:39:49 +0000

This script can be use to update data in database from local CSV file on user(admin) computer

Step 1 – Data Base Connection

At first we need to connect to database…
File Name: connection.php

Step 2 – upload page

Making connection to data base by calling the connection.php, clean the table of its old data, insert new uploaded data into table…
File Name: upload.php





Upload page






" . "File ". $_FILES['filename']['name'] ." uploaded successfully." . "";
		echo "Displaying contents:";
		readfile($_FILES['filename']['tmp_name']);
	}

	//Import uploaded file to Database
	$handle = fopen($_FILES['filename']['tmp_name'], "r");

	while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
		$import="INSERT into tablename(item1,item2,item3,item4,item5) values('$data[0]','$data[1]','$data[2]','$data[3]','$data[4]')";

		mysql_query($import) or die(mysql_error());
	}

	fclose($handle);

	print "Import done";

	//view upload form
}else {

	print "Upload new csv by browsing to file and clicking on Upload
\n";

	print "";

	print "File name to import:
\n";

	print "
\n";

	print "";

}

?>

CSS Browser Hack

admin — Wed, 18 Nov 2009 19:26:11 +0000

Browser hack right or wrong, some developer use it for different reasons, following describes different techniques to make that approach

Inline Hacks

	.container {
		width: 200px;
		margin: 0 auto;
		height: 300px;
		background-color: #CCC;
		*background-color: #000; /* IE 7 */
		_background-color: #F00; /* IE 6 */
		display: block;
	}
	/* SAFARI */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	.container {background-color: #003366;}
	}
	/* OPERA */
	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	.container { background-color: #fefafe; }
	}
	/* FIREFOX VERSION 1 - 2 */
	body:empty .container { background-color: #009966; }
	/* FIREFOX ALL VERSION */
	@-moz-document url-prefix() {
	.container { background-color: #339966; }
	}

Wrong approach, style sheet will not pass the validation

IE Conditional Comments

Style sheet will pass the validation. Just works on internet explorer 6, 7, 8 or older version

Client side CSS browser selector

created by Rafael Lima It work on any browser with javascript enabled, developer have option to choose between browser as well as operating system. Complete documentation can be find here

Sever side CSS browser selector

	
	

	
	
		

		untitled

PHP version of Rafael Lima’s CSS browser selector, Complete documentation can be find here

Word Press (CMS) SEO

admin — Wed, 18 Nov 2009 11:11:52 +0000

Using word press as CMS is popular, however adding keywords and description to each page might be confusing for some of us, following is a quick solution to apply meta tags

How to Apply SEO for Wp

There are plenty plugins which offer SEO integration for word press, tho most of them suitable for blog. What if we like to use word press as a CMS. Here is how to do so in two quick steps:
Step 1: Finding the post number for each page
Step 2: Write PHP statement for each page and place them in “header.php”

Finding post number

Log in to wp-admin » click on pages » click on edit » hover over the page name and page number will show up at the bottom on browser task-bar

Writing the PHP Statement

Lets say we have 4 pages in our website( Home | About | Portfolio | Contact ), after finding the post number for each page:

Home post id = 4
About post id = 2
Portfolio post id = 6
Contact post id = 8

We are ready to apply them in our PHP statement:

We are done, place the above script in “Header.php” between

tags.