Create a Javascript show hide contents

Create a Javascript show hide contents

//css
  <style>
   .bigbold {
    font-weight: bold;
    font-size: 25px;
   }
   .heading
   {
    background-color: #8FAFBF;
    text-align: center;
    font-weight: bold;
    height: 30px;
   }
  </style>

//javascript  
     <script>
  function showhideit(id,hid)
  {
   curstatus = document.getElementById(id).style.display;
   if(curstatus == "none")
   {
    document.getElementById(id).style.display = 'inline';
    document.getElementById(hid + '1').innerHTML = ' -';
    document.getElementById(hid + '2').innerHTML = '- ';
   }
   else
   {
    document.getElementById(id).style.display = 'none';
    document.getElementById(hid + '1').innerHTML = ' +';
    document.getElementById(hid + '2').innerHTML = '+ ';
   }
  }
</script>

//HTML
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr class="heading" style="cursor: pointer;" onclick="showhideit('information','info')">
  <td width="100" align="left" class="bigbold" id="info1"> +</td>
   <td align="center"><b>CLICK TO SHOW INFORMATION</b></td>
   <td width="100" align="right" class="bigbold" id="info2">+ </td>
</tr>
<tr>
   <td colspan="3" width="100">
   <div style="display:none;" id="information">
    PHP Loops
    Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
    In PHP, we have the following looping statements:
    while - loops through a block of code while a specified condition is true
    do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
    for - loops through a block of code a specified number of times
    foreach - loops through a block of code for each element in an array
   </div>
  </td>
</tr>
</table>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/Show_hide.html

Javascript show hide toggle

Javascript show hide toggle

<script type="text/javascript">
function toggle(obj){
var el = document.getElementById(obj);
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = 'inline';
}
}
</script>
<a href="#test1" onclick="toggle('table1');">Toggle 01 </a><br />
<table id="table1" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
<br/>
<a href="#test2" onclick="toggle('table2');">Toggle 02</a><br />
<table id="table2" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/show_hide_toggle.html

Javascript One Function to Count and Limit Multiple Form Text Areas

Javascript One Function to Count and Limit Multiple Form Text Areas




Javascript

<SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
//  End -->
</script>

HTML Form

<form name="myForm"
action=""
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>

<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>

<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>

Create a bubble tooltip using javascript

Create a bubble tooltip using javascript

This demo demonstrates how the balloon tooltip works. Roll your mouse over the links.





CSS Code

<style>
a{
 color: #D60808;
 text-decoration:none;
}
a:hover{
 border-bottom:1px dotted #317082;
 color: #307082;
}
#bubble_tooltip{
width:147px;
position:absolute;
display:none;
}
#bubble_tooltip .bubble_top{
background-image: url('images/bubble_top.gif');
background-repeat:no-repeat;
height:16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('images/bubble_middle.gif');
background-repeat:repeat-y;
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
position:relative;
top:-8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('images/bubble_bottom.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
height:44px;
position:relative;
top:-6px;
}
</style>

Javascript code

<script>
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}

function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';

}
</script>

HTML Code

<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
<a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()"><h2>Roll over me</h2></a> </p>

Demo

http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/index.html

Download
http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/bubble_tooltip.zip

CSS3 Transition

CSS3 Transition

Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!

//CSS
<style>
.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
//HTML
<p><a class="my_class" href="#">Mouse over this example paragraph to <br/>see it rotate 7degrees using a transform transition.</a></p>

Create Image Rotate Slider

Create Image Rotate Slider










CSS Code

 <style>
body{
background:#1f1f1f;
margin:0;
}
#intro .slide, #intro .slide li{
 width:366px;
 height:196px;
 overflow:hidden;
 margin:0;
 padding:0;
 }
#intro{
 border:5px solid #FFFFFF;
 width:366px;
 height:196px;
 margin:20px;
 }
</style>

Javascript Code

 <script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
rotate();
});
this.rotate = function(){

$(".rotate").each(function(){ 
var obj = this;      
var pause = 5000;
var length = $("li",obj).length;
var temp = 0;
var randomize = false;

function getRan(){
 var ran = Math.floor(Math.random()*length) + 1;
 return ran;
};
function show(){
 if (randomize){
  var ran = getRan();
   while (ran == temp){
   ran = getRan();
  };
  temp = ran;
 } else {
  temp = (temp == length) ? 1 : temp+1 ;
 };
 $("li",obj).hide();
 $("li:nth-child(" + temp + ")",obj).fadeIn("slow");
};
show(); setInterval(show,pause);

});
};
</script>

HTML Code

<div id="intro">
<ul class="slide rotate">
 <li><img src="images/img_slide1.jpg" alt="" /></li>
 <li><img src="images/img_slide2.jpg" alt="" /></li>
 <li><img src="images/img_slide3.jpg" alt="" /></li>
</ul>
</div>

Download

http://dl.dropbox.com/u/3293191/r-ednalan/randomize_slider.zip

Create CSS Post Comment Design Form

Create CSS Post Comment Design Form














CSS

<style>
#main{
float:left;
display:inline;
width:567px;
margin-left:50px;
position:relative;
}
form{
margin:1em 0;
border:none;
background:#dfeced;
border:5px solid #c9dfe1;
padding:1em 15px;
}
label{
float:left;
clear:both;
width:105px;
margin-right:20px;
margin-top:5px;
text-align:right;
}
input, textarea{
width:350px;
border:1px solid #ccc;
padding:5px;
vertical-align:middle;
margin:0;
}
textarea{
height:180px;
overflow:auto;
}  
form p{
clear:both;
margin:0;
padding:.25em 0;
} 
button{
border:none;
width:123px;
height:43px;
line-height:43px;
text-align:center;
padding:0;
margin:0;
background:url(images/bg_button.gif) no-repeat 0 0;
color:#fff;
font-weight:bold;
font-size:14px;
cursor:pointer;
vertical-align:middle;
}        
.submit{
height:52px;
margin-left:125px; 
}
</style>

HTML Form

<div id="main">
<h3>Post your comment</h3>
<form id="commentForm" action="/" method="post"> 
  <p>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" size="30" />
  </p>
  <p>
   <label for="email">Email</label>
   <input type="text" name="email" id="email" size="30" />
  </p>
  <p>
   <label for="web">Website</label>
   <input type="text" name="web" id="web" size="30" />
  </p>               
  <p>
   <label for="comment">Comment</label>
   <textarea name="comment" id="comment" rows="10" cols="30"></textarea>
  </p>    
  <p class="submit">
   <button type="submit">Send</button>
  </p> 
</form>
</div>

Demo

http://dl.dropbox.com/u/3293191/r-ednalan/css_post_comment_form.html

IE 5 and 6 png transparent using javascript

IE 5 and 6 png transparent using javascript

<script type="text/javascript" src="js/jquery.js"></script>
this.pngfix = function() {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) { 
 $("*").each(function(){
  var bgIMG = $(this).css('background-image');
  if(bgIMG.indexOf(".png")!=-1){
   var iebg = bgIMG.split('url("')[1].split('")')[0];
   $(this).css('background-image', 'none');
   $(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='crop')";
  };
 });
}; 
};
this.init = function() {
 pngfix();
};

$(document).ready(function(){ 
 init();
});

CSS Image Round Corners

CSS Image Round Corners

<style>
.thumbnails img
 {
  width: 100px;
  height: 75px;
  border: solid 5px #00A5D0;
  cursor: pointer;
  /* Round select corners */
  -webkit-border-radius: 15px 0;
  -khtml-border-radius: 15px 0; 
  -moz-border-radius: 15px 0;
  border-radius: 15px 0; 
 }
</style>
<div>
<p>Normal</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>
<div class="thumbnails">
<p>Round corner</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>

CSS Image button

CSS Image button

<style>
.downloadButton {
   margin-top: 1em;
   display: block;
   background: url(download.gif);
   width: 180px;
   height: 51px;
   cursor: default;
   text-indent: -2000px;
}
.downloadButton:hover {
   background-position: 0 -51px;
}
.downloadButton:active {
   background-position: 0 51px;
}
</style>
<p><a href="#" class="downloadButton">Download</a></p>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/css_image_button.html

Credit Card Validation

Credit Card Validation

Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.


Visit Site

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

CakePHP GROUP BY

CakePHP GROUP BY

$this->Product->find(‘all’,array(‘fields’=>array(‘Product.type’,'MIN(Product.price) as price’), ‘group’=> ‘Product.type’));

Simple JQuery Accordion

Simple JQuery Accordion

A very simple and basic accordion script. If you need an accordion style UI without extended features, this script is easy to integrate with your own project.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style>

div.slides { padding:8px; width:25%;}

div.slides h3 { margin:4px 0px 0px 0px; height:24px; background-color:#D3D3D3; border:1px #d3d3d3 solid; -moz-border-radius:0.5ex; -webkit-border-radius:0.5ex; border-radius:0.5ex; padding:4px 8px 0px 8px; cursor:pointer; }

div.slides div.content { border:1px #d3d3d3 solid; -moz-border-radius:0.5ex; -webkit-border-radius:0.5ex; border-top:0px; padding:8px 4px 4px 4px; }

</style>

<div class="slides">

<h3>Header 1</h3>

<div class="content">

 example content 1

</div>

<h3>Header 2</h3>

<div class="content">

 example content 2

</div>

<h3>Header 3</h3>

<div class="content">

 example content 3

</div>

</div>

<script>

$("div.content").hide();

$("div.content:first").show();

$("h3").bind("click", function() {

if ( $(this).next().css("display") == 'none' ) {

  $("div.content").hide();

  $(this).next().slideDown(250);

}

});

</script>

Effect Delay Trick

Effect Delay Trick

Here is a quick trick for getting an effect to delay without using setTimeout.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show-alert').click(function() {
$('<div class="quick-alert">Message Effect Delay Trick</div>')
.insertAfter( $(this) )
.fadeIn('slow')
.animate({opacity: 1.0}, 3000)
.fadeOut('slow', function() {
$(this).remove();
});
});
});
</script>
<style>
.quick-alert {
width: 50%;
margin: 1em 0;
padding: .5em;
background: #ffa;
border: 1px solid #a00;
color: #a00;
font-weight: bold;
display: none;
}
</style>
<input type="submit" value="Show Alert" id="show-alert">

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/Effect_Delay.html

PHP Parse_URL()

PHP Parse_URL()

$the_permalink = "http://r-ednalan.blogspot.com/php-parse_url";
$the_domain = parse_url($the_permalink, PHP_URL_HOST);
echo $the_domain;

Cakephp Custom group by pagination and a calculated field

Cakephp Custom group by pagination and a calculated field

Example of how to use the CakePHP paginator helper with the group by condition. this is from the original article from http://wiltonsoftware.com/posts/view/custom-group-by-pagination-and-a-calculated-field




In the Controller

<?
var $helpers = array('Paginator');
var $paginator = array('limit' => 20);

function admin_index($filter=null) {
 $conditions = array();
 $this->Comment->recursive = 0;
 if ($filter == 'count') {
     $conditions = array('Comment.status = 0');
     $this->paginate['Comment'] = array(
         'fields' => array(
             'Comment.id', 'Comment.ip', 'Count(Comment.ip) as Count'
         ),
         'conditions' => array(
             'Comment.status = 0'
         ),
         'group' => array(
             'Comment.ip'
         ),
         'order' => array(
             'Count' => 'desc'
         )
     );
     $data = $this->paginate('Comment', $conditions);
  
 } else {
     if ($filter == 'spam') {
         $conditions = array('Comment.status = 0');
     } else {
         $conditions = array('Comment.status > 0');
     }
     $this->paginate['Comment'] = array(
         'order' => array(
             'Comment.id' => 'desc'
         )
     );
 }
 $data = $this->paginate('Comment', $conditions);
}
?>

Model

function paginateCount($conditions = null, $recursive = 0, $extra = array()) {
  $parameters = compact('conditions');
  $this->recursive = $recursive;
  $count = $this->find('count', array_merge($parameters, $extra));
  if (isset($extra['group'])) {
      $count = $this->getAffectedRows();
  }
  return $count;
}

View

$paginator->options(array('url' => $this->passedArgs));

An AJAX Based Shopping Cart with PHP, CSS & jQuery

An AJAX Based Shopping Cart with PHP, CSS & jQuery

AJAX-driven shopping cart. All the products are going to be stored in a MySQL database, with PHP showing and processing the data. jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process.

Visit Site

http://tutorialzine.com/2009/09/shopping-cart-php-jquery/

Demo

http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php

PHP Mysql jquery Delete Table Row With Confirmation like twitter message

PHP Mysql jquery Delete Table Row With Confirmation like twitter message

I am going to demonstrate a php mysql jqeury method I use to delete a row from mysql and then remove the html row with some nice jquery effects




dbconfig.php

//dbconfig.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "testdeleterowjquerymysql";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

index.php

//index.php
<style type="text/css">
.top_row {
background-color: #CCCCCC;
color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9CF;
}
.manage_row {
background-color: #eeeeee;
color: #333;
text-align: center;
}
.message {
font-size: 24px;
padding: 5px;
text-align: center;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #F00;
background-color: #64943F;
display:none;
}
.manage_row td {
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #CCC;
border-left-color: #CCC;
}
.top_row th {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
font-weight: bolder;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" >
function deleterow(id){
if (confirm('Are you sure want to delete?')) {
 $.post('deleterow.php', {id: +id, ajax: 'true' },
 function(){
  $("#row_"+id).fadeOut("slow");
  $(".message").fadeIn("slow");
  $(".message").delay(2000).fadeOut(1000);
 });
}
}
</script>
<div class="message">Row Deleted Successfully</div>

<table id="main_table" align="center" border="0" cellpadding="0" cellspacing="0" width="438" height="96">
 <tbody>
 <tr class="top_row">
 <th scope="col" width="88">ID</th>
 <th scope="col" width="293">Name</th>
 <th scope="col" width="57">Delete</th>
  </tr>
</tbody>
<?php
include("dbconfig.php");
 $query4="select * from tblname order by id desc";
 $result4 = mysql_query($query4);
$n = 0;
while($row=mysql_fetch_array($result4))
{
 $n++;
 $id=$row["Id"];
 $name=$row["name"];
?>
<tbody>
<tr class="manage_row" id="row_<? echo $id; ?>">
  <td><? echo $n; ?></td>
  <td><? echo $name; ?></td>
  <td id="delete">
 <a href="#" onclick="deleterow(<? echo $id; ?>)">Delete</a>
</td>
</tr>
</tbody>
<? } ?>
</table>

deleterow.php

//deleterow.php
<?php
include("dbconfig.php");
$id=$_POST['id'];
$sql = "delete from lito_user where Id='$id'";
mysql_query( $sql);
?>

xampp phpmyadmin - No activity within 1800 seconds; please log in again

xampp phpmyadmin - No activity within 1800 seconds; please log in again

1. Find xampp\phpMyAdmin\config.inc.php
2. find
/* Authentication type and info */
3. change auth_type cookie to config
$cfg['Servers'][$i]['auth_type'] = 'config'; // Authentication method (config, http or cookie based)

How to Log-in Multiple Users in SKYPE version 4.0

How to Log-in Multiple Users in SKYPE version 4.0

1. Create a new shortcut for starting a new Skype instance with a different Skype user account.
2. Open Windows Explorer and go to "C:\Program Files\Skype\Phone."
3. Right click on the Skype icon and select "Create Shortcut."
4. Right click on the new shortcut and select "Properties."
5. Append " /secondary" to "Target" to become '"C:\Program Files\Skype\Phone\Skype.exe" /secondary.'
6. Click OK to save the change.
7. Log on to a new created Skype account.