article

Monday, February 28, 2011

get the ID of the last insert post in WordPress

get the ID of the last insert post in WordPress

<div id="div1">
<?php
//insert new post
// Create post object
$my_post = array();
$my_post['post_title'] = 'Hello world';
$my_post['post_content'] = 'This is a sample post';
$my_post['post_status'] = 'published';
$my_post['post_author'] = 7; //the id of the author
$my_post['post_category'] = array(10,12); //the id's of the categories

// Insert the post into the database
$post_id = wp_insert_post( $my_post ); //store new post id into $post_id

//now add tags to new post
$tags = array('html', 'css', 'javascript');
wp_set_object_terms( $post_id, $tags, 'post_tag', true );

?>
</div>

Saturday, February 19, 2011

Write Better CSS

Write Better CSS

1. Single-line vs. Multi-line

multiple lines, like this:
.title {
font-size:14px;
line-height:20px;
color:blue;
}

Or on one or single line, like this:
.title {font-size:14px;line-height:20px;color:blue;}

2. Section Your File
comment above each section is all you need:
/*** Header ***/

3. Start With a Reset
* {margin:0;padding:0;}

4. Use Shorthand CSS
Shorthand CSS is combining a few related rules into one.
Example
.example {
background-color: blue;
background-image: url(images/blue-bg.jpg);
background-position: 100% 0;
background-repeat: no-repeat;
}

Shorthand
.example {background: blue url(images/blue-bg.jpg) 100% 0 no-repeat;}

5. Multiple Classes on One Element
The reason to do this is that you can define generic CSS styles that can be applied to a number of elements.
<p class="info left">Some example text in your info paragraph.</p>

6. Positioning Header Elements
#header {position:relative;width:960px;height:120px;}


Wednesday, February 9, 2011

Simple AJAX with JQuery

Simple AJAX with JQuery





<script type="text/javascript">
function register(){ //when the button is pressed, this function will be executed.
$.ajax({
type: "POST", // AJAX function
url: "submit_data.php", //Method
data: "username=" + document.getElementById("username").value +
"&email=" + document.getElementById("email").value, // executed when the button is pressed.
success: function(html){
$("#response").html(html); //response html output echo
}
});

}
</script>

<form action="" method="post">
Simple AJAX with JQuery
<p>
<label for="name">Name:</label><br />
<input type="text" name="username" id="name" size="25" />
</p>
<p>
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" size="25" />
</p>
<p>
<input type="button" name="submit" id="submit" value="Subscribe" onclick="register()"/> //
</p>

</form>
<div id="response"></div> //The Response Div


submit_data.php
<?php
$db_host = 'localhost';
$db_user = 'user';
$db_pass = 'pass';
$db_name = 'db';
$Username = $_POST['username'];
$Email = $_POST['email'];
// DB
$connect = mysql_connect( $db_host, $db_user, $db_pass ) or die( mysql_error() );
$connection = $connect;
mysql_select_db( $db_name, $connect ) or die( mysql_error() );
// Inserting into DB
$qeuryInsert = mysql_query(" INSERT INTO `database` (`id`, `username`, `email`)
VALUES ( ``, `$Username`, `$Email`)
");
if ($qeuryInsert){
echo "You are now subscribed to our newsletter. Thank you!";
} else {
echo "Error!";
}

?>

Monday, February 7, 2011

Draw Charts with Google Visualization API.

Draw Charts with Google Visualization API.

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package. Draw Charts with Google Visualization API.
google.load('visualization', '1', {'packages':['piechart']});
// set API loaded.
google.setOnLoadCallback(drawChart);
// draws it.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Pesentage');
data.addRows(5);
data.setValue(0, 0, 'jQuery');
data.setValue(0, 1, 11);
data.setValue(2, 0, 'PHP');
data.setValue(2, 1,6);
data.setValue(3, 0, 'Java Script');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Mysql');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('2'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'r-ednalan'});
}
</script>
<div id='2' style="float:left"></div>

Submit Form with jQuery and Ajax.

Submit Form with jQuery and Ajax.
submitting HTML form values without refreshing page using jQuery and Ajax.






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password;

if(name=='' || username=='' || password=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "insert.php",
data: dataString,
success: function(){

$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();

}
});
}
return false;
});
});
</script>


<form method="post" name="form">
<input id="name" name="name" type="text" />
<input id="username" name="username" type="text" />
<input id="password" name="password" type="password" />

<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
<div id="display" align="left">

///---Insert.php
<?php
if($_POST)
{
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
/* mysql_query("SQL insert statement......."); */
}else { }

?>

Sunday, February 6, 2011

Generate RSS Feed with PHP

Generate RSS Feed with PHP
<?php
include('db.php');
$sql = "SELECT * FROM site_data ORDER BY id DESC LIMIT 20";
$query = mysql_query($sql) or die(mysql_error());

header("Content-type: text/xml");

