article

Wednesday, August 17, 2011

jQuery Ajax PHP Delete Records Confirmation

jQuery Ajax PHP Delete Records Confirmation

Download

http://dl.dropbox.com/u/7106563/r-ednalan/Delete_Records_Confirmation.zip




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

<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>

CSS Code
<style>

#rounded-corner
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}
#rounded-corner td
{
padding: 8px;
background: #e8edff;
border-top: 1px solid #fff;
color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
background: #d0dafd;
}
</style>

index.php
<table id="rounded-corner" border="0">

<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q3">Q4</th>
<th scope="col" class="rounded-q4" width="15px;"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em></em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<?php

include("dbconfig.php");
$query4="select * from table order by id desc";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
$message=stripslashes($row["company"]);
?>
<tr class="record">
<td><?php echo $message; ?></td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
<td><a href="#" id="<?php echo $row["id"]; ?>" class="delbutton"><img src="publish_x.png"/></a></td>
</tr>
<?php
}
?>
</tbody>
</table>

delete.php
<?php

include("dbconfig.php");
if($_GET['id'])
{
$id=$_GET['id'];
$sql = "delete from messages where id='$id'";
mysql_query( $sql);
}
?>

dbconfig.php
<?php

$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "test";

$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");
?>

Monday, August 15, 2011

Create a Sliding tab contents tab jquery

Create a Sliding tab contents tab jquery

Demo

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








   <style>

*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
text-align:center;
height:100%;
margin-left:20px;
margin-top:20px;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:2px solid #fff;
background-color:#FFFFFF;
width:520px;
overflow:hidden;
}
#slides{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.slides_contents{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#EBEBEB;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#FBFBFB;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form fieldset{
border:none;
padding-bottom:20px;
}
#slides form legend{
text-align:left;
background-color:#EBEBEB;
color:#2D3B40;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:100%;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #949494;
border-top:1px solid #828282;
}
#slides form p{
float:left;
clear:both;
margin:5px 0px;
border:0px solid #fff;
width:100%;
}
#slides form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#slides form input{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#slides form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#slides form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 5px 20px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:18px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#969B9F;
}
#slides form button:hover {
background:#7F9DB9;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form .submitbutton {
width:650px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fieldsetCount = $('#formElem').children().length; //number of fieldsets
var current = 1; //current position of fieldset
var slidesWidth = 0; //widths of each one of the fieldsets
var widths = new Array();
$('#slides .slides_contents').each(function(i){
var $slides_contents = $(this);
widths[i] = slidesWidth;
slidesWidth += $slides_contents.width();
});
$('#slides').width(slidesWidth);
$('#formElem').children(':first').find(':input:first').focus(); //to avoid problems in IE, focus the first input of the form
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#slides').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
});
e.preventDefault();
});
});
</script>
<div id="content">
<div id="wrapper">
<div id="slides">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="slides_contents">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" />
</p>
<p>
<label for="name">Name</label>
<input id="name" name="name" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" placeholder="ednalan@yahoo.com" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
<p class="submitbutton">
<button type="submit">Submit</button>
</p>
</fieldset>
<fieldset class="slides_contents">
<legend>Profile</legend>
<div style="text-align:left;width:500px;margin:10px 10px 10px 10px;">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum.
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</fieldset>
</form>
</div>
<div id="navigation" >
<ul>
<li class="selected">
<a href="#">Account</a>
</li>
<li>
<a href="#">Profile</a>
</li>
</ul>
</div>
</div>
</div>

Saturday, August 13, 2011

Sample JavaScript Onload Functions Sample using google map code

Sample JavaScript Onload Functions Sample using google map code







<html>

<head>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
window.onload=initialize; //JavaScript Onload Functions
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
var address = '1600 Amphitheatre Pky, Mountain View, CA';
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

Saturday, August 6, 2011

Placeholder Text using HTML5

Placeholder Text using HTML5

Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused




<style>
body {
font: 90%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 700px;
margin: 30px auto;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F60;
}
p {
margin: 0 0 2em;
}
h1, h2, h3 {
line-height: 110%;
}
h1 {
font: bold 80% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 2px;
color: #999;
}
h2 {
margin: 0 0 8px;
}
h3 {
border-top: solid 2px #ccc;
margin: 40px 0 15px;
padding-top: 10px;
}
form p {
margin: 0 0 15px;
}
input,
textarea,
input[type=search] {
background: #f4f4f4;
border: solid 1px #a3a3a3;
padding: 5px 10px;
font: 15px "Times New Roman", Times, serif;
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-appearance: none; /* reset webkit search style */
}
/* input:focus */
input[type=text]:focus,
textarea:focus,
input[type=search]:focus {
background: #fff;
border-color: #333;
outline: none; /* remove outline */
}
/* field width */
input[type=text], input[type="search"] {
width: 200px;
}
textarea {
width: 400px;
height: 250px;
}
/* placeholder */
.placeholder {
color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
color: #bbb;
}
</style>

</head>

<form class="form" method="post">
<p><input type="text" placeholder="Your name please"></p>
<p><input type="text" placeholder="Enter your email"></p>
<p><textarea placeholder="Write your comments here"></textarea></p>
<p><input type="submit" name="submit" value="Submit"></p>
</form>

Related Post