Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Category Archives: JavaScript

How to force browser to resize when window resizing doesn’t work


use the code below:

window.onresize = function() {
   window.resizeTo(500,500);
}
Advertisements

How to hide window scrollbar for IE, FF and Google Chrome


It is easy if you add the attribute scrollbars=no inside the window.open()‘s window attributes. But what if you wish to hide them when the popup window is already open. Thank you CSS! Yes, it is possible by using Javascript and accessing the window style’s property overflow. However, there is a cross-browser issue. Both IE and Firefox/Google Chrome have different codes that make this work. You can place both their codes in the same page and/or Javascript function. If the browser does not understand the property, it will ignore it anyway so there is no need to do a browser check to execute the code specific to that certain browser.
The code below does the trick:

document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only

Just in case you wish to disable either just the horizontal or vertical scrollbar, this code works for non IE browsers

document.documentElement.style.overflowX = 'hidden'; // horizontal scrollbar will be hidden
document.documentElement.style.overflowY = 'hidden'; // vertical scrollbar will be hidden

Handling array of HTML Form Elements in JavaScript and PHP


Today, I would like to share the way of handling array of HTML FORM elements using JavaScript and PHP.Well, it’s very easy to get the data from the array of HTML form elements in PHP and using them but in JavaScript it’s a bit tricky to handle the array of HTML form elements. I had a hard time to handle them via JavaScript in past thats why I’m posting it here so that people will not have hard time to cope with array of form elements in JavaScript and PHP.

Array of HTML form elements

You can create the array of Form Elements for grouping the similar kind of object or data. The array of elements are very useful in the context where you don’t know how many similar kind of data user have to enter. For example, you have a form where user have to enter his education qualification then you might not know how many of the textboxes are required for a person and in such kind situation you can dynamically generate array of the elements in the form for entering such kind of information.

<input name=”education[]” type=”text” size=”20″ maxlength=”40″ />
<input name=”education[]” type=”text” size=”20″ maxlength=”40″ />
<input name=”education[]” type=”text” size=”20″ maxlength=”40″ />

As you can in the above code, there are array element of textbox defined with the name “education”.Now, let’s see how can we handle them via JavaScript and PHP.
How to handle array of HTML form elements using PHP

If you submit the the the form with the above the array of elements then you can assess it via array of $_POST[‘education’] in PHP. You can use foreach() loop to access the value of the value of these form elements via PHP.

foreach($_POST[‘education’] as $key=>$value)
echo $key.’ ‘.$value;

Normally, posted variable are contained within the POST array but when you post the array of Form Elements then at that time the values are contained within the array of array i.e within $_POST[‘education’] in above exmaple.
How to handle array of Form elements using JavaScript

Handling the array of Form element part is a bit tricky. Now, let try to access the values of the above elements using JavaScript. First, let’s store the above object in a JavaScript variable

var mutli_education = document.form_name.elements[“education[]”];

After storing the object in the variable, we can access the individual variables in the following way in JavaScript

for(i=0;i<mutli_education.length;i++)
{
alert(mutli_education[i].value);
}

As you can see, you can get how many elements are there in the array using the lengh property and you can use the value property to get the value of the indivisual element.

How to set TextField readOnly attribute?


Apply the follwoing extension:
Code:

Ext.override(Ext.form.Field, {
    setReadOnly: function(readOnly) {
        if (readOnly == this.readOnly) {
            return;
        }
        this.readOnly = readOnly;

        if (readOnly) {
            this.el.dom.setAttribute('readOnly', true);
        } else {
            this.el.dom.removeAttribute('readOnly');
        }
    }
});

Now use like:

Ext.getCmp('user_id').setReadOnly(false);
Ext.getCmp('user_id').setReadOnly(true);

How to add a dynamic hidden field in a form?

Changing a textfield to passwordfield dynamically


The simple way to use setAttribute(), like:

{
xtype: 'button',
name: 'p_acc_pass',
id: 'p_acc_pass',
enableToggle : true,
fieldLabel: '',
width:100,
iconCls: 'lock',
text: 'Show Password',
toggleHandler: function(btn, st){
if(!st){
 Ext.getCmp('p_acc_pass').setText('Show Password');
 Ext.getCmp('pass_btn').setIconClass('lock');
 Ext.getCmp('acc_pass').getEl().dom.setAttribute('type','password');
 Ext.getCmp('acc_pass').getEl().addClass('x-form-password');
}else{
 Ext.getCmp('pass_btn').setText('Hide Password');
 Ext.getCmp('pass_btn').setIconClass('unlock');
 Ext.getCmp('acc_pass').getEl().dom.setAttribute('type','text');
 Ext.getCmp('acc_pass').getEl().addClass('x-form-text');
}
}
}

Use PHP functions in JavaScript


php.js Logo php.js is an open source project that brings high-level PHP functions to low-level JavaScript platforms such as webbrowsers, AIR, V8 and rhino.

