চন্দ্রদীপ: 2013

সোমবার, ১৭ জুন, ২০১৩

Jquery Calendar with php mysql

Jquery Calendar with php mysql

https://code.google.com/p/fullcalendar/source/browse/tags/1.2/examples/

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

<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>
</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>
</body>
</html>

বৃহস্পতিবার, ২ মে, ২০১৩

<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">
body {font-family:Arial;}
h2 {font-size:1.6em;}
.newsItem {
border:solid 1px red;
padding:10px;
}
.newsTeaser{
border:solid 5px green;
padding:10px;
}

.collapsible{
display:none;
border:solid 5px blue;
padding:10px;

}
.more {cursor:pointer;}
</style>
<script>
$(document).ready(function() {
$(".more").click(function() {
$(".collapsible").hide();
$(this).parent().parent().find(".collapsible").show();
});
});
</script>

</head>
<body>
<?php
for($i=1;$i<=3;$i++){
$demo='

<div>
<h2>Title</h2>
<div id="newsTeaser">
<button class="btn more">more</button>
</div>
<div style="clear:both;"></div>
<div class="btn collapsible" style="display:none;">
<table>
<p>Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...</p>
<p class="less">less</p>
</table>
</div>
</div>

';
echo $demo;
}
?>
</body>
</html>

শনিবার, ২৭ এপ্রিল, ২০১৩

Jquery TAB

In this tutorial you can make more page by jquery tab.

<!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" lang="en">
<head>
<title>Test</title>

<style type="text/css">
ul.ul_requests { text-decoration:none;}
ul.ul_requests li {display:inline; margin-right:20px;}
ul.ul_requests li a { color:Green; text-decoration:none;}
ul.ul_requests li a:hover { color:red; text-decoration:none;}

html ul.ul_requests li.active, html ul.ul_requests li.active a:hover {
background: red;
border:none;
color:white;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
//Hide all content
$(".tab_content_bid").hide();
//Activate first tab
$("ul.ul_requests li:first").addClass("active").show();
//Show first tab content
$(".tab_content_bid:first").show();

//On Click Event
$("ul.ul_requests li").click(function() {
//Remove any "active" class
$("ul.ul_requests li").removeClass("active");

//Add "active" class to selected tab
$(this).addClass("active");

//Hide all tab content
$(".tab_content_bid").hide();

//Find the rel attribute value to identify the active tab + content
var activeTab = $(this).find("a").attr("href");

//Fade in the active content
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>
<body>
<ul class="ul_requests">
<li><a href="#tabrequesta">Cover Letter</a></li>
<li><a href="#tabrequestb">Attachment</a></li>
</ul>
<div class="tab_container_request">
<div id="tabrequesta" class="tab_content_bid" style="margin-top:0px; padding:0px;">
<p>This is a first Tab
</div>
<div style="clear:both"></div>

<div id="tabrequestb" class="tab_content_bid">
<h2>About</h2>
<p>This is a about page</p>
</div>
</div>
</body>
</html>