We can create Rotating Buttons in html using css.
Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<title>Rotating Button with CSS3 transition and transform</title>
<meta name="description" content="Css3creations" />
<meta name="keywords" content="css3 code snippets , css3 creations , css3 buttons , css3 effects" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="css3creations" />
<meta name="robots" content="all" />
<style>
span
{
width:100px;
float:left;
margin:50px 0 0 50px;
}
.button
{
background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
/*margin:50px;*/
cursor:pointer;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 2px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 2px rgba(0,0,0,0.5);
box-shadow:0 0 2px rgba(0,0,0,0.5);
text-shadow:0 0 5px rgba(255,255,255,0.5);
display:inline-block; /* It is important for the button to rotate*/
}
.clockwise:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.anticlockwise:hover
{
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.orange:hover
{
background:#FFB112;
font-size:30px;
color:#fff;
}
.green:hover
{
background:#6EB03B;
font-size:30px;
color:#fff;
}
.red:hover
{
background:#D03603;
font-size:30px;
color:#fff;
}
</style>
</head>
<body>
<div>
<span>
<a class="button clockwise orange">Rotation</a>
</span>
<span>
<a class="button anticlockwise red">noitatoR</a>
</span>
<span>
<a class="button clockwise green">Rotation</a>
</span>
</div>
</body>
</html>
Demo:
Dates in PHP: (Tomorrow, Yesterday, Today of a Given Date)
<?php
echo “<h4>Date Yesterday</h4>”;
$yesterday = date(“Y-m-d”, time()-86400);
echo $yesterday;
echo “<h4>Date Today</h4>”;
echo date(“Y-m-d”);
echo “<h4>Date Tomorrow</h4>”;
$tomorrow = date(“Y-m-d”, time()+86400);
echo $tomorrow;
echo “<hr>”;
echo “<h4>Previous Date from User-defined Date</h4>”;
$gdate = “2008-07-11″;
echo “(” . $gdate . ” supplied.) <br>”;
$dt = strtotime($gdate);
echo date(“Y-m-d”, $dt-86400);
echo “<h4>Next Date from User-defined Date</h4>”;
echo “(” . $gdate . ” supplied.) <br>”;
$dt = strtotime($gdate);
echo date(“Y-m-d”, $dt+86400);
// DAYS IN BETWEEN TWO DATES
function days_in_between($s, $e){
$d = array();
$s = strtotime($s);
$e = strtotime($e);
for($n=$s; $n<=$e; $n=$n+86400){
array_push($d, strftime(“%Y-%m-%d”, $n));
}
return $d;
}
?>
PHP: PAGINATION
include 'library/config.php';
include 'library/opendb.php';
// how many rows to show per page
$rowsPerPage = 20;
// by default we show first page
$pageNum = 1;
// if $_GET['page'] defined, use it as page number
if(isset($_GET['page']))
{
$pageNum = $_GET['page'];
}
// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;
$query = " SELECT val FROM randoms " .
" LIMIT $offset, $rowsPerPage";
$result = mysql_query($query) or die('Error, query failed');
// print the random numbers
while($row = mysql_fetch_array($result))
{
echo $row['val'] . '<br>';
}
// ... more code here
?>
Paging is implemented in MySQL using LIMIT that take two arguments. The first argument specifies the offset of the first row to return, the second specifies the maximum number of rows to return. The offset of the first row is 0 ( not 1 ).
When paging.php is called for the first time the value of $_GET['page'] is not set. This caused $pageNum value to remain 1 and the query is :
SELECT val FROM randoms LIMIT 0, 20
which returns the first 20 values from the table. But when paging.php is called like this http://www.php-mysql-tutorial.com/examples/paging/paging.php?page=4
the value of $pageNum becomes 4 and the query will be :
SELECT val FROM randoms LIMIT 60, 20
this query returns rows 60 to 79.
After showing the values we need to print the links to show any pages we like. But first we have to count the number of pages. This is achieved by dividing the number of total rows by the number of rows to show per page :
$maxPage = ceil($numrows/$rowsPerPage);
<?php
// ... the previous code
// how many rows we have in database
$query = "SELECT COUNT(val) AS numrows FROM randoms";
$result = mysql_query($query) or die('Error, query failed');
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$numrows = $row['numrows'];
// how many pages we have when using paging?
$maxPage = ceil($numrows/$rowsPerPage);
// print the link to access each page
$self = $_SERVER['PHP_SELF'];
$nav = '';
for($page = 1; $page <= $maxPage; $page++)
{
if ($page == $pageNum)
{
$nav .= " $page "; // no need to create a link to current page
}
else
{
$nav .= " <a href=\"$self?page=$page\">$page</a> ";
}
}
// ... still more code coming
?>
The mathematical function ceil() is used to round up the value of $numrows/$rowsPerPage.
In this case the value of total rows $numrows is 295 and $rowsPerPage is 20 so the result of the division is 14.75 and by using ceil() we get $maxPage = 15
Now that we know how many pages we have we make a loop to print the link. Each link will look something like this:
<a href="paging.php?page=5">5</a>
You see that we use $_SERVER['PHP_SELF'] instead of paging.php when creating the link to point to the paging file. This is done to avoid the trouble of modifying the code in case we want to change the filename.
We are almost complete. Just need to add a little code to create a 'Previous' and 'Next' link. With these links we can navigate to the previous and next page easily. And while we at it let's also create a 'First page' and 'Last page' link so we can jump straight to the first and last page when we want to.
<?php
// ... the previous code
// creating previous and next link
// plus the link to go straight to
// the first and last page
if ($pageNum > 1)
{
$page = $pageNum - 1;
$prev = " <a href=\"$self?page=$page\">[Prev]</a> ";
$first = " <a href=\"$self?page=1\">[First Page]</a> ";
}
else
{
$prev = ' '; // we're on page one, don't print previous link
$first = ' '; // nor the first page link
}
if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = " <a href=\"$self?page=$page\">[Next]</a> ";
$last = " <a href=\"$self?page=$maxPage\">[Last Page]</a> ";
}
else
{
$next = ' '; // we're on the last page, don't print next link
$last = ' '; // nor the last page link
}
// print the navigation link
echo $first . $prev . $nav . $next . $last;
// and close the database connection
include '../library/closedb.php';
// ... and we're done!
?>
-ahmedabad-webs.jpg)
Posts
