byteco.de » Javascript http://byteco.de In a world of 1s and 0s...are you a zero, or The One? Sat, 19 May 2012 12:24:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Firefox and Google Dictionary http://byteco.de/2011/07/18/firefox-and-google-dictionary/ http://byteco.de/2011/07/18/firefox-and-google-dictionary/#comments Mon, 18 Jul 2011 09:26:28 +0000 shiv http://byteco.de/?p=5491 There is an excellent extension by Google for Chrome browser, Google Dictionary.

The idea is that you selected a word and the extn will lookup meaning of it on Google Dictionary and provide a nice hover info containing meaning and other details.

I searched Firefox for such simple extension but couldn’t find one. So I created a very basic user script based on Google Dictionary.

The script will lookup the selected word meaning in Google Dictionary and uses javascript alert to show meaning. Its very basic and works for me :)

Here is a github gist url – Google Dictionary user script

]]> http://byteco.de/2011/07/18/firefox-and-google-dictionary/feed/ 0 Change Google Apps – GMail Logo http://byteco.de/2009/12/11/change-google-apps-gmail-logo/ http://byteco.de/2009/12/11/change-google-apps-gmail-logo/#comments Fri, 11 Dec 2009 13:30:55 +0000 shiv http://byteco.de/2009/12/11/change-google-apps-gmail-logo/ In Google Apps hosted GMail, when using themes, GMail logo is not changed. If your organization logo is not transparent then it will be distracting for some themes.

I am using Fluid app for GMail and since it supports Userscripts, you can use following userscript.


// ==UserScript==
// @name        change logo
// @namespace   http://fluidapp.com
// @description Changes Google Apps GMail logo.
// @include     *
// @author      Someone
// ==/UserScript==

window.addEventListener('load',(function () {
    if (window.fluid) {
		if(window.parent!=null && window.parent.parent!=null && window.parent.parent.document.getElementById("canvas_frame")!=null)
		{
			frmDocument= window.parent.parent.document.getElementById("canvas_frame").contentDocument;
			var gLogo=frmDocument.getElementById(":rh");
			if(gLogo!=null && gLogo.tagName=="DIV")
/*
Use following URL for converting image to base64

http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/Default.aspx

*/			gLogo.style.setProperty("background-image","url(data:image/image_type;base64,<<PASTE BASE64 DATA HERE>>)","important");
		}
    }
}),true);


]]> http://byteco.de/2009/12/11/change-google-apps-gmail-logo/feed/ 1 Mochikit http://byteco.de/2006/03/22/mochikit/ http://byteco.de/2006/03/22/mochikit/#comments Thu, 23 Mar 2006 02:37:18 +0000 shiv http://shivprasad.wordpress.com/2006/03/22/mochikit/ The image “http://www.mochikit.com/images/i_logo.gifâ€? cannot be displayed, because it contains errors.

MochiKit is a highly documented and well tested,
suite of JavaScript libraries that will help you get shit done, fast.
We took all the good ideas we could find from our Python, Objective-C,
etc. experience and adapted it to the crazy world of JavaScript.

Visit

]]> http://byteco.de/2006/03/22/mochikit/feed/ 0 Behaviour – Better Smarter Javascript http://byteco.de/2006/02/23/behaviour-better-smarter-javascript/ http://byteco.de/2006/02/23/behaviour-better-smarter-javascript/#comments Fri, 24 Feb 2006 01:45:55 +0000 shiv http://shivprasad.wordpress.com/2006/02/23/behaviour-better-smarter-javascript/ The image “http://bennolan.com/behaviour/logo.gifâ€? cannot be displayed, because it contains errors.

AJAX
(asynchronous javascript and xml) has been getting a lot of press lately. It
is seen as a way to add desktop-application functionality to html pages. Things like
Drag and drop,
Fluid animations and
Dynamic page updates.
The better way to do javascript is to do it unobtrusively.

Behaviour lets you use CSS selectors to specify elements to add javascript events to.

Visit

]]> http://byteco.de/2006/02/23/behaviour-better-smarter-javascript/feed/ 0 Rico – JavaScript for Rich Internet Applications http://byteco.de/2006/02/23/rico-javascript-for-rich-internet-applications/ http://byteco.de/2006/02/23/rico-javascript-for-rich-internet-applications/#comments Fri, 24 Feb 2006 01:40:28 +0000 shiv http://shivprasad.wordpress.com/2006/02/23/rico-javascript-for-rich-internet-applications/ The image “http://openrico.org/images/ricologo.gifâ€? cannot be displayed, because it contains errors.

Rico is an open-source JavaScript library for creating rich internet applications.Rico provides full Ajax support, drag and drop management and a cinematic effect library.

Here is a how Ajax feature is implemented:

Technorati Tags:

]]> http://byteco.de/2006/02/23/rico-javascript-for-rich-internet-applications/feed/ 0 Prototype – JavaScript Framework http://byteco.de/2006/02/23/prototype-javascript-framework/ http://byteco.de/2006/02/23/prototype-javascript-framework/#comments Fri, 24 Feb 2006 01:34:28 +0000 shiv http://shivprasad.wordpress.com/2006/02/23/prototype-javascript-framework/ The image “http://prototype.conio.net/images/prototype.pngâ€? cannot be displayed, because it contains errors.

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring
a unique, easy-to-use toolkit for class-driven development and the
nicest Ajax library around, Prototype is quickly becoming the codebase
of choice for web application developers everywhere.

Visit

Technorati Tags:

]]> http://byteco.de/2006/02/23/prototype-javascript-framework/feed/ 0 DWR – Direct Web Remoting http://byteco.de/2006/02/20/dwr-direct-web-remoting/ http://byteco.de/2006/02/20/dwr-direct-web-remoting/#comments Mon, 20 Feb 2006 17:37:07 +0000 shiv http://shivprasad.wordpress.com/2006/02/20/dwr-direct-web-remoting/ DWR reduces development time and the likelihood of errors by
providing commonly used functions and removing almost all of the
repetitive code normally associated with highly interactive web sites.

DWR is freely available as open source software.
It is straightforward to implement with extensive libraries, examples
and tutorials. Incorporating it into existing sites is simple as it
readily integrates with the most commonly used Java frameworks.

Visit

]]> http://byteco.de/2006/02/20/dwr-direct-web-remoting/feed/ 0 Dojo – AJAX Edition http://byteco.de/2006/02/20/dojo-ajax-edition/ http://byteco.de/2006/02/20/dojo-ajax-edition/#comments Mon, 20 Feb 2006 17:35:07 +0000 shiv http://shivprasad.wordpress.com/2006/02/20/dojo-ajax-edition/ The image “http://dojotoolkit.org/img/splash-intro.gifâ€? cannot be displayed, because it contains errors.

What is Dojo?

Dojo is the Open Source JavaScript toolkit that helps you build
serious applications in less time. It fills in the gaps where
JavaScript and browsers don’t go quite far enough, and gives you
powerful, portable, lightweight, and tested tools for constructing
dynamic interfaces. Dojo lets you prototype interactive widgets
quickly, animate transitions, and build Ajax requests with the most
powerful and easiest to use abstractions available. These
capabilities are built on top of a lightweight packaging system, so
you never have to figure out which order to request script files in
again. Dojo’s package system and optional build tools help you
develop quickly and optimize transparently.

Dojo also packs an easy to use widget system. From prototype to
deployment, Dojo widgets are HTML and CSS all the way. Best of all,
since Dojo is portable JavaScript to the core, your widgets can be
portable between HTML, SVG, and whatever else comes down the pike.
The web is changing, and Dojo can help you stay ahead.

Dojo makes professional web development better, easier, and faster.
In that order.

Visit

]]> http://byteco.de/2006/02/20/dojo-ajax-edition/feed/ 0 moo.fx http://byteco.de/2006/02/20/moofx/ http://byteco.de/2006/02/20/moofx/#comments Mon, 20 Feb 2006 17:27:49 +0000 shiv http://shivprasad.wordpress.com/2006/02/20/moofx/ The image “http://moofx.mad4milk.net/img/header_.gifâ€? cannot be displayed, because it contains errors.

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.

It’s easy to use, fast, cross-browser, standards compliant, provides controls to modify Height, Width, and Opacity with builtin checks that won’t let a user break the effect with multiple crazy clicks. It’s also optimized to make you write the lesser code possible.

]]> http://byteco.de/2006/02/20/moofx/feed/ 0 Draggable Windows Using Javascript http://byteco.de/2005/10/04/draggable-windows-using-javascript/ http://byteco.de/2005/10/04/draggable-windows-using-javascript/#comments Tue, 04 Oct 2005 06:15:47 +0000 shiv http://shivprasad.wordpress.com/2005/10/04/draggable-windows-using-javascript/ This is a POC similar to the Google’s Personal Homepage.

Drag Me
The core JavaScript language has matured.
It has been standardized and is used in a wider variety of environments than it was previously.
The collapse of Netscape’s market share has allowed the universe of desktop web browsers to expand,
and JavaScript-enabled web browsers have also become available on non-desktop platforms.

