javascript code

Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets

Older Snippets »

Showing 1-10 of 413 total RSS

Simple javascript XHR object with fix for missing onreadystatechange event in Firefox (for synchronous calls)

This code fixes the issue in Firefox where the onreadystatechange event is not called for synchronous XHR requests. It is based on the XHConn script from http://xkr.us/code/javascript/XHConn/, patched with the fix documented at http://lukav.com/wordpress/2007/04/12/firefox-firebug-and-synchronos-calls-problem/

/** XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08        **
 ** Code licensed under Creative Commons Attribution-ShareAlike License      **
 ** http://creativecommons.org/licenses/by-sa/2.0/                           **/
/**
 * Modified slightly from original to support synchoronous transactions
 * CDB 2007-05-16, 2007-06-05
 */

function XHConn()
{
	var xmlhttp, bComplete = false;
	try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
	catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
	catch (e) { try { xmlhttp = new XMLHttpRequest(); }
	catch (e) { xmlhttp = false; }}}
	if (!xmlhttp) return null;
	this.connect = function(sURL, sMethod, sVars, fnDone, bAsynch)
	{
		if (!xmlhttp) return false;
		bComplete = false;
		sMethod = sMethod.toUpperCase();

		if (bAsynch == null) bAsynch = true; //treat asynch as an optional argument

		try {
			if (sMethod == "GET")
			{
				xmlhttp.open(sMethod, sURL+"?"+sVars, (bAsynch == true));
				sVars = "";
			}
			else
			{
				xmlhttp.open(sMethod, sURL, (bAsynch == true));
				xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
				xmlhttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			}

			xmlhttp.onreadystatechange = function(){
				if (xmlhttp.readyState == 4 && !bComplete)
				{
					bComplete = true;
					fnDone(xmlhttp);
				}
			};
			xmlhttp.send(sVars);

			/**
			 * Firefox <= 2.0.0 doesn't fire onreadystatechange for synchronous requests.
			 * See http://lukav.com/wordpress/2007/04/12/firefox-firebug-and-synchronos-calls-problem/
			 */
			var isGecko = (document.addEventListener) ? true : false;
			try {
				if (!bAsynch && isGecko && xmlhttp.onreadystatechange == null) {
					bComplete = true;
					fnDone(xmlhttp);
					return true;
				}
			}
			catch (e) { return false; }
			/**
			 * End synchronous request patch
			 */
		}
		catch(z) { return false; }
		return true;
	};
	return this;
}

to javascript firefox ajax firebug fix xmlhttp synchronous xhr onreadystatechange xhconn by ChrisBloom7 on Apr 21, 2008

Replace working as PHP str_replace //JavaScript Function

Useless JavaScript implementation of the php function str_replace.

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com

function replace(f, r, s){
	var ra = r instanceof Array, sa = s instanceof Array, l = (f = [].concat(f)).length, r = [].concat(r), i = (s = [].concat(s)).length;
	while(j = 0, i--)
		while(s[i] = s[i].split(f[j]).join(ra ? r[j] || "" : r[0]), ++j < l);
	return sa ? s : s[0];
}

to javascript php string replace jonas jsfromhell raoni str_replace by jonasraoni on Apr 17, 2008

Output JavaScript variables from PHP

Class with useful static methods for outputting PHP values into JavaScript format.

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com

