Twitter-style confirmation message with jQuery

Twitter-style confirmation message with jQuery

One of the cool ways that Twitter interacts with users (when you're not too busy seeing that pesky fail whale!) is how they display their error and confirmation messages. I especially like the clean approach and displaying the messages at the top of the page. If you're looking for a similar approach with your web application or dynamic web site, here's one way you can do it using the jQuery form & some validation.

If you want to know more and download the source follow the link

http://www.skyrocketlabs.com/articles/twitter-style-confirmation-message.php

Demo

http://www.skyrocketlabs.com/categories/tutorials/twitter-style-confirmation-message/demo/index.html

Download

http://www.skyrocketlabs.com/categories/tutorials/twitter-style-confirmation-message/twitter-style-confirmation-message.zip

http://dl.dropbox.com/u/3293191/JQUERY/twitter-style-confirmation-message.zip

toggle footer with jQuery & CSS

toggle footer with jQuery & CSS

If you want to know more and download the source follow the link

http://dl.dropbox.com/u/3293191/JQUERY/jquery-css-toggle-footer.zip

Twitter-style login with jQuery & CSS3

Twitter-style login with jQuery & CSS3

it works across all browsers...except IE6 and IE7/8 does not apply the CSS3.

If you want to know more and download the source follow the link

http://www.skyrocketlabs.com/articles/twitter-style-login-with-jquery-and-css3.php

Demo

http://www.skyrocketlabs.com/categories/tutorials/twitter-style-login-with-jquery-and-css3/demo/index.html

Download

http://www.skyrocketlabs.com/categories/tutorials/twitter-style-login-with-jquery-and-css3/twitter-style-login-with-jquery-and-css3.zip

http://dl.dropbox.com/u/3293191/JQUERY/twitter-style-login-with-jquery-and-css3.zip

Facebook-style navigation menu with jQuery

Facebook-style navigation menu with jQuery

If you want to know more and download the source follow the link

http://www.skyrocketlabs.com/articles/facebook-style-nav-menu-with-jquery.php

Demo

http://www.skyrocketlabs.com/categories/tutorials/facebook-style-nav-menu-jquery/demo/index.html

Download

http://www.skyrocketlabs.com/categories/tutorials/facebook-style-nav-menu-jquery/facebook-menu.zip

http://dl.dropbox.com/u/3293191/JQUERY/facebook-menu.zip

image rollover

image rollover

<style>
#imagerollovermenu {
width: 960px;
height: 72px;
margin: 20px 0 60px 0;
}
#imagerollovermenu a {
float: left;
display: block;
width: 140px;
height: 52px;  
text-decoration: none;
margin: 0 12px 0 0;
padding: 0;
}
#imagerollovermenu a.about {
background: url(images/menu4-sprite1.png) 0px 0px no-repeat;
}
#imagerollovermenu a:hover.about  {
background: url(images/menu4-sprite1.png) 0px -52px no-repeat;  
}
</style>

 

Demo

http://creativedesign-mind.com/r-ednalan/demo/image_roll_over.html

Download

http://dl.dropbox.com/u/3293191/CSS/hoverbuttons.zip

How to enable error reporting in php?

How to enable error reporting in php?

To avoid this issue, the below code can be placed in the php file for enabling the error message display for the particular page.

error_reporting(E_ALL);
ini_set("display_errors", 1);

Animated Hover

Animated Hover get the title attribute and append it to the hover text. If you want to know more and download the source follow the link http://creativedesign-mind.com/r-ednalan/demo/Animated-Menu-Hover.html Download http://dl.dropbox.com/u/3293191/JQUERY/Animated-Menu-Hover.zip

Entire Block Clickable

Entire Block Clickable

This will make entire block element clickable

Demo

http://creativedesign-mind.com/r-ednalan/demo/Block-clickable.html

Download

http://dl.dropbox.com/u/3293191/JQUERY/Block-clickable.zip

Collapsible Panels

Collapsible Panels

This example shows you how to imitate the Gmail inbox panels.

If you want to know more and download the source follow the link

http://www.webdesignerwall.com/demo/jquery/collapsible-panels.html

Download

http://dl.dropbox.com/u/3293191/JQUERY/CollapsibleMessagePanels.zip