Some problems for this on Firefox due to wordpress.
Click here to open the example.


And the code is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.dragWindow
{
	display:block;
}
table.dragWindowTable
{
	border: 1px solid orange;background-color: #FFDECE;font:10px verdana;
}
td.dragWindowTableHeader
{
	background-color: #FFB591;
	cursor: move;
	-moz-user-select:none;
	user-select:none;
	text-align: left;
}
</style>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
// Window Drag 0.1 Proof Of Concept - Google Personal Homepage
// THE SCRIPT IS UNDER GNU/GPL.
// http://shivprasad.wordpress.com/
// Tested on IE6 and Firefox 1.x

	var startX=0;		// Holds the window's start X position
	var startY=0;		// Holds the window's start Y position
	var endX=0;			// Holds the current dragged window's X position
	var endY=0;			// Holds the current dragged window's Y position
	var tmpX=0,tmpY=0;
	var animCount=0;
	var level=5;
	var isDrag=false;
	var dragElement='';

	function findY(obj)
	{
		var y = 0;
		while (obj)
		{
			y += obj.offsetTop;
			obj = obj.offsetParent;
		}
		return y;
	}
	function findX(obj)
	{
		var x = 0;
		while (obj)
		{
			x += obj.offsetLeft;
			obj = obj.offsetParent;
		}
		return x;
	}

	/*
	* This starts the actual drag
	*/
	function beginDrag(e)
	{
		if(isDrag)
		{

			document.body.style.MozUserSelect='none';
			document.body.style.userSelect='none';
			if(typeof e=="undefined")e=window.event;
			document.getElementById("dragWin").style.top=e.clientY;
			document.getElementById("dragWin").style.left=e.clientX;
			document.getElementById("dragWin").innerHTML=dragElement.innerHTML;
			endX=e.clientX;
			endY=e.clientY;
			return false;
		}

	}

	/*
	* This ends the drag
	*/
	function endDrag(e)
	{
		if(isDrag)
		{
			document.body.style.MozUserSelect='text';
			document.body.style.userSelect='text';
			document.onmousemove=null;
			document.onmouseup=null;
			if(typeof e=="undefined")e=window.event;
			moveToOrigin();
			if(Math.abs(endX-startX)>level)
			{
				tmpX=endX-startX;
				tmpX=tmpX/level;
			}
			if(Math.abs(endY-startY)>level)
			{
				tmpY=endY-startY;
				tmpY=tmpY/level;
			}
			isDrag=false;
			return false;
		}
	}

	/*
	* Moves back the dragged window to original position
	*/
	function moveToOrigin()
	{
		if(animCount==level)
			{
				document.getElementById("dragWin").innerHTML='';
				return false;
			}
		animCount++;
		endY=endY-tmpY;
		endX=endX-tmpX;
		document.getElementById("dragWin").style.top=endY;
		document.getElementById("dragWin").style.left=endX;
		window.setTimeout("moveToOrigin()",50);
	}

	/**
	*	Sets the dragging elements and kicks of the drag.
	*/
	function setDragElement(drag,e)
	{
		if(typeof e=="undefined")e=window.event;
		target=(typeof e.target=="undefined")? e.srcElement: e.target;
		if(target.className!="dragWindowTableHeader")
			return false;
		dragElement=drag;
		document.onmousemove=beginDrag;
		document.onmouseup=endDrag;
		startX=findX(dragElement);
		startY=findY(dragElement);
		animCount=0;
		isDrag=true;
		return false;
	}
//-->
</script>
<div id="dragableDiv" class="dragWindow" onmousedown="setDragElement(this,event)">
<table border=0 class="dragWindowTable"  cellpadding="0" cellspacing="0" width="250">
		<tr>
			<td class="dragWindowTableHeader" width="100%">
			<strong>Drag Me</strong>
			</td>
		</tr>
	<tr>
		<td>
			The core JavaScript language has matured.
			It has been standardized and is used in a wider variety of environments than it was previously.
			The collapse of Netscape's market share has allowed the universe of desktop web browsers to expand,
			and JavaScript-enabled web browsers have also become available on non-desktop platforms.
		</td>
	</tr>
</table>
</div>
<div id="dragWin" style="position:absolute;filter:alpha(opacity=80);opacity:0.8;-moz-user-select: none;user-select: none;"></div>
</BODY>
</HTML>
]]> http://byteco.de/2005/10/04/draggable-windows-using-javascript/feed/ 0