class JS{
	//generic and maybe not the desired results xD
	function value($o){
		if($o === null)
			return 'null';
		$t = strtolower(gettype($o));
		if($t == 'string' && is_numeric($o) && ($o[0] || strlen($o) == 1) || in_array($t, array('double', 'integer')))
			$t = 'number';
		elseif($t == 'string' && preg_match('@^\d{4}(?:-\d{1,2}){1,2}(?: (?:\d{1,2}:){2}\d{1,2})?$@', $o)) //strtotime works also with "strange" values strtotime('x')
			$t = 'date';
		elseif($t == 'array' && ($c = count($k = array_keys($o))) && $k !== range(0, $c - 1))
			$t = 'object';
		elseif(!in_array($t, array('boolean', 'string', 'array', 'object')))
			$t = 'string';
		$t = 'from' . $t;
		return self::$t($o);
	}
	function fromNumber($o){
		return +$o . '';
	}
	function fromObject($o){
		$r = array();
		foreach($o as $n => $v)
			$r[] = self::fromString($n) . ':' . self::value($v);
		return '{' . implode(',', $r) . '}';
	}
	function fromBoolean($o){
		return $o ? 'true' : 'false';
	}
	//$q = should quote? 
	//$c = char that will be used to quote
	function fromString($o, $q = true, $c = '"'){
		return ($p = $q ? $c : '') . preg_replace('/\r\n|\n\r|\r/', '\n', str_replace($c, '\\' . $c, str_replace('\\', '\\\\', $o))) . $p;
	}
	function fromArray($o){
		$s = '';
		foreach($o as $v)
			$s .= ($s ? ',' : '') . self::value($v);
		return '[' . $s . ']';
	}
	function fromDate($o){
		(is_numeric($o) && $o = +$o) || ($o = strtotime($o)) > 0 || ($o = mktime());
		$o = explode(',', date('Y,n,j,G,i,s', $o));
		foreach($o as $i => $v)
			$o[$i] = +$v;
		return 'new Date(' . implode(',', $o)  . ')';
	}
}

Example

$o = new stdClass;
$o->abc = 123;
echo implode("\n<br />", array(
	JS::value('1984-07-22 11:30:12'),
	JS::value('Test'),
	JS::value(1234),
	JS::value(true),
	JS::value(array(1,2,3)),
	JS::value(array('lala' => 'x')),
	JS::value($o)
));

to javascript php convert format variable json output jonas jsfromhell raoni by jonasraoni on Apr 09, 2008

YUI DataTable - Understanding ISO / SQL Date Time Formats

As of YUI 2.5.1 the DataSource utility (which feeds the DataTable widget) only accepts either native Javascript Date objects or a string formatted to the North American locale (mm/dd/yyyyy) when using parser: "date" in your schema.

This can cause problems outside the USA, particularly if you are using ISO date formats say from MySQL DateTime columns. So let's fix this and include a Calendar widget for editing.

First, we depend on Datejs so ensure you've already got this loaded into the application. Next you need a couple of custom callback methods

/**
 * Accepts a date string in any format that datejs.com's library can recognise.
 * Returns a Date object if successful, false otherwise
 */
parseSQLDate = function(data)
{
       var date = null;
       try {date = Date.parse(data);return date;}
       catch(e) {return false;}
};
/**
 * This is a formatting callback for YUI DataTable to present date in ISO format
 * instead of American mm/dd/yyyy
 */
formatDateInDataTable = function(elCell, oRecord, oColumn, oData)
{
       var oDate = oData;
       elCell.innerHTML = oDate.toString('yyyy-MM-dd');
};

Now to activate modify your schema thus:

dataSource.responseSchema = {
       resultsList: "items",
       fields: [{key: "created_on", parser: parseSQLDate}]
};

And in your columnDefs:

dataSource.columnDefs = [
       {key: "created_on", label: "Created", editor: "date", formatter: formatDateInDataTable}
];

Lastly we set up an editor for cells:

dataTable.subscribe("cellClickEvent", dataTable.onEventShowCellEditor);

to javascript yui by jamesg on Apr 08, 2008

Using the mousewheel to zoom in or out an SVG document

