JavaScript

Articles related to Software Development in JavaScript and JSON

JavaScript Object Push method

Dec 12th

Posted by editor in Development

here is object.push or json.setNode method i implemented for my needs. the name of the function is not ‘push’ because push method used in Array which is a subset of Object.

Sample:

var test = { };

test.setNode("path.to.your.variable", "my value");

// result:
// alert(test.path.to.your.variable);
//
// will return 'my value'

Code: 

Object.prototype.setNode = function(_key, _value) {
	var module = this;
	var spaceArray = _key ? _key.split('.') : [];
	var subSpace = null;
	var ndx = null;

	for (ndx = 0; ndx < spaceArray.length - 1 && (subSpace = spaceArray[ndx]); ++ndx) {
		if (subSpace) {
			if (!module[subSpace]) {
				module[subSpace] = {};
			}

			module = module[subSpace];
		}
	}

	subSpace = spaceArray[ndx];
	module[subSpace] = _value;

	return this;
};
, , ,

Google Maps v3 OverLay Control onclick issue

Apr 2nd

Posted by editor in Development

The issue causes bubbling in DOM and  pass all the events to Google Maps Event handler. Click, DoubleClick, MouseUp/Down, etc… I had the problems with input boxes and made this up as temporary solution. (I tried canceling bubbling from overlay DIV too, It didn’t work)

$("input, textarea").click(function(ev) {
    $(this).focus();

    tws_cancelEvent(ev);
});

or

var _input = document.getElementsByTag('input');
for ( ... ) {
     /* bind the click event for each item */
}

this CancelEvent function is generic. working for all browsers including old  age ones.

/*
 * ----------------------------------------------------------------------------
 * tws_cancelEvent
 * --------------------------------------------------------------------------
 */
var tws_cancelEvent = function(event) {
    /* if no event is passed, pull the event from the window object */
    var ev = (event || window.event);

    if (ev) {
        /*
         * this cancels the bubble in order to prevent the event from
         * bubbling up the dom chain (eg: OOB script won't log link
         * click)
         */
        ev.cancelBubble = true;

        if (ev.stopPropagation) {
            ev.stopPropagation();
        }

        /*
         * this sets the return value to false and stops the default
         * action from occurring (eg: clicks on links won't navigate)
         */
        ev.returnValue = false;

        if (ev.preventDefault) {
            ev.preventDefault();
        }
    }

    /* return false in case we want to use in an onclick property */
    return false;
};
, , , , , ,

YUI Compressor with Multiple files

Mar 24th

Posted by editor in CSS

using YUI Compressor with multiples file into single file or one-to-one

simple batch file. helps with dependecy order as well. at least my css and javascript files do  have dependecy.

the following batch is setup for CSS files. for JavaScript replace the –type argument value to js

@echo off
cls
echo.
echo.
echo    Compressing CSS
echo.
echo.
echo.
:: Comment line using ::
:: First command has single > to clear the file and dump the content
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-base.css > tws-combined.css

:: dump the rest into output file using >>
:: > is different than >>
::
::java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-carousel.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-columnset.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-common.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-contact.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-content.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-form.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-language.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-linkedlist.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-list.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-logo.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-navigation.css >> tws-combined.css
:: java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-slide.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-social.css >> tws-combined.css
::java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-subscribe.css >> tws-combined.css
:: java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-tab.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-table.css >> tws-combined.css
java -jar %TWS_DIR%\TDevTool\YUICompress\build\yuicompressor-2.4.2.jar --type css tws-ovr.css >> tws-combined.css
, , , ,

HTML remove cookies from static files, images etc

Mar 24th

Posted by editor in ASP.Net

If you have not configured your application and server, it might send them to browser with cookie information.

that’s costing you as extra traffic and slow load times.

<FilesMatch "\.(css|js|jpg|jpeg|png|gif)$">
    <IfModule mod_headers.c>
        Header set cookie ""
    </IfModule>
</FilesMatch>
, , , ,

HTML Reduce time on page load using performance images

Mar 24th

Posted by editor in ASP.Net

used this method while ago when i was working for one of those websites in top 10 the purpose was to reduce the loading time of the page and improve the parallel download

$(document).ready(function() {
    /* apply performance image */
    $.each($('img'), function(k, v) {
        var src = $(v).attr('src');

        if (src.indexOf('#') >= 0) {
            src = src.split('#');
            $(v).attr('src', src[1]);
        }

    });
});

the trick is simple. host a 1×1.gif image or don’t. up to you and separate the actual image path with ‘#’ and when the dom is ready start replacing them with original path.

make sure your images cachable.

, ,

JavaScript XMLHttpRequest Backward Compatability

Jan 28th

Posted by editor in Development

have implemented based on personal experience. and tested  in different browsers and their versions works with no problem.

if (typeof XMLHttpRequest === 'undefined') {
	XMLHttpRequest = function() {
		var progids = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP'];
		for (var ndx = 3; ndx <= 6; ++ndx) {
			/* populate array */
			progids[progids.length] = 'MSXML2.XMLHTTP.' + ndx + '.0';
		}

		for (var i = 0; i < progids.length; i++) {
			progid = progids[i];
			try {
				return new ActiveXObject(progids[i]);
			} catch (ex) {
				progid = '';
			}
		}
		// if falls here no xmlhttpsupport
		return null;
	};
}
, , , ,

JavaScript getElementSize

Jan 26th

Posted by editor in Development

, , ,