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,
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()”>
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>
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>
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.
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.
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.
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.txtEmailif ((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>
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 imageImageNames = 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-
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:
This site isn’t cool enough. But they can support what I want to have.
 |
 |
Twitter