Boolean Island !

Entries categorized as ‘JavaScript’

Automatically Update

May 14, 2008 · 1 Comment

Today one of my friend ask me how can he load the data automatically after a few secs . Let me make it clear.He want to do something which will help the user.The user dont have to refresh his/her page.It’ll refresh and update it self.

For this you need AJAX.Here is a little example of this.I used 3 files here.
#1 index.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Ajax Auto Update Example</title>
<script src=”AJAX.JS”></script>
<style type=”text/css”>
<!–
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
–>
</style>
</head>

<body onload=”show()”>
<table width=”561″ height=”174″ border=”0″ align=”center” cellpadding=”3″ cellspacing=”2″>
<tr>
<td height=”34″><div align=”center”><span class=”style1″>The Space Below will be update auto. </span></div></td>
</tr>
<tr>
<td><div id=”auto”></div></td>
</tr>
</table>
</body>
</html>

#2 ajax.js

var xmlHttp

function show()
{

//Show Loading Massage
document.getElementById(”auto”).innerHTML=”<h3 style=\”color:#FF0000\”>Loading……</h3>”;

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (”Your browser does not support AJAX!”);
return;
}
var url=”show.php”;
xmlHttp.onreadystatechange=stateChanged;

//Get the value from show.php page.I use GET method here.You can use what u want GET/POST

xmlHttp.open(”GET”,url,true);
xmlHttp.send(null);

//This page will refresh it self after 2 sec.If u chage the value ‘2000′ the time will be changed .
setTimeout(’show()’,2000);

}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
//Below line show the server responce on the index.php page.
document.getElementById(”auto”).innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}

#3 show.php

<?php

//If u use data from the database use necessery code here.I just show the current BD time in the page.

$am=’AM’;

$time = localtime();

$hour = $time[2]+6;

if($hour>=12)

$am=’PM’;

$hour%=12;

echo “<h3 style=\”color:#009900\”>Now Time is–$hour:$time[1]:$time[0]-$am</h3>”;

?>

Note : You can make ur site like www.gopsop.com and www.crickinfo.com.

Categories: AJAX · JavaScript · Web Developing · programming
Tagged: ,

popup menu by CSS & JS

May 6, 2008 · 3 Comments

popup menus are very popular now a days.There are many software which helps us to create popup menus.Those software use a JavaScript file.But the main problem is its really tough to edit that JS file without that software.And one software doesn’t support another software’s files.So i was looking for some simple script which will helps me understand and what can i change when ever i want.Then i found a nice solution its based on CSS and javaScript.It is using visibility property.Here is an example.

<div id="MENU"
  style="position:relative; width:80px; text-align:center;
  background-color:#DC6000; color:#FFFFFF; cursor:hand"
    onmouseover="document.getElementById('ITEMS').style.visibility='visible'"
    onmouseout="document.getElementById('ITEMS').style.visibility='hidden'">
      Menu
</div>

<div id="ITEMS"
style="position:relative; visibility:hidden; width:80px; text-align:center;
background-color:#DEB887; color:#FFFFFF"
  onmouseover="this.style.visibility='visible'"
  onmouseout="this.style.visibility='hidden'">

  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 1
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 2
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 3
  </div>

</div>

<p>Other page content...</p>

Just copy and paste the code inside a HTML file and watch :).

Categories: CSS · JavaScript · Web Developing
Tagged: , , ,

Sliding Page

April 21, 2008 · 1 Comment

Few days ago I was working on JobberBase so I had to visit www.JobberBase.com .Its a nice site .And the presentation is just awesome. One thing make me surprised that is the sliding page. U can see the demo here. Its using jquery.

Categories: Beautification · JavaScript · Web Developing
Tagged: , ,

মুক্ত জবস

April 5, 2008 · 14 Comments

শেষ পর্যন্ত জবার বেজ এর লোকালাইজেশনে সফল হলাম :) । এই প্রজেক্টটা অনেক আগে শুরু করে ছিলাম কিন্তু শেষ করতে পারছিলাম না । এটা আমার প্রথম বাংলা প্রজেক্ট ছিল । অনেক কিছুই নতুন শিখলাম । অমি ও হাসিন ভাইকে আগেই ধণ্যবাদ জানিয়ে ছিলাম এই প্রজেক্টটা আমাকে দেওয়ার জন্য । প্রথমে মনে হয়েছিল যে খুব একটা কঠীন হবে না , আসলেও কঠীন না কিন্তু তারপর ও শেষ করতে পারছিলাম না । জবার বেজ এর ডেভেলপেরকে জানালাম লাভ হলো না । সে বলে সব ঠিক আছে কিন্তু আমার কাছে ঠিকমত কাজ করছিল না । তারপর তুহিন ভইকে জানালাম সমস্যার কথা । উনি আমাকে মোরশেদ ভাই এর সাথে কথা বলতে বললেন , এবং সমস্যার সমাধান হলো । সমস্যাটা ছিল ডাটাবেজে :( । শুধু মাত্র collation type utf8_general_ci করাতে ঝামেলা মিটে গেল :) । গতকাল রাতে জবারবেজ বাংলায় মুক্ত জবস নামে হোসটিং করা হয়েছে । খুব তাড়াতাড়িই ওটা শুরু হবে ।

