Archive

Posts Tagged ‘Javascript’

raphael js

October 30, 2009 ppshein Leave a comment

I was speechless after surfing this website. All of his projects make me awe. We can refer or modify more useful projects by the way of learning his javascript projects.

Cheers,

http://raphaeljs.com/

 

Refresh parent window from child window with ShowModalDialog

October 28, 2009 ppshein Leave a comment

Yesterday, I was in problem. Because, my supervisor told me to refresh main window from child window when child window is closed. I thought, I could do it with window.opener.location.href. Actually, it doesn’t work because this new window is created by showmodaldialog of javascript. That’s why I was running through on it. Finally, I got it.

Coding for parent window (main.html)

<input type=”button” value=”Open” onclick=”javascript:window.showModalDialog(“child.html”, window)”>

 

Coding for child window (child.html)

 

<SCRIPT LANGUAGE=”JavaScript”>
<!–
function close(){

if (window.dialogArguments && dialogArguments.location) {
dialogArguments.location.href = ‘main.html’;
window.close();

}}// –>
</SCRIPT>

<input type=”button” value=”Close” onclick=”close()”>

Increase and decrease count by clicking with Javascript

October 22, 2009 ppshein Leave a comment

Today, my supervisor wants me to do simple javascript program. It seems, it’s kinda simple but complicated when I implement it. This program is, to increase or decrease count by clicking on button. I took 1 hour to implement this program. Voilà..!!

<form name=”myform”>
<input type=”Hidden” name=”init” value=”3″>
<input type=”Button” name=”actoin” value=”+” onclick=”increase()”>
<input type=”Button” name=”actoin” value=”-” onclick=”decrease()”>
</form>

<script>
<!–
var x = document.myform.init.value;

function increase()
{
x++;
document.getElementById(“mynumber”).innerHTML = x;
}

function decrease()
{
x–;
document.getElementById(“mynumber”).innerHTML = x;
}
–>
</script>

<p id=”mynumber”>3</p>

Dynamically create textarea with Javascript

June 18, 2009 ppshein Leave a comment

One of my projects need our clients to create textarea input dynamically with javascript. Seems it’s kinda simple but actually, create dynamically is simple but how to fetch data from these is kinda complicated. So, I reserach through and thinking of about that. Finally, I gotcha..!! Here you gooo…

Example.html

<form name=”mycomposeForm”>

<p id=”parah”></p>

<input type=”hidden” name=”mytextcount”>

<a href=”javascript:addInput()”>Add more input field(s)</a><br>
<a href=”javascript:deleteInput()”>Remove field(s)</a>

<form>

<script>

var arrInput = new Array(0);
var arrInputValue = new Array(0);
function addInput() {
arrInput.push(arrInput.length);
arrInputValue.push(“”);
display();
}
function display() {
document.getElementById(‘parah’).innerHTML=”";
for (intI=0;intI<arrInput.length;intI++) {
document.getElementById(‘parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}
function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}
function createInput(id,value) {
return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;
}
function deleteInput() {
if (arrInput.length > 0) {
arrInput.pop();
arrInputValue.pop();
}
display();
}

var arrInput = new Array(0);

var arrInputValue = new Array(0);

function addInput() {

arrInput.push(arrInput.length);

arrInputValue.push(“”);

display();

}

function display() {

document.getElementById(‘parah’).innerHTML=”";

for (intI=0;intI<arrInput.length;intI++) {

document.getElementById(‘parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);

}

}

function saveValue(intId,strValue) {

arrInputValue[intId]=strValue;

}

function createInput(id,value) {

return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

</script>

jQuery

April 6, 2009 ppshein Leave a comment

I start learning jQuery which is kinda popular among Web Developer, cos of which is easy to implement, less of coding and more secure than ordinary javascript. But, the style of programming, it’s always updated by programmers and you gotta catch which has been changed in it.

If you wanna learn more, http://docs.jquery.com.

jQuery

March 12, 2009 ppshein Leave a comment

I’m now learning jQuery, which is powerful toolkit for Developer. It’s easy to use, and don’t need to write long javascript statement in our coding. You can also learn about jQuery there.

jQuery

Want to make fake website for fun?

December 26, 2008 ppshein Leave a comment

In these days, I got free spare time to surf websites. That’s why I was surfing here and there. Oddly, I’ve found one website support us to make fake website for fun.

  • Open the website what you want to fake (ex: http://www.google.com)
  • copy this message, javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0 into address bar (URL) and press Enter.
  • So, you can see this website as in rich-text editor.
Categories: Informations, Javascript Tags: ,

Check valid Email with Javascript

November 14, 2008 ppshein Leave a comment

Sometimes, I need to write hotel reservation form with PHP. Honestly, it’s kinda simple and not rush at all. But our major challenge is spam bots, and think about how to prevent nobody can send spam message to our reservation form. For this case, we can prevent in only 2 way. 1) is Image Captcha and 2) is check referer page. For 2) solution is here.

