শনিবার, ১৭ মে, ২০১৪

Take screenshot by canvas

We are going to take a screenshot from our current page by html5 canvas. So why we are waiting for. Let's start

1. At first we have to create our current page. Crate index.html page and copy the below stuff and paste it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
  <head>
    <title> Take screenshot by html5 canvas</title>
  </head>
  <body>
    <p>This is a simple page. which we'll take a screenshot from it.</p>
  </body>
</html>

2. You have to download html2canvas.js file and include it into your head section

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
  <head>
    <title> Take screenshot by html5 canvas</title>
    <script type="text/javascript" src="html2canvas.js"></script>
  </head>
  <body>
    <p>This is a simple page. which we'll take a screenshot from it.</p>
  </body>
</html>

3. and finally add the below script.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
  <head>
    <title> Take screenshot by html5 canvas</title>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript">
        html2canvas(document.body, {
            onrendered: function(canvas) {
var imgString = canvas.toDataURL("image/png");
                 window.open(imgString);
            }
        });
    </script>
  </head>
  <body>
    <p>This is a simple page. which we'll take a screenshot from it.</p>
  </body>
</html>


Now you are free to browse and enjoy.

শনিবার, ১৫ মার্চ, ২০১৪

php to adv


preserveWhiteSpace = false; $doc = $xmlDoc->createProcessingInstruction("ADF", '"VERSION="1.0"'); $xmlDoc->appendChild($doc); //Create adf element $adf = $xmlDoc->createElement('adf'); $adf = $xmlDoc->appendChild($adf); $customer = $xmlDoc->createElement('customer'); $customer = $xmlDoc->appendChild($customer); $contact = $xmlDoc->createElement('contact'); $contact = $xmlDoc->appendChild($contact); //Name part 1 $nameEle = $xmlDoc->createElement('name'); $nameattr = $xmlDoc->createAttribute('part'); $nameattrVal = $xmlDoc->createTextNode('first'); $nameattr->appendChild($nameattrVal); $nameEle->appendChild($nameattr); $name1 = $xmlDoc->appendChild($nameEle); $nameNode = $contact->appendChild($name1); $nameTextNode = $xmlDoc->createTextNode('Masum'); $nameNode->appendChild($nameTextNode); //Name part 2 $nameEle2 = $xmlDoc->createElement('name'); $name2attr = $xmlDoc->createAttribute('part'); $name2attrVal = $xmlDoc->createTextNode('last'); $name2attr->appendChild($name2attrVal); $nameEle2->appendChild($name2attr); $name2 = $xmlDoc->appendChild($nameEle2); $name2Node = $contact->appendChild($name2); $name2TextNode = $xmlDoc->createTextNode('Billah'); $name2Node->appendChild($name2TextNode); //Email $email = $xmlDoc->createElement('email'); $email = $xmlDoc->appendChild($email); $emailNode = $contact->appendChild($email); $emailTextNode = $xmlDoc->createTextNode('email@gmail.com'); $emailNode->appendChild($emailTextNode); //Phone $phone = $xmlDoc->createElement('phone'); $phone = $xmlDoc->appendChild($phone); $phoneNode = $contact->appendChild($phone); $phoneTextNode = $xmlDoc->createTextNode('019733'); $phoneNode->appendChild($phoneTextNode); //Contact & Customer $contactNode = $customer->appendChild($contact); $adfNode = $adf->appendChild($customer); //Output $xmlDoc->formatOutput = true; echo "". $xmlDoc->saveXML() .""; $xml->save("mybooks.xml") or die("Error"); ?>

বুধবার, ১২ জুন, ২০১৩

<body onload="initializeMaps()">
<div style="background-color:#FFFFFF;" >

<script>
function initializeMaps() {

map = new google.maps.Map(document.getElementById("googleMap"), {
center: new google.maps.LatLng(0,0),
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});


addMarker('.$map["Latitude"].','.$map["Longatude"].',"<div>'.$map["City"].'</br>Instractor: Place Function</div>","./theme/default/images/lightgreen.png");

center = bounds.getCenter();

map.fitBounds(bounds);
}

var center = null;
var map = null;
var currentPopup;

var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, info, icon_param) {
var icon = new google.maps.MarkerImage(
icon_param,
new google.maps.Size(40, 40),
new google.maps.Point(0, 0),
new google.maps.Point(16, 32)
);
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});

var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 1000
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
</script>

<div id="googleMap" style="width:90%;height:340px;"></div>
</div><!--end of map-->
</body>
<body onload="initializeMaps()">
<div style="background-color:#FFFFFF;" >