Categories: ACSE · JavaScript · Linux · PHP · Web Developing · mysql · programming
Tagged: , , ,

Joomla ! module for Date & Day

January 17, 2008 · 3 Comments

Today i develop my first Joomla ! module . Here is  the link of that module. This module show todays date & day in Joomla !.You can place this any where of your Joomla ! site.This module is developed by JavaScript.

Categories: JavaScript · Joomla ! · PHP · Web Developing · programming
Tagged: , , , ,

Clock By JavaScript

September 24, 2007 · No Comments

Hi all
Here is a clock code for ur site by JavaScript.Just copy and past it in ur web page where you want.
<SCRIPT LANGUAGE=”JavaScript”>

<!– Begin
function setToday() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getYear();
if (year < 100) { year += 1900; }
else { year += 2000; }
this.focusDay = day;
document.calControl.month.selectedIndex = month;
document.calControl.year.value = year;
displayCalendar(month, year);
}
function isFourDigitYear(year) {
if (year.length != 4) {
alert (”Sorry, the year must be four-digits in length.”);
document.calControl.year.select();
document.calControl.year.focus();
} else { return true; }
}
function selectDate() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
displayCalendar(month, year);
}
}

function setPreviousYear() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
year–;
document.calControl.year.value = year;
displayCalendar(month, year);
}
}
function setPreviousMonth() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
if (month == 0) {
month = 11;
if (year > 1000) {
year–;
document.calControl.year.value = year;
}
} else { month–; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
}
}
function setNextMonth() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
if (month == 11) {
month = 0;
year++;
document.calControl.year.value = year;
} else { month++; }
document.calControl.month.selectedIndex = month;
displayCalendar(month, year);
}
}
function setNextYear() {
var year = document.calControl.year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.calControl.month.selectedIndex;
year++;
document.calControl.year.value = year;
displayCalendar(month, year);
}
}
function displayCalendar(month, year) {
month = parseInt(month);
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month+1,year);
var firstOfMonth = new Date (year, month, 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
document.calButtons.calPage.value = ” Su Mo Tu We Th Fr Sa”;
document.calButtons.calPage.value += “\n ——————–”;
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += “\n “;
document.calButtons.calPage.value += ” “;
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += “\n “;
if (i-startingPos+1 < 10)
document.calButtons.calPage.value += “0″;
document.calButtons.calPage.value += i-startingPos+1;
document.calButtons.calPage.value += ” “;
}
for (i=days; i<42; i++) {
if ( i%7 == 0 ) document.calButtons.calPage.value += “\n “;
document.calButtons.calPage.value += ” “;
}
document.calControl.Go.focus();
}
function getDaysInMonth(month,year) {
var days;
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
else if (month==4 || month==6 || month==9 || month==11) days=30;
else if (month==2) {
if (isLeapYear(year)) { days=29; }
else { days=28; }
}
return (days);
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
return (true);
} else { return (false); }
}
// End –>
</SCRIPT>

<!– Add the onLoad event handler to the BODY tag –>

<BODY onLoad=”setToday()”>

<CENTER>
<H2>Select-A-Month</H2>
<FORM NAME=”calControl” onSubmit=”return false;”>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR><TD COLSPAN=7>
<CENTER>
<SELECT NAME=”month” onChange=”selectDate()”>
<OPTION>January
<OPTION>February
<OPTION>March
<OPTION>April
<OPTION>May
<OPTION>June
<OPTION>July

<OPTION>August
<OPTION>September
<OPTION>October
<OPTION>November
<OPTION>December
</SELECT>
<INPUT NAME=”year” TYPE=TEXT SIZE=4 MAXLENGTH=4>
<INPUT TYPE=”button” NAME=”Go” value=”Build!” onClick=”selectDate()”>
</CENTER>
</TD>
</TR>
</FORM>
<FORM NAME=”calButtons”>
<TR><TD align=”center”><textarea FONT=”Courier” NAME=”calPage” WRAP=no ROWS=8 COLS=22></textarea></TD><TR><TD><CENTER>
<INPUT TYPE=BUTTON NAME=”previousYear” VALUE=” << ” onClick=”setPreviousYear()”>
<INPUT TYPE=BUTTON NAME=”previousYear” VALUE=” < ” onClick=”setPreviousMonth()”>
<INPUT TYPE=BUTTON NAME=”previousYear” VALUE=”Today” onClick=”setToday()”>
<INPUT TYPE=BUTTON NAME=”previousYear” VALUE=” > ” onClick=”setNextMonth()”>
<INPUT TYPE=BUTTON NAME=”previousYear” VALUE=” >> ” onClick=”setNextYear()”>
</CENTER></TD></TR>
</TABLE></FORM></FONT>

Categories: JavaScript · Web Developing
Tagged: ,