How To PHP - PHP Technology, PHP Tutorial, Database Tutorials, CMS System » JavaScript

How to Show hide content using core JavaScript ?

om — Wed, 11 May 2011 22:36:28 +0000

Today I was working on another website and had very long text/content and thought to use Jquery, there are several examples given on internet. I tried to use some of them of course they are very simple but because of some reason it didn’t work for me either in IE and chrome.
So decided to compile my own show hide JavaScript which is based on DOM!
Here is very simple code and it works everywhere, Firefox, Internet Explorer, Chrome, Safari etc.

Steps are self explanatory.
A. Use JavaScript code
B. Use Css Class
C. See the example and compile your own!

View Code JS

View Code HTML

This is first paragraph of my big content. Click to See more.

Here is your hidden text which you want to hide!! Copy your text here!

Click to hide this content.

What is difference between setInterval () and setTimeout () ?

om — Wed, 23 Feb 2011 00:05:32 +0000

setTimeout execute javascript statement AFTER x interval.
For example – setTimeout(“execute_something();”, 2000);
This is execute function execute_something() after 2 seconds.

setInterval execute javascript statement EVERY x interval.
For example – setInterval(“execute_something();”, 2000);
This is execute function execute_something() in every 2 seconds.

How to use Firebug within Google Chrome?

om — Tue, 22 Feb 2011 23:59:31 +0000

Google Chrome does not support plug-ins, there is Firebug-like too already available built within Google Chrome. That is called “Inspect element” just right click on page anywhere and click on “Inspect element” menu command. It will open a new panel like firebug. It works well for CSS debugging and you can change CSS in real time like firebug but JavaScript debugging is not very good supported.

How to auto refresh a page through JavaScript?

om — Wed, 09 Feb 2011 03:33:31 +0000

Here is the small JavaScript example that tells how you can use setTimeout() to auto refresh page content. You can utilize this script in games site or stock sites or anywhere you can think of.

View Code JS




PHPMIND – Javascript Tutorials
 

 
JavaScript Auto Refresh Page
This code will refresh you page in 6 seconds. We have used OnLoad() Event function to call our function.
Note : Please don’t use a lot of auto refresh page because it is kind of annoying and your sever bandwidth will be decreasing, one way you are increasing hits to server.

How to include multiple js file in one js file?

om — Sun, 17 Oct 2010 19:57:32 +0000

To include multiple js files in page is bad in terms of http request. Yslow Yahoo! tool can give you bad grade. Grade F on making more HTTP requests.
Apart from that page loading time increases and page does not looks clean.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.

Including multiple .js file in one external file has several advantages.
1. Less HTTP request.
2. If cashing is on page lode faster.
3. Page looks clean.

Use this code to add as much as files as you want.

View Code JAVASCRIPT

 
document.write('');
document.write('');
document.write('');
document.write('');

How to change image with onclick?

om — Thu, 16 Sep 2010 02:15:58 +0000

To change the image using OnClick function i have found 2 ways.

1. Using jQuery.
2. Normal JavaScript.

Lets look one by one.

View Code JAVASCRIPT

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
  $("#ChangeImage").click(function(){
  $('#ChangeImage').attr('src','yahoo.gif');
 
  });
});
script>
<img src="bm_yahoo.gif" name="my_pic" id="ChangeImage">

second by using simple JavaScript. I suggest not you use direct JavaScript call function. Good PHP Technology companies are not using like this.

View Code JAVASCRIPT

<script type="text/javascript">
function changePic()
{
  document.getElementById("Img1").src="bm_yahoo.gif";
}
script>
<a href="#" onclick="changePic()";><img border="0" id="Img1" src="yahoo.gif" />a>
script>

How to self submit a form through Javascript?

om — Tue, 10 Aug 2010 07:16:54 +0000

Here is a self submitting form I wrote for a php form. Its simple, clean, and it works flawlessly.

View Code PHP

<form id="myform" action="Recap" method="post">
<input name="invoicevalue" type="hidden" value="${preRecapBean.invoiceAmount}" />
form>
 
<script type="text/JavaScript" language="JavaScript">  
        document.myform.submit();

JavaScript Refrence

om — Wed, 07 Jul 2010 01:31:19 +0000

JavaScript Variable Manipulation Functions

As shown in the following table, you can use these JavaScript statements in your own code to create and modify variables in your JavaScript functions.

Element	Description
var myVar = 0;	Creates a variable with given starting value. Type is determined dynamically.
stringVar = prompt(“message”)	Sends message to user in a dialog box, retrieves text input from user and stores it in stringVar.
stringVar.length	Returns the length (in characters) of stringVar.
stringVar.toUpperCase(), stringVar.toLowerCase()	Converts stringVar to upper- or lowercase.
stringVar.substring()	Returns a specified subset of stringVar.
stringVar.indexOf()	Returns location of a substring in stringVar (or -1).
parseInt()	Converts string to int.
parseFloat()	Converts string to float.
toString()	Converts any variable to string.
eval()	Evaluates string as JavaScript code.
Math.ceil()	Converts any number to integer by rounding up.
Math.floor()	Converts any number to integer by rounding down.
Math.round()	Converts any number to integer by standard rounding algorithm.
Math.random()	Returns random float between 0 and 1.

Basic I/O Commands in JavaScript

JavaScript programmers commonly use the commands shown in the following table for controlling dialog-based input and output in programs to be used on the Web.

Element	Description
alert(“message”);	Creates a popup dialog containing “message.”
stringVar = prompt(“message”)	Send message to user in a dialog box, retrieve text input from user and store it in stringVar.

JavaScript Conditions and Branching Code Structures

Look to the following table for JavaScript control structures you can use in your program code to add branching and looping behavior to your JavaScript programs.

Element	Description
if (condition){ // content } else { // more content } // end if	Executes content only if condition is true. Optional else clause occurs if condition is false.
switch (expression) case: value; //code break; default: //code }	Compares expression against one or more values. If expression is equal to value, runs corresponding code. Default clause catches any uncaught values.
for(i = 0; i < count; i++) //code } // end for	Repeats code i times.
While (condition){ //code } // end while	Repeats code as long as condition is true.
Function fnName(paramaters) { //code } // end function	Defines a function named fnName and sends it parameters. All code inside the function will execute when the function is called.

Element

Description

if (condition){

// content

} else {

// more content

} // end if

Executes content only if condition is true.

Optional else clause occurs if condition
is false.

switch (expression)

case: value;

//code

break;

default:

//code
}

Compares expression against one or more values. If expression
is equal to value, runs corresponding code.

Default clause catches any uncaught values.

for(i = 0; i < count; i++)

//code

} // end for

Repeats code i times.

While (condition){

//code

} // end while

Repeats code as long as condition is true.

Function fnName(paramaters) {

//code

} // end function

Defines a function named fnName and
sends it parameters. All code inside the function will execute when
the function is called.

Add JavaScript Comparison Operators to Condition Statements

JavaScript uses comparison operators inside conditions to make numeric or alphabetical comparisons of variables to other variables or values. Using these operators, you can determine whether a variable is greater than, less than, or equal to another variable or value. You can also use combinations of these comparison operators.

Name	Operator	Example	Notes
Equality	==	(x==3)	Works with all variable types, including strings.
Not equal	!=	(x != 3)	True if values are not equal.
Less than	<	(x < 3)	Numeric or alphabetical comparison.
Greater than	>	(x > 3)	Numeric or alphabetical comparison.
Less than or equal to	<=	(x <= 3)	Numeric or alphabetical comparison.
Greater than or equal to	>=	(x >= 3)	Numeric or alphabetical comparison.

Create JavaScript Structures and Objects

JavaScript allows you to put together code lines to create functions and variables to create arrays. You can put functions and variables together to create objects.

Element	Description
function fnName(parameters) { //code } // end function	Defines a function named fnName and sends it parameters. All code inside function will execute when the function is called.
var myArray = new Array(“a”, “b”, “c”);	Creates an array. Elements can be any type (even mixed types).
Var myJSON = { “name”: “Andy”, “title”: “Author” }	Creates a JSON object. Each element has a name/value pair, and can contain anything, including an array (with square braces) another JSON object, or a function.
Var person = new Object(); Person.name = “Andy”;	Creates an object. You can add ordinary variables (which become properties) or functions (which become methods).

Change Your Web Page with JavaScript Document Object Model Methods

The Document Object Model methods shown in the following table offer you a great way to access and modify your Web pages through your JavaScript code.

Element	Description
myElement = document.getElementById(“name”);	Gets an element from the page with the specified ID and copies a reference to that element to the variable myElement.
myElement.innerHTML = “value”	Changes the value of the element to “value”.
document.onkeydown = keyListener	When a key is pressed, a function called keyListener is automatically activated.
document.onmousemove = mouseListener	When the mouse is moved, a function called mouseListener is automatically activated.
setInterval(function, ms);	Runs function each ms milliseconds.
myArray = document.getElementByName(“name”)	Returns an array of objects with the current name (frequently used with radio buttons).