article
Sunday, March 6, 2011
Get Active/ Inactive/ Current tabs in Navigation Bar using PHP and jQuery
Get Active/ Inactive/ Current tabs in Navigation Bar using PHP and jQuery
php Code
Step 1: Get current page URL using PHP
$phpSelf = $_SERVER['REQUEST_URI'];
jQuery Code
Step 2: Check whether URL is similar to navigation bar button url, if they are similar we give it as the current active page,
< script type="text/javascript" >
$(document).ready(function(){
var root_url = "http://localhost"; var phpSelf = root_url+"<?php echo $phpSelf;?>"; $("#navigation li").each(function() {
var link = $(this).children("a").attr("href"); if(phpSelf == link){ $(this).addClass("active"); } }); }); < /script >
Change,
active to your active css class
http://localhost to website root directory
php Code
Step 1: Get current page URL using PHP
$phpSelf = $_SERVER['REQUEST_URI'];
jQuery Code
Step 2: Check whether URL is similar to navigation bar button url, if they are similar we give it as the current active page,
< script type="text/javascript" >
$(document).ready(function(){
var root_url = "http://localhost"; var phpSelf = root_url+"<?php echo $phpSelf;?>"; $("#navigation li").each(function() {
var link = $(this).children("a").attr("href"); if(phpSelf == link){ $(this).addClass("active"); } }); }); < /script >
Change,
active to your active css class
http://localhost to website root directory
Displaying Number of Comments in your WordPress Blog
Display Most Popular Posts in WordPress
Display Most Popular Posts in WordPress
Just change the 5 in line 3 to change the number of displayed popular posts
<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT
comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count
DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>
Just change the 5 in line 3 to change the number of displayed popular posts
Thursday, March 3, 2011
php how to get tomorow date
php how to get tomorow date
Use the mktime function to create a timestamp for tomorrow. To go one day in the future we simply add one to the day
mktime(hour, minute, second, month, day, year, daylight savings time)
Use the mktime function to create a timestamp for tomorrow. To go one day in the future we simply add one to the day
mktime(hour, minute, second, month, day, year, daylight savings time)
<?
$tomorrow = mktime(0, 0, 0, date("m"), date("d")+1, date("y"));
echo "Tomorrow is ".date("m/d/y", $tomorrow);
//out now date 03/03/11 tomorow is 03/04/11
?>
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>
<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;}
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>
<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.
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>";
?>
<?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
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
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
<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>
<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>
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/
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
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.
Download
http://dl.dropbox.com/u/3293191/r-ednalan/jquery_xml.zip
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
Monday, January 17, 2011
CSS - Create a Button with Hover
CSS - Create a Button with Hover
The CSS Code
a.button {
background: url(../images/button.png) no-repeat 0 0;
width: 186px;
height: 52px;
display: block;
text-indent: -9999px;
}
Hover State CSS
a.button:hover { background-position: 0 -52px; }
Click State CSS
a.button:active { background-position: 0 -104px; }
The CSS Code
a.button {
background: url(../images/button.png) no-repeat 0 0;
width: 186px;
height: 52px;
display: block;
text-indent: -9999px;
}
Hover State CSS
a.button:hover { background-position: 0 -52px; }
Click State CSS
a.button:active { background-position: 0 -104px; }
Tuesday, December 28, 2010
CSS3 Cross Browser Examples - rounded corners
CSS3 Cross Browser Examples - rounded corners
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
Subscribe to:
Posts (Atom)