$path_parts = pathinfo($_SERVER['HTTP_REFERER']);
if($path_parts['basename'] == “reservation.html”)

For email validation, we don’t need to feel complicated. And, we don’t want our mail server will be over-loaded for the case of invalid email address. How to prevent? Don’t worry.

Write following code between <head></head>

<script language = “Javascript”>

function echeck(str) {

var at=”@”
var dot=”.”
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(” “)!=-1){
alert(“Invalid E-mail ID”)
return false
}

return true
}

function ValidateForm(){
var emailID=document.frmSample.txtEmail

if ((emailID.value==null)||(emailID.value==”")){
alert(“Please Enter your Email ID”)
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=”"
emailID.focus()
return false
}
return true
}
</script>

Write this code below of <body>

<form name=”frmSample” method=”post” action=”#” onSubmit=”return ValidateForm()”>
<p>Enter an Email Address :
<input type=”text” name=”txtEmail”>
</p>
<p>
<input type=”submit” name=”Submit” value=”Submit”>
</p>
</form>

Categories: Javascript Tags: , ,

Image Navigation with javascript

November 7, 2008 ppshein Leave a comment

New featured section called Planet Wedding 2008 has Image gallery section. As I told in previous posts, I’ve created such new featured section with database less theory. For image gallery, I gotta set image navigation button such as next | previous. Database less theory, it’s too hard to put this navigation link in this section.

Fortunately, I’ve an idea to create this with javascript. It’s neither quite simple nor complicated. Here is javascript coding.

Put following code in JS file.

which_image_loaded = 0;
NUMBER_OF_IMAGES = 8; //number of your image

ImageNames = new Object();
ImageNames.length = NUMBER_OF_IMAGES – 1;

for (counter = 0; counter < NUMBER_OF_IMAGES; counter++)
{
file_number = counter + 1;
filename = (“[your_directory_path]” + file_number + “.jpg”);
ImageNames[counter] = filename;
}

function changeImage(direction)
{
which_image_loaded += direction;
if (which_image_loaded < 0)
{
which_image_loaded = NUMBER_OF_IMAGES – 1;
}

if (which_image_loaded == NUMBER_OF_IMAGES)
{
which_image_loaded = 0;
}

if (document.images)
{
document.SlideShow.src = ImageNames[which_image_loaded];
}

}

Put following code in your HTML file.

<div>
<img src=”thumbnail/1.jpg” name=”SlideShow” border=”0″>
</div>
<div><a href=”javascript:changeImage(-1)”>Previous Image</a> |  <a href=”javascript:changeImage(1)”>Next Image</a></div>

If you want to use this coding, you must do these two following instruction-

  • The file name of images must be numeric and order format like (1.jpg, 2.jpg, 3.jpg, 4.jpg….).
  • All of images must be in the same directory of the same folder.
Categories: Javascript Tags: ,

Javascript calendar

October 16, 2008 ppshein Leave a comment

I’ve recevied new project called DEMS. Purpose of this project, users can send mails, reports and share files through their local area network. In part of this project, users need to type create date in their files like 02/09/2008. So, I have created textbox for typing date format. Unfortunately, users complaint that they don’t wanna type like that into textbox. They wanna choose date format by calendar control. That’s why I need to create calendar control by javascript. I found this page:

http://calendar.swazz.org/

This site isn’t cool enough. But they can support what I want to have.

Categories: Javascript Tags: ,