echo "<?xml version='1.0' encoding='UTF-8'?>
<rss version='2.0'>
<channel>
<title>r-ednalan.blogspot.com | Programming Blog </title>
<link>http://r-ednalan.blogspot.com</link>
<description>Programming Blog </description>
<language>en-us</language>";

while($row = mysql_fetch_array($query))
{
$title=$row['title'];
$link=$row['link'];
$description=$row['description'];

echo "<item>
<title>$title</title>
<link>$link</link>
<description>$description</description>
";
}
echo "</channel></rss>";
?>

Accordion Menu

Accordion Menu script
The following are Accordion Menu examples with full source code to get you started:

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

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

Saturday, February 5, 2011

javascript Accept terms

javascript Accept terms
before submitting the form you must accept term and condition
<script>
var checkobj
function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}

function defaultagree(el){
if (!document.all&&!document.getElementById){
if (window.checkobj&&checkobj.checked)
return true
else{
alert("Please read/accept terms to submit form")
return false
}
}
}
document.forms.agreeform.agreecheck.checked=false
</script>
<form name="agreeform" onSubmit="return defaultagree(this)">
<input name="agreecheck" type="checkbox" onClick="agreesubmit(this)"><b>I agree to the above terms</b><br>
<input type="Submit" value="Submit!" disabled>
</form>

Demo

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

javascript Email Validation

javascript Email Validation

<script type="text/javascript">
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
function checkmail(e){
var returnval=emailfilter.test(e.value)
if (returnval==false){
alert("Please enter a valid email address.")
e.select()
}
return returnval
}
</script>

<form>
<input name="myemail" type="text" style="width: 270px"> <input type="submit" onClick="return checkmail(this.form.myemail)" value="Submit" />
</form>

Demo

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

Create Css Search Box

Create Css Search Box


<style>
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(searchbox.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
</style>
<div id="searchwrapper">
<form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="submit" class="searchbox_submit" value="" />
</form>
</div>

Friday, February 4, 2011

Useful CSS Tricks

Useful CSS Tricks

1. Prevent Firefox Scrollbar Jump
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
html{ overflow-y:scroll; }

2. Cross Browser Minimum Height
Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}


3. Highlight links that open in a new window
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}


4. Drop Caps Using CSS
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}


5. Cross Browser Opacity
CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


6. Vertical centering with line-height
If you are using fixed height container and need to vertically center the text, use the line-height property to do that perfectly.
line-height:30px;

4. Remove vertical textarea scrollbar in IE
IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick.
textarea{
overflow:auto;
}


5. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }

6. Capitalize Text
text-transform: capitalize;

7. Small Caps Text
font-variant:small-caps;

8. Highlight Text Input Fields
highlight the input field currently in focus. This trick does not work in IE though.
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}


9. Highlight Acronym and Abbr Tags
acronym, abbr{
border-bottom:1px dotted #333;
cursor:help;
}


10. Text Shadow Property in CSS3
The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.
text-shadow: 3px 3px 4px #999;
text-shadow: 0 1px 0 #FFFFFF;

11. z-index - content slider block cover over the drop-down menu
Adding z-index: 0; in the contentslider.css fixes it
#slider {
z-index: 0;
}

12. position:fixed
<style type="text/css">
span.followus{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
}
</style>
<div>
<span class="followus">
<a href=""><img src="images/folowus.jpg"/></a>
</span>
</div>

Simple Download Buttons (HTML & CSS)

Simple Download Buttons (HTML & CSS)

HTML and CSS version of Simple Web Buttons by Orman Clark.

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

http://www.vagrantradio.com/2011/01/simple-download-buttons-html-css.html

Demo

http://www.vagrantradio.com/demos/pp_buttons/

How to Create an AJAX File Uploader

How to Create an AJAX File Uploader
A Query’s versatility to allow multiple file uploads without a page refresh.

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

http://www.vagrantradio.com/2009/09/how-to-create-an-ajax-file-uploader.html

Demo

http://www.vagrantradio.com/demos/file_uploader/index.html

Parse XML with jQuery Ajax Sitemap

Parse XML with jQuery Ajax Sitemap
learn how to parse or process an XML document and display the data on a page in HTML.


<style type="text/css">
ol,ul{list-style:none;}
body {color:#333;font-family:Helvetica, Arial, sans-serif;Font-size:16px;}
#wrap {width:700px;margin:10px auto;}
#loading {display:none;}
#loading img {vertical-align:middle;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
alert ('Start loading from xml?');
$("#loading").show();
$.ajax({
type: "GET",
url: "sitemap.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('<li>' + '<a href="' + $(this).find("loc").text() + '">' + $(this).find("loc").text() + '</a>' + '</li>');
$("#loading").hide();
});
}
});
</script>
<div id="wrap">
<h1>Parse XML with jQuery Sitemap</h1>
<ul id="site_list">
<li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>


Download

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

Related Post