jquery Comment Management

jquery Comment Management

This one requires the Color Animations plugin.

If you want to know more and download the source follow the link

http://www.webdesignerwall.com/demo/jquery/wordpress-comments.html

Jquery Message Box

Jquery Message Box

a css message box that if click the login button a message box display in fade In and by clicking the close button it fade out

   <style type="text/css" media="all">
 * { padding:0; margin:0; }
 .block {
  padding-left:50px;
 }
 .block .message {
  padding: 10px 15px 10px 40px;
  margin: 10px 0;
  font-weight: bold;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width:30%;
 }
 .block .message p {
  padding: 0;
  width: 93%;
  float: left;
  text-align:left;
 }
 .block .message.info {
  border: 1px solid #bbdbe0;
  background: #ecf9ff url(images/info0000.gif) 12px 12px no-repeat;
  color: #0888c3;
 }
 .block .message .close {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  background: url(images/close000.png) 0 0 no-repeat;
  margin-top: 2px;
  cursor: pointer;
  -moz-opacity: 0.7;
  opacity: 0.7;
 }

 .block_content {
  overflow: hidden;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 10px 20px 0;
  }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){ 
    $('.block .message').hide().append('').fadeIn('slow'); //fade message

    $('.block .message .close').click(function() {
    $(this).parent().fadeOut('slow', function() { $(this).remove(); }); //close message
   });
  });
</script>

>?
 if (isset($_POST['Login'])){
  $message = "

   
Just click login, this is an example.
 
  
";
 }

?>


>? echo $message; ?>


 Username:

 


 Password:

 


   



   

Demo

http://creativedesign-mind.com/r-ednalan/demo/Message_box_message.php

Download

http://dl.dropbox.com/u/3293191/JQUERY/jquery_box_message.zip

CSS text box set focus

CSS text box set focus

<style>
input.text {
 width: 35%;
 border: 1px solid #BFBFBF;
 font-size: 13px;
 color: #222;
 padding: 5px;
 vertical-align: middle;
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 8px;
 margin-left: 0px;
}
input:focus { background-color: #F2F2F2; border: 1px solid #999999;}
input.text.big { width: 30%;}


</style>

   Username
   
   Password
   

Demo

http://creativedesign-mind.com/r-ednalan/demo/CSStext-box-set-focus.html

CSS Jquery Message Box

CSS Jquery Message Box

A css message box that fade out if click the message box

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Closing Divs - used on Notification Boxes
  $(".canhide").click(function() {
   $(this).fadeOut(700);
  });
});
</script>