This code was originally copied from Mouse wheel programming in JavaScript [adomas.org]. I replaced about 5 lines of code to get the mousewheel controlling the zoom feature in the makeZoom.svg [dzone.com] file.

  /** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function zoomInOut(delta) {
	if (delta >= 0)
		zoomIn()
	else
		zoomOut()
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		zoomInOut(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

to javascript zoom scroll mousewheel delta addEventListener by jrobertson on Apr 08, 2008

Reference of keyCodes

    switch (oEvent.keyCode) {
       case 38: //up arrow  
       case 40: //down arrow
       case 37: //left arrow
       case 39: //right arrow
       case 33: //page up  
       case 34: //page down  
       case 36: //home  
       case 35: //end                  
       case 13: //enter  
       case 9: //tab  
       case 27: //esc  
       case 16: //shift  
       case 17: //ctrl  
       case 18: //alt  
       case 20: //caps lock
       case 8: //backspace  
       case 46: //delete
           return true;
           break;

       default:

Note: When capturing combination keys there is dedicated boolean attributes for each of the special keys (CTRL, SHIFT, ALT).
Reference: Make Life Easy With Autocomplete Textboxes [JavaScript & AJAX Tutorials] [sitepoint.com]

to javascript dom key capture code event keyCode by jrobertson on Apr 02, 2008

Cursor object for easily changing cursor based on an event.

Uses the prototype.js library version 1.6. Prior to this version to access the "event" you must use Event.element(event).

Cursor Object with event driven functions to quickly change the cursor based on an event.

<html>
<head>
    <script type="text/javascript" src="/path/to/prototype.js"></script>
    <script type="text/javascript">

        var Cursor = {
            pointer:function(event){
                //Event.element(event)  *** Prior to prototype 1.6 ***
                event.element().setStyle({cursor:"pointer"});
            },
        
            normal:function(event){
                event.element().setStyle({cursor:"crosshair"});
            },
        
            auto:function(event){
                event.element().setStyle({cursor:"auto"});
            },
        
            crosshair:function(event){
                event.element().setStyle({cursor:"crosshair"});
            },
        
            move:function(event){
                event.element().setStyle({cursor:"move"});
            },
        
            e_resize:function(event){
                event.element().setStyle({cursor:"e-resize"});
            },
        
            ne_resize:function(event){
                event.element().setStyle({cursor:"ne-resize"});
            },
        
            n_resize:function(event){
                event.element().setStyle({cursor:"n-resize"});
            },
        
            se_resize:function(event){
                event.element().setStyle({cursor:"se-resize"});
            },
        
            sw_resize:function(event){
                event.element().setStyle({cursor:"sw-resize"});
            },
        
            s_resize:function(event){
                event.element().setStyle({cursor:"s-resize"});
            },
        
            w_resize:function(event){
                event.element().setStyle({cursor:"w-resize"});
            },
        
            text:function(event){
                event.element().setStyle({cursor:"text"});
            },
        
            wait:function(event){
                event.element().setStyle({cursor:"wait"});
            },
        
            help:function(event){
                event.element().setStyle({cursor:"help"});
            },
        
            progress:function(event){
                event.element().setStyle({cursor:"progress"});
            }
        }

        Event.observe(window, "load", function(){
            $("example").observe("mouseover", Cursor.pointer.bindAsEventListener(Cursor));

            //Could also be:
            $("example").observe("mouseover", function(event){
                Cursor.pointer(event);
            });
        });
    </script>
<body>
    <div id="example">Cursor should switch from arrow to "Pointer" on mouseover</div>
</body>
</html>

to javascript prototype by bgpete on Apr 01, 2008

Point Inside a Polygon //JavaScript Function

Checks whether a point is inside a polygon.
Adapted from: [http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html]

[UPDATED CODE AND HELP CAN BE FOUND HERE: Point Inside a Polygon]

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/classes/is-point-in-poly [v1.0]

function isPointInPoly(poly, pt){
	for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
		((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
		&& (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
		&& (c = !c);
	return c;
}

Example

<script type="text/javascript">
//<![CDATA[

points = [
	{x: 0, y: 0},
	{x: 0, y: 50},
	{x: 50, y: 10},
	{x: -50, y: -10},
	{x: 0, y: -50},
	{x: 0, y: 0}
];

alert(isPointInPoly(points, {x: 10, y: 10}) ? "In" : "Out");

//]]>
</script>

to test javascript point poly hit polygon jonas inside hittest jsfromhell raoni by jonasraoni on Mar 30, 2008

UTF-8 Converter //JavaScript Object

Converts a sequence of ANSI characters to UTF-8 and vice-versa.

[UPDATED CODE AND HELP CAN BE FOUND HERE]

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/utf-8 [v1.0]

UTF8 = {
	encode: function(s){
		for(var c, i = -1, l = (s = s.split("")).length, o = String.fromCharCode; ++i < l;
			s[i] = (c = s[i].charCodeAt(0)) >= 127 ? o(0xc0 | (c >>> 6)) + o(0x80 | (c & 0x3f)) : s[i]
		);
		return s.join("");
	},
	decode: function(s){
		for(var a, b, i = -1, l = (s = s.split("")).length, o = String.fromCharCode, c = "charCodeAt"; ++i < l;
			((a = s[i][c](0)) & 0x80) &&
			(s[i] = (a & 0xfc) == 0xc0 && ((b = s[i + 1][c](0)) & 0xc0) == 0x80 ?
			o(((a & 0x03) << 6) + (b & 0x3f)) : o(128), s[++i] = "")
		);
		return s.join("");
	}
};

Example

var s = "aáéíóúe";
document.write(
	('UTF8.encode("' + s + '") = ').bold(), UTF8.encode(s), "<br />",
	('UTF8.decode(UTF8.encode("' + s + '"))) = ').bold(), UTF8.decode(UTF8.encode(s))
);

to javascript utf8 convert conversion decode jonas encode charset ascii utf decoder encoder ansi jsfromhell raoni by jonasraoni on Mar 30, 2008

TimeLine //JavaScript Class

Simulates the Adobe Flash timeline. You define the amount of frames, the speed in fps (frames per second) and, at each frame passage an event is called, useful for animations.

[UPDATED CODE AND HELP CAN BE FOUND HERE]

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/classes/timeline [v1.0]

TimeLine = function(fps, f){
	this.fps = fps, this.frames = f;
};
with({o: TimeLine, $: TimeLine.prototype}){
	o.timers = [];
	$.running = !!($.current = +(o.timer = $.time = null));
	o.run = function(){
		var o = this;
		o.timer || (o.timer = setInterval(function(){
			for(var h, d = +(new Date), t = o.timers, i = t.length; i--;){
				(!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) > t[i].current + 1 &&
				t[i].onframe(++t[i].current), t[i].current >= t[i].frames)) &&
				(h = t.splice(i, 1)[0], h.stop(1));
			}
		}, 1));
	};
	$.start = function(c){
		var o = this, t = TimeLine;
		if(o.running) return;
		o.running = true, o.current = c || 0;
		o.time = new Date, o.onstart && o.onstart();
		if(!o.onframe || o.frames <= 0 || o.fps <= 0)
			return o.stop(1);
		t.timers.push(this), t.run();
	};
	$.stop = function(){
		var o = this;
		o.running = false;
		if(!TimeLine.timers.length)
			TimeLine.timer = clearInterval(TimeLine.timer), null;
		arguments.length && o.onstop && o.onstop();
	};
}

Example


<div id="box" style="position: absolute; top: 100px; background: #efe; width: 100px; height: 100px">25 fps</div>
<div id="box2" style="position: absolute; top: 300px; background: #ff9; width: 100px; height: 100px">12 fps</div>

<strong>TimeLine working together with the ease in quad function.</strong><br />

<script type="text/javascript">
Math.ease = function (t, b, c, d) {
	if ((t /= d / 2) < 1)
		return c / 2 * t * t + b;
	return -c / 2 * (--t * (t - 2) - 1) + b;
};

var o = new TimeLine(25, 50), d = document, b = d.getElementById("box");
o.onframe = function(){
	b.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o.onstart = function(){
	d.body.appendChild(d.createTextNode("Started"));
};
o.onstop = function(){
	d.body.appendChild(d.createTextNode(" - Finished (" + (((new Date) - this.time)) + " msec)"))
	d.body.appendChild(d.createElement("br"));
	this.start();
};
o.start();


var o2 = new TimeLine(12, 50), b2 = d.getElementById("box2");
o2.onframe = function(){
	b2.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o2.onstop = function(){
	this.start();
};
o2.start();
</script>

to javascript time line animation timer jonas frame fps timeline jsfromhell raoni by jonasraoni on Mar 30, 2008

« Newer Snippets

Older Snippets »

Showing 1-10 of 413 total RSS

Popular @ dzone.com

Related Tags

Never been to DZone Snippets before?

Simple javascript XHR object with fix for missing onreadystatechange event in Firefox (for synchronous calls)

Replace working as PHP str_replace //JavaScript Function

Output JavaScript variables from PHP

YUI DataTable - Understanding ISO / SQL Date Time Formats

Using the mousewheel to zoom in or out an SVG document

Reference of keyCodes

Cursor object for easily changing cursor based on an event.

Point Inside a Polygon //JavaScript Function

UTF-8 Converter //JavaScript Object

TimeLine //JavaScript Class