<script>
function initializeMaps() {

map = new google.maps.Map(document.getElementById("googleMap"), {
center: new google.maps.LatLng(0,0),
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});


addMarker('.$map["Latitude"].','.$map["Longatude"].',"<div>'.$map["City"].'</br>Instractor: Place Function</div>","./theme/default/images/lightgreen.png");

center = bounds.getCenter();

map.fitBounds(bounds);
}

var center = null;
var map = null;
var currentPopup;

var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, info, icon_param) {
var icon = new google.maps.MarkerImage(
icon_param,
new google.maps.Size(40, 40),
new google.maps.Point(0, 0),
new google.maps.Point(16, 32)
);
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});

var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 1000
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
</script>

<div id="googleMap" style="width:90%;height:340px;"></div>
</div><!--end of map-->
</body>

মঙ্গলবার, ২৮ মে, ২০১৩

<?php
class loginregistration{
public function login(){
?>
<div class="content">
<form method="post" action="">
Name:
<input type="text" name="" /><br/>
Password:
<input type="password" name=""/><br/>
</form>
</div>
<?php
}
public function registration(){
?>
<div class="content">
<form method="post" action="">
Name:
<input type="text" name="" /><br/>
Email:
<input type="text" name=""/><br/>
Contact:
<input type="text" name=""/><br/>
</form>
</div>
<?php
}
}

class page{
public function home(){
?>
<div class="content">
<p>This is a home page</p>
</div>
<?php
}
public function contact(){
?>
<div class="content">
<p>This is a contact page</p>
</div>
<?php
}
public function about(){
?>
<div class="content">
<p>This is a about page</p>
</div>
<?php
}
public function blog(){
?>
<div class="content">
<p>This is a Blog page</p>
</div>
<?php
}
}
class menues{
public function menu(){
?>
<ul>
<li><a href="t.php">Home</a></li>
<li><a href="t.php?page=contact">Contact</a></li>
<li><a href="t.php?page=about">About</a></li>
<li><a href="t.php?page=blog">Blog</a></li>
</ul>
<p><a href="t.php?page=login">Login</a></p>
<p><a href="t.php?page=registration">Registration</a></p>
<?php
}
}
?>
<html>
<head>
<style type="text/css">
.content {height:200px; background-color:E1E1E1;}
</style>
</head>
<body>
<?php
//For Menu
$menu = new menues;
$menu -> menu();
//For Login
$login = new loginregistration;
// if(isset($_GET['type'])=="login"){
// $login->login();
// }else if($_GET['type']=="registration"){
// $login->registration();
// }

//For Page
$page = new page;
if(!isset($_GET['page'])){
$page->home();
}else if($_GET['page']=="contact"){
$page->contact();
}else if($_GET['page']=="about"){
$page->about();
}else if($_GET['page']=="blog"){
$page->blog();
}else if($_GET['page']=="login"){
$login->login();
}else if($_GET['page']=="registration"){
$login->registration();
}else{
$page->home();
}
?>
</body>
</html>

মঙ্গলবার, ১৪ মে, ২০১৩

jquery backend form design by tab


<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
#ulid {
background-color:red;
}
#ulid li{
background-color:green;
color:white;
}
</style>
 <script>
$(document).ready(function() {
$(function() {
$( "#CreatingQuotation" ).tabs();
$( "#CreatingQuotation" ).tabs( "option", "disabled", [ 1, 2, 3 ] );
});

$("#clickid").click(function() {
if($("#inputfield").val() === ''){
$("#inputfield").css("border", "1px solid red");
}else{
$("#CreatingQuotation").tabs( "enable", 1 );
$("#CreatingQuotation").tabs( "option", "active", 1 );
document.getElementById("number").innerHTML=3;
$( "#formid" )[0].reset();
}
});
$("#preview").click(function() {
$("#CreatingQuotation").tabs( "option", "active", 0 );

});
});
</script>
 
</head>
<body>
<p id="number">1</p>
<div id="CreatingQuotation">
<ul id="ulid">
<li id="p1"><a href="#tabs1">Contact Info</a></li>
<li id="p2"><a href="#tabs2">Education</a></li>
<li id="p3"><a href="#tabs3">Professional Experience</a></li>
<li id="p4"><a href="#tabs4">Additional Skills</a></li>
</ul>

<div id="tabs1">
<form id="formid">
<input type="text" id="inputfield"/>
<input type="button" id="clickid" value="Test" />
</form>
</div>
<div id="tabs2">
Tabs 2
<p id="preview">Preview</p>
</div>
<div id="tabs3">
Tabs 3
</div>
<div id="tabs4">
Tabs 4
</div>
</div><!--end of tabs-->
</body>
</html>