If you want to perform high-level operations on these platforms, you probably need to write JS that combines it’s lower-level functions and build it up until you have something useful like: md5(), strip_tags(), strtotime(), number_format(), wordwrap().

That’s what we are doing for you.

No server component required. To use php.js you can either:

ExtJS – Cross-Browser Rich Internet Application Framework


https://i0.wp.com/www.extjs.com/assets/images/extjs2.png

Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

  • High performance, customizable UI widgets
  • Well designed and extensible Component model
  • An intuitive, easy to use API
  • Commercial and Open Source licenses available

Ext JS supports all major web browsers including:

  • Internet Explorer 6+
  • FireFox 1.5+ (PC, Mac)
  • Safari 3+
  • Opera 9+ (PC, Mac)

Page Auto Re-direct after few seconds


JS Code:

function redirect(){
window.location = "http://domain.com/your-redirect-page.html";
}
setTimeout("redirect()",10000);

URL Validation


If you want to validate an URL in input fields, here is the JS code:

function isUrl(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(s);
}

How to parse a URL?


If you want to parse a URL, here is the JS code: (please write a comment if you take this code)

function parseURL(buffer) {
var result = { };
result.protocol = "";
result.user = "";
result.password = "";
result.host = "";
result.port = "";
result.path = "";
result.query = "";
var section = "PROTOCOL";
var start = 0;
var wasSlash = false;
while(start < buffer.length) {
if(section == "PROTOCOL") {
if(buffer.charAt(start) == ':') {
section = "AFTER_PROTOCOL";
start++;
} else if(buffer.charAt(start) == '/' && result.protocol.length() == 0) {
section = PATH;
} else {
result.protocol += buffer.charAt(start++);
}
} else if(section == "AFTER_PROTOCOL") {
if(buffer.charAt(start) == '/') {
if(!wasSlash) {
wasSlash = true;
} else {
wasSlash = false;
section = "USER";
}
start ++;
} else {
throw new ParseException("Protocol shell be separated with 2 slashes");
}
} else if(section == "USER") {
if(buffer.charAt(start) == '/') {
result.host = result.user;
result.user = "";
section = "PATH";
} else if(buffer.charAt(start) == '?') {
result.host = result.user;
result.user = "";
section = "QUERY";
start++;
} else if(buffer.charAt(start) == ':') {
section = "PASSWORD";
start++;
} else if(buffer.charAt(start) == '@') {
section = "HOST";
start++;
} else {
result.user += buffer.charAt(start++);
}
} else if(section == "PASSWORD") {
if(buffer.charAt(start) == '/') {
result.host = result.user;
result.port = result.password;
result.user = "";
result.password = "";
section = "PATH";
} else if(buffer.charAt(start) == '?') {
result.host = result.user;
result.port = result.password;
result.user = "";
result.password = "";
section = "QUERY";
start ++;
} else if(buffer.charAt(start) == '@') {
section = "HOST";
start++;
} else {
result.password += buffer.charAt(start++);
}
} else if(section == "HOST") {
if(buffer.charAt(start) == '/') {
section = "PATH";
} else if(buffer.charAt(start) == ':') {
section = "PORT";
start++;
} else if(buffer.charAt(start) == '?') {
section = "QUERY";
start++;
} else {
result.host += buffer.charAt(start++);
}
} else if(section == "PORT") {
if(buffer.charAt(start) = '/') {
section = "PATH";
} else if(buffer.charAt(start) == '?') {
section = "QUERY";
start++;
} else {
result.port += buffer.charAt(start++);
}
} else if(section == "PATH") {
if(buffer.charAt(start) == '?') {
section = "QUERY";
start ++;
} else {
result.path += buffer.charAt(start++);
}
} else if(section == "QUERY") {
result.query += buffer.charAt(start++);
}
}
if(section == "PROTOCOL") {
result.host = result.protocol;
result.protocol = "http";
} else if(section == "AFTER_PROTOCOL") {
throw new ParseException("Invalid url");
} else if(section == "USER") {
result.host = result.user;
result.user = "";
} else if(section == "PASSWORD") {
result.host = result.user;
result.port = result.password;
result.user = "";
result.password = "";
}
return result;
}

SWFUpload – JavaScript/Flash library to Upload Multiple Files


https://i2.wp.com/www.swfupload.org/sites/swfupload.org/themes/joel_pittet/Alina/images/logo.gif

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.

* Upload multiple files at once by ctrl/shift-selecting in dialog
* Javascript callbacks on all events
* Get file information before upload starts
* Style upload elements with XHTML and css
* Display information while files are uploading using HTML
* No page reloads necessary
* Works on all platforms/browsers that has Flash support.
* Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
* Control filesize before upload starts
* Only display chosen filetypes in dialog
* Queue uploads, remove/add files before starting upload

%d bloggers like this: