Tag: javascript

Compress Javascript and CSS Files Using PHP

Leave a comment

Enhance your Javascript and CSS resources:

I have been doing some web applications lately, and wanted to compress my Javascript and CSS files so that page loads are quicker and also the files are cached at all times.

So i thought to myself, that we could truncate the JS and CSS files by removing the unwanted spaces and characters.

So i began writing a script that does the following:

  1. Reads JS or CSS files(s) from a particular folder called either js or css.
  2. Removes all the unwanted characters and blank spaces.
  3. Creates a new file in a new directory called js_cache or css_cache.
  4. Wallla!! we have done it, you have successfully reduced the file file size.

The script will allow you to manage easily your Javascript and CSS resources and to reduce the amount of data transferred between the server and the client.

Performances:

We can say that the performance is better but not the best, but it works.

You would see a slight reduce in time between the server and the client.

Restrictions:

In CSS files there are no problems, but in case of Javascript there may some problems where single line comments are used like ‘// comment ‘.

Therefore always use multi line comments like /* comment */ if you want to use this script

Requirements:

  1. Create a folder for you project
  2. Dump all the js files in js folder and css files in css folder
  3. Then create two more folders js_cache and css_cache
  4. Copy and paste this script in the project directory
  5. Edit the script by changing the constant FILE_TYPE as js or css only
  6. Run the script
  7. New files will be created in js_cache and css_cache
  8. Wow, its done now use these file instead of the original one

ALL THE BEST…

HAPPY SCRIPTING…..

Do keep sharing!!!

Download file:

Compress Javascript and CSS Files Using PHP

Basic AJAX (Asynchronous JavaScript and XML)

Leave a comment

Ajax, sometimes written as AJAX (shorthand for asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications.

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.


/**
* Declare global variable....
* @param string elementName this is to identify the elemnt in which the response should be dispalyed. like as div id (required)
*/
var elementName = "";

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. The specified data
* is sent to the server as parameters. This is the same as
* calling xmlOpen(“POST”, url, toSend, responseHandler).
*
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlPost(url, toSend, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“POST”, url, toSend, responseHandler);
}

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. No other data is
* sent to the server. This is the same as calling
* xmlOpen(“GET”, url, null, responseHandler).
*
* @param string url The URL to connect to.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlGet(url, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“GET”, url, null, responseHandler);
/**
* This code can be used if you need to call the required function after every interval i.e seconds..
* setTimeout(“xmlGet(‘products.php’, notesResponseHandler)”,3000);
* setTimeout(“alert(‘products.php’)”,3000);
*/
}

/**
* Open a connection to the specified URL, which is
* intended to respond with an XML message.
*
* @param string method The connection method; either “GET” or “POST”.
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
*/
function xmlOpen(method, url, toSend, responseHandler)
{
// alert(url);
if (window.XMLHttpRequest)
{
// browser has native support for XMLHttpRequest object
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// try XMLHTTP ActiveX (Internet Explorer) version
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if(req)
{
req.onreadystatechange = responseHandler;
req.open(method, url, true);
req.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
req.send(toSend);
}
else
{
alert(‘Your browser does not seem to support XMLHttpRequest.’);
}
}

/**
* Handler for server’s response to notes.xml request.
* Notes are pulled from notes.xml and replace the
* contents of the DIV with id ‘notesSection’.
*/
function notesResponseHandler()
{
// Make sure the request is loaded (readyState = 4)
if (req.readyState == 4)
{
// Make sure the status is “OK”
if (req.status == 200)
{
var swappableSection = document.getElementById(elementName);
var str = req.responseText;
swappableSection.innerHTML = str;
}
else
{
alert(“There was a problem retrieving the XML data:\n” +
req.statusText);
}
}
}

/**
* When a file gets included in the page….
* Call the function on load or on click….
*/
//xmlGet(‘products.php’, notesResponseHandler);
//alert(‘called’);

Open a new window using Javascript

Leave a comment

JavaScript : window.open

There are few times we would like top open a pop window to show some data or also be user interactive bu showing a good form in a pop window, window.open can be used for this pupose

We can directly write window.open(url) in the anchor tag, but let be more innovative and give more flexibility to our code, so we write a wrapper function around it.

The below example provides a broader view:

/* Function : New Window
|
| Description : This parameter defines how you want the new window to appear.
| This parameter is ignored if an existing window is to be reused.
| The contents of this parameter is a comma separated list of sub-parameters.
|
| Arguments :-
|
| left : yes or no
| specifies the recommended distance from the left of the
| screen to the left of the new window.
| top : yes or no
| specifies the recommended distance from the top of the
| screen to the top of the new window.
| width : yes or no
| specifies the width of the content area for the new window
| (including any scrollbars etc). |
| Note. IE7 will not allow you to set width below 250px.
| height : specifies the height of the content area for the new window
| (including any scrollbars etc).
| Note. IE7 will not allow you to set height below 150px.
| menubar : can be set to yes or no to indicate whether or not the new window
| should display a menubar.
| toolbar : can be set to yes or no to indicate whether or not the new window
| should display a toolbar.
| location : can be set to yes or no to indicate whether or not the new window
| should display the location |
| status : can be set to yes or no to indicate whether or not the new window
| should display the status bar.
| resizable : can be set to yes or no to indicate whether or not the new window can be resized.
| scrollbars : can be set to yes or no to indicate whether or not the new window
| should display scrollbars if required.
|
| Optional :-
|
| replace : This parameter defines how an existing window is to be reused.
| If true then the new page replaces the current page in the browser history.
| If false the new page is added to the browser history.
|
| Example: window.open(“URL”,”width=350, height=400, toolbar=no, resize=yes, scrollbars=yes, status=no, menubar=yes”);
|
| @access public
| @param string
| @param int
| @param int
| @return void
*/
function new_window(url,swidth,sheight)
{

var width = (swidth) ? swidth: 600;
var height = (sheight) ? sheight: 500;

if(url != “”)
window.open(url,”new_window”,”toolbar=no, width=”+width+”, height=”+height+”, status=no,scrollbars=yes, resize=yes, menubar=no”);
}

IE6+ window.location doesn’t work (redirect to a page)

Leave a comment

In IE6+ window.location doesn’t work so a turn around would be changing the JS script or working with the environment and calling the JS script in a different manner.

Here how it works:-
1. First check the browser and its version.
2. Call the JS script.

Example:

var url=’https://austinnoronha.wordpress.com’;
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type==”Netscape”&&browser_version>=4)
{
//if NS 4+
window.location.replace(url);
}
else if (browser_type==”Microsoft Internet Explorer”&&browser_version>=4)
{
//if IE 4+
window.location.replace(url);
}
else
{
//Default goto page (NOT NS 4+ and NOT IE 4+)
window.location=url;
}