<style>
.notification {
 line-height: 30px;
 cursor: pointer;
 clear: both;
 height: 30px;
 margin: 8px 0px 8px 0px;
 padding: 20px 25px 10px 60px;
 -moz-border-radius:4px;
 -webkit-border-radius: 4px;
}
.notification strong  { margin-right: 5px;}
.notification p   {
 font-size: 11px;
 padding: 0px;
 margin: 0px;
 color: #333333;
}
.message p {
 font-size: 11px;
}
.warning {
 background-image: url(error000.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #FFC237;
 background-color: #FFEAA8;
 color: #826200;
}
.success {
 background-image: url(accept00.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #99C600;
 background-color: #EFFFB9;
 color: #3C5A01;
}
.failure {
 background-image: url(exclamat.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #EB5339;
 background-color: #FCCAC2;
 color: #AC260F;
}
.information {
 background-image: url(informat.png);
 background-position: 15px center;
 background-repeat: no-repeat;
 border: 2px solid #418ACC;
 background-color: #D0E4F4;
 color: #235685;
}

</style>
            
            

                
WARNING: 
                This is a warning message. 
            
            
            
            

                
INFORMATION: 
                This is a message for information
            
    
            
            
            

                
SUCCESS: 
                This is a message for SUCCESS.
            
  
            
            
            

                
FAILURE: 
                This is a failure message.
            

Download

http://dl.dropbox.com/u/3293191/CSS/message_boxjquery_fadeaway.zip

CSS Message Box with jquery

CSS Message Box with jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane .btn-delete").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>

<style>
.portlet-content {  padding: 15px; position: relative; }
.message
{
background: #CCC url(images/icon_not.gif) no-repeat 10px 11px;
font-size: 13px;
color: #74655f;
display:block;
padding:10px 10px 10px 40px;
margin-bottom: 1em;
border: 1px solid #c2beb1;
position:relative;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.message-warning
{
background-color: #fffcd3;
background-image: url(images/error000.png);
color: #74655f;
border-color: #c2beb1;
}
.message-success
{
background-color: #e5f993;
background-image: url(images/accept1.png);
color: #688006;
border-color: #9bac55;
}
.message-info
{
background-color: #d4ebfa;
background-image: url(images/informat.png);
color: #4b6bab;
border-color: #90b1c7;
}
.message-error
{
background-color: #f6b9b9;
background-image: url(images/exclamat.png);
color: #c32727;
border-color: #e18484;
}
.close {
float:right;
font-weight:bold;
}

</style>


Informative Message X


Warning Message X


Success Message X

  

Error Message X

Download

http://dl.dropbox.com/u/3293191/JQUERY/CSS_messege_box.zip

HTML text editors - Rich Text Editor

HTML text editors - Rich Text Editor

Free Rich Text Editor is a JavaScript WYSIWYG editor.
It can be easily integrate with any platform.
Editor lets you to switch between the design, HTML code & preview modes.

If you want to know more and download the source follow the link

http://www.freerichtexteditor.com/

Demo

http://www.freerichtexteditor.com/index.php?inc=demo/index

http://www.freerichtexteditor.com/download/

CSS SUCCESS MESSAGE

CSS SUCCESS MESSAGE

<style>
 .message_status
 {
  margin: 5px 20px 15px 0px;
  border: 1px solid #28903A;
  padding: 5px;
  background-color: #E7FEEF;
 }
 .message_error img { position: relative; top: 2px; }
</style>

 
 An email has been sent to you with your login information

Download

http://dl.dropbox.com/u/3293191/CSS/CSS_message.zip

CSS Message

CSS Message

<style>
.success, .fail, .information, .attention {
background-repeat: no-repeat;
background-position: 10px center;
height: 20px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;

}
/* Succes Notification Box */
.success     {
background-color: #EBF8D6;
border: 1px solid #A6DD88;
color: #539B2D;
background-image: url(images/accept00.png);
}
/* Failure Notification Box */
.fail      {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(images/delete00.png);
}
/* Information Notification Box */
.information    {
background-color: #D3EEF1;
border: 1px solid #81CDD8;
color: #369CAB;
background-image: url(images/info0000.png);
}
/* Attention Notification Box */
.attention   {
background-color: #FFFBCC;
border: 1px solid #FFF35E;
color: #C69E00;
background-image: url(images/warning0.png);
}

/* Notification Close Button */
.close-notification     {
width: 16px;
height: 16px;
position: absolute;
background: url(images/close000.png) no-repeat;
top: 4px;
right: 4px;
cursor: pointer;
}
</style>
  
This is a Success Message
  
This is an attention box.
  
This is an failure box.
  
  
This is an information box.

Download

http://dl.dropbox.com/u/3293191/CSS/CSS_message.zip

Image Replacement Gallery

Image Replacement Gallery

Replace the img src attribute with the a href attribute.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('')
$(".thumbs a").click(function(){
 var largePath = $(this).attr("href");
 var largeAlt = $(this).attr("title");
 $("#largeImg").attr({ src: largePath, alt: largeAlt });
 $("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
</script>

<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>

Download

http://dl.dropbox.com/u/3293191/JQUERY/ImageReplacement.zip

Free SEO Tools

Free SEO Tools

Here are some online SEO tools that you can use to check your PageRank, Link Popularity, Search Engine Position, Keyword Density, etc.

• www.pagerank.net


• www.iwebtool.com


• www.seochat.com/seo-tools


• www.webconfs.com


• tools.seobook.com

PHP Frameworks

• CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code. (This site utilizes CakePHP framework)
  
  


• CodeIgniter is a powerful MVC framework. The official site is well documented and also has an active community of developers.
  
  


• ZendFramework (ZF) is more of a set of libraries than a MVC (model view controller) framework.
  
  
  


• Symfony is a full-stack framework, a library of cohesive classes written in PHP5.