<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();
});
article
Tuesday, June 28, 2011
IE 5 and 6 png transparent using javascript
IE 5 and 6 png transparent using javascript
Tuesday, June 21, 2011
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>
Saturday, June 18, 2011
CSS Image button
CSS Image button
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/css_image_button.html
<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
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
Friday, June 3, 2011
CakePHP GROUP BY
Saturday, May 28, 2011
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.
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>
Sunday, May 22, 2011
Effect Delay Trick
Effect Delay Trick
Here is a quick trick for getting an effect to delay without using setTimeout.
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/Effect_Delay.html
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
Tuesday, May 17, 2011
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;
Monday, May 16, 2011
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
Model
View
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));
Sunday, May 15, 2011
An AJAX Based Shopping Cart with PHP, CSS & jQuery
An AJAX Based Shopping Cart with PHP, CSS & jQuery
http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php
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/
DemoVisit Site
http://tutorialzine.com/2009/09/shopping-cart-php-jquery/
http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php
Friday, May 13, 2011
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
index.php
deleterow.php
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);
?>
Posted by
ednalan
at
7:15 PM
.
Under
web-development (ajax),
web-development (jquery),
web-development (PHP-MYSQL)
.
Tuesday, May 10, 2011
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)
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.
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.
Thursday, April 28, 2011
Refresh a page in jQuery?
Refresh a page in jQuery?
<html>
<head>
<title>Refresh a page in jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="RefreshPage">Refresh Page in jQuery</a>
<script type="text/javascript">
$('#RefreshPage').click(function() {
location.reload();
});
</script>
</body>
</html>
Thursday, April 21, 2011
Joomla - add extra fields in joomla registration
Joomla - add extra fields in joomla registration
LIST OF FILES NEED TO EDIT
1. libraries\joomla\database\table\user.php
add two extra fields like phone and website, let’s these fields as optional
put the follow lines before above lines or near line 116
var $params = null;
var $phone = null;
var $website = null;
var $address = null;
/**
* @param database A database connector object
*/
function __construct( &$db )
{
2. add alter your user table
ALTER TABLE jos_users ADD phone varchar(255) DEFAULT '' AFTER password;
ALTER TABLE jos_users ADD website varchar(255) DEFAULT '' AFTER phone;
3. Go to administrator\components\com_users\views\user\tmpl
open file form.php and put the following lines after line 132 … just add as new row in table
4. Goto administrator->site->User Manager
5. front end registration
components\com_user\views\register\tmpl\default.php for edit
Copy that default.php file from components\com_user\views\register\tmpl and now go to your current template folder. copy all the php files from components\com_user\views\register\tmpl to templates\{your custom template name here}\html\com_user\register
LIST OF FILES NEED TO EDIT
1. libraries\joomla\database\table\user.php
add two extra fields like phone and website, let’s these fields as optional
put the follow lines before above lines or near line 116
var $params = null;
var $phone = null;
var $website = null;
var $address = null;
/**
* @param database A database connector object
*/
function __construct( &$db )
{
2. add alter your user table
ALTER TABLE jos_users ADD phone varchar(255) DEFAULT '' AFTER password;
ALTER TABLE jos_users ADD website varchar(255) DEFAULT '' AFTER phone;
3. Go to administrator\components\com_users\views\user\tmpl
open file form.php and put the following lines after line 132 … just add as new row in table
<tr>
<td width="150" class="key">
<label for="phone">
<?php echo JText::_( 'Phone' ); ?>
</label>
</td>
<td>
<input type="text" name="phone" id="phone" class="inputbox" size="40" value="<?php echo $this->user->get('phone'); ?>" />
</td>
</tr>
<tr><td width="150" class="key">
<label for="website">
<?php echo JText::_( 'Website' ); ?>
</label>
</td>
<td>
<input type="text" name="website" id="website" class="inputbox" size="40" value="<?php echo $this->user->get('website'); ?>" />
</td>
</tr>
4. Goto administrator->site->User Manager
5. front end registration
components\com_user\views\register\tmpl\default.php for edit
<tr>
<td height="40">
<label id="phonemsg" for="phone">
<?php echo JText::_( 'Phone' ); ?>:
</label>
</td>
<td>
<input type="text" name="phone" id="phone" size="40" value="<?php echo $this->escape($this->user->get( 'phone' ));?>" class="inputbox" maxlength="50" /> *
</td>
</tr>
<tr>
<td height="40">
<label id="websitemsg" for="website">
<?php echo JText::_( 'Website' ); ?>:
</label>
</td>
<td>
<input type="text" name="website" id="website" size="40" value="<?php echo $this->escape($this->user->get( 'website' ));?>" class="inputbox" maxlength="50" /> *
</td>
</tr>
Copy that default.php file from components\com_user\views\register\tmpl and now go to your current template folder. copy all the php files from components\com_user\views\register\tmpl to templates\{your custom template name here}\html\com_user\register
Wednesday, April 13, 2011
Jquery Ajax Requests submit loading Image
Jquery Ajax Requests submit loading Image
show a loading image when an AJAX request
show a loading image when an AJAX request
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#loading')
.hide()
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
$('#submit').click(function() {
$('.test_content').load('load_content.php');
return false;
});
});
</script>
<h4>Jquery Ajax Requests submit loading Image </h4>
<div class='test_content'></div>
<p><a id="submit" href="#">Submit</a></p>
<div id="loading">
<img src="ajax-loader.gif" />
</div>
//load_content.php
<?php
sleep(4);
echo 'This content was loaded from a PHP script.
';
?>
Thursday, March 31, 2011
CSS Login Form Design
CSS Login Form Design
A sample of CSS form login
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html
A sample of CSS form login
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html
<style type="text/css">
body{background-color:#fff;margin: 40px;font-family:Arial, Lucida Grande, Verdana, Sans-serif;font-size:12px;color:#000;}
#content {margin: 0 auto;width: 350px;border:#ccc 1px solid;background-color:#fff;padding:20px 20px 12px 20px;-moz-border-radius:7px; -webkit-border-radius:7px;}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:0 0 4px 0;}
p{font-size: 20px;color: #dedede;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;}
.ptour_crtbtn{border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
</style>
<div id="content">
<h1>Login Form</h1>
<form action="" method="POST">
<p><label style="display: block;">Email:</label><input class="text" type="text" name="username" /></p>
<p><label style="display: block;">Password:</label><input class="text" type="password" name="password" /></p>
<p><button class="ptour_crtbtn" name="login" type="submit">Login</button></p>
</form>
<p><a href="#">Forgot password?</a></p>
</div>
Friday, March 25, 2011
How to: Add a Share on facebook link to your WordPress blog
Thursday, March 24, 2011
Font preview using Google font API
Font preview using Google font API
A sample of google font api font name Tangerine
Sample
Visit the Google Font Directory
A sample of google font api font name Tangerine
Sample
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<h1>http://r-ednalan.blogspot.com/</h1>
</body>
Visit the Google Font Directory
FORM Validators for web developers
1. Live Validation form
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful.
Example Demo
http://livevalidation.com/examples
2. MooTools FormCheck
FormCheck is a class that allows you to perform different tests on form to validate them before submission.
Demo
http://mootools.floor.ch/en/labs/
3. ProtoForm
ProtoForm is an unltra lightweight, unobtrusive cross-browser and very easy to customize form validation + submit with Ajax based on prototype.js framework.
Demo
http://cssrevolt.com/upload/files/protoform/
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful.
Example Demo
http://livevalidation.com/examples
2. MooTools FormCheck
FormCheck is a class that allows you to perform different tests on form to validate them before submission.
Demo
http://mootools.floor.ch/en/labs/
3. ProtoForm
ProtoForm is an unltra lightweight, unobtrusive cross-browser and very easy to customize form validation + submit with Ajax based on prototype.js framework.
Demo
http://cssrevolt.com/upload/files/protoform/
Subscribe to:
Posts (Atom)