NetBeans IDE 6.0 Released - Includes Ruby Support

Tagged:  

NetBeans has released version 6.0 of their development IDE. Here's the announcement on their site:

NetBeans.org is proud to announce the availability of NetBeans IDE 6.0! Download now.

The focus of NetBeans IDE 6.0 is superior developer productivity with a smarter, faster editor, and the integration of all NetBeans products into one IDE. NetBeans IDE 6.0 features Ruby/JRuby/Ruby on Rails support, enhancements for improved Swing development, a new Visual Game Designer, updated Data Binding support, integrated Profiling, and more. The new installer lets you customize your download preferences--use it to choose the features and runtimes you need.

The NetBeans IDE is a modular, standards-based, integrated development environment (IDE) written in the Java programming language. The NetBeans project consists of an open source IDE and an application platform, which can be used as a generic framework to build any kind of application.

Among the many new features and enhancements, the IDE now supports Ruby/JRuby/Ruby on Rails.


  • Project Support. Quickly create Ruby projects with logical structure, run Ruby files, configure other Ruby interpreters (such as JRuby or native Ruby), locate and install Ruby Gems through a graphical wizard, create and execute unit tests, run RSpec specification files, jump between a Ruby file and its corresponding unit test or spec file, and so on. View Demo.
  • Advanced Ruby Editing. Advanced code editing for Ruby, using semantic information about the program to offer code completion, showing available classes and methods for the current expression, along with the associated RDoc documentation. The syntax highlighting is enhanced with semantic information, such that unused local variables and parameters are shown in gray. There are many other editing features, including Goto Declaration for jumping to the declaration point of a class or method reference. View Demo.
  • Ruby Debugger. Single-step or run through Ruby code, set breakpoints, look at local variables, navigate the call stack, switch threads, and evaluate expressions by just hovering the mouse over the variable in the Editor. There is also support for the "fast debug" extension.
  • Ruby on Rails Support. Generate Rails projects, or generate code through the Rails code generator graphical wizard, which offers documentation on the plugins within the wizard itself. Third party generators are also supported. Furthermore, there are actions for jumping quickly between a Rails action and its corresponding View, or warping to the browser for the URL most relevant to the file you are editing. Database migrations and Rake targets are supported as well. Finally, RHTML files are highlighted (along with improved NetBeans 6.0 support for related files, such as JavaScript and CSS). View Demo.

Other features include:

  • Editor Improvements
  • Easier Installation and Upgrading
  • Swing GUI Development
  • Profiling
  • Web and Java EE
  • Mobility
  • SOA
  • UML
  • C/C++
  • NetBeans Platform API Improvements



Click here to read more about these features or to download the new IDE.


Easy Chat Integration with the Gabbly API

Gabbly is a free chat solution that can easily be added to your web site or application. Gabbly is an Ajax based chat application that has an API that uses iframes to integrate the chat application into your site or applications. Below I have put some of the most useful portions of the API.

The following section shows how you would make the chat window size as you would like:

Window Modifications

Present Window Width

pw= (width in pixels)

This specifies the width of the window that lists the gabbers. If the width is less than 78, it is automatically changed to 0 which has the window closed(but can be opened by clicking the arrow). If no present width is specified, the default is 78 pixels.

Example:

<iframe src='http://cw.gabbly.com/gabbly/cw.jsp?e=1&t=gabbly&pw=100' scrolling='no' style='width:300px; height:250px' frameborder='0'>

The following would change the default user name of the user entering the chat. This could be useful if you have users login so you could pass in their username.

Default Nickname

nick = (name)

When a user joins the chat, the nickname field is prepopulated with this value.
If no nick is specified, the default nickname is gabberXXX where XXX is a random number.

Example:

<iframe src='http://cw.gabbly.com/gabbly/cw.jsp?e=1&t=gabbly.com&nick=ed' scrolling='no' style='width:300px; height:250px' frameborder='0'>

The following disables the users ability to change their chat name which could be very useful in certain applications.

Disable name change

dnc = true

If the value is true, the 'name change' field is disabled and the user can't change his or her nickname during the chat.
Any other value, or no value will have the 'name change' field active.

Example:

<iframe src='http://cw.gabbly.com/gabbly/cw.jsp?e=1&t=gabbly.com&dnc=true' scrolling='no' style='width:300px; height:250px' frameborder='0'>

To check out the full Gabbly API click here.

Now that you have seen this there is no excuse not to have chat on your site. So, if you add Gabbly chat to your site I'd love to here about it. Just leave the url in the comments and I'l check it out.

When Will We Start Seeing Major OpenID Support?

OpenID is a great idea as it moves us closer to not having to remember a million user id's and passwords. Way back in February of this year Kevin Rose of Digg.com announced that Digg would be supporting OpenID later this year (click here to read about the original announcement). At the time I was very excited, but unfortunately it doesn't look like we will be seeing it this year (unless one of you readers knows something that I don't).

This got me looking around at various popular social networks and web applications and the only major site that I have found that allows for OpenID login is DZone (which make since as it is a social network for developers). As for the other major social networks (such as YouTube, MySpace and Facebook), unfortunately there has been no adoption of OpenID.

Hopefully early next year we will see Digg.com put OpenID functionality on the site. This would make it the largest Social network (and one of the top sites on the internet, according to Alexa it is currently ranked 117) to place OpenID functionality on the site. Once this is done hopefully many more sites like MySpace and GMail will follow suite and the web will start to become a place where we can always have a single sign on (except perhaps on Microsoft affiliated sites). Well, I can always hope at least.

diggopenid.png

Debugging Your JavaScript Code the Easy Way

Tagged:  

When developing Ajax applications finding a good JavaScript debugger is very important. If you have ever tried to debug JavaScript in Internet Explorer you know how bad the error messages can be. This has been the reason that many developers have thought of JavaScript as only good for a couple of effects (such as rollovers). The error console in Firefox does a much better job of actually pointing you in the right direction, but this can be better. Below is a list of good tools that will help ease the pain of JavaScript debugging.

The first good tool for debugging JavaScript is JSLint. JSLint is a free web application where you copy and paste your code into the site and it will check the code for you line by line. It does a good job of catching quite a few errors and will recommend some good coding practices. Unfortunately, the site will just list your errors and you have no options to step through your code.

jslint.jpg

The next tool is the Venkman debugger in Firefox. Venkman does a good job of finding errors and is closer to a traditional debugger. Venkman is a free plug in for Firefox that comes packaged with the browser, but when you install it you have to select the correct options to install it. The plug in can also be downloaded from Mozilla's site. The debugger allows for you to step through your code and gives a good overview of what is being called in the code. Venkman is a very good tool when you are chasing down a pesky bug in your code.

walkthrough-overview-large.gif

The third debugger is Firebug. While on the surface Firebug is very similar to Venkman (they are both browser plug ins for Firefox and both offer good step through functionality) where Firebug really differentiates itself is that it can find some obscure problems in your code that most debuggers would not catch. Firebug also has some great functionality where you can set break points only when a certain condition is met.

firebug.jpg

The last debugger is for the MyEclipse Pro IDE and is called the Eclipse JavaScript Debugger. The JavaScript debugger is pretty good and it gives you more of an IDE feel when your are doing your debugging. The debugger is part of the Ajax Workbench which gives you some great tools to debug your Ajax applications. The biggest downside to this toolkit is that it is not free for the debugger nor the IDE (since it requires the MyEclipse Pro IDE). This debugger is mainly useful for large enterprises as they will be more likely to pay for this type of tool.

This is just a quick roundup of what I think are some of the best JavaScript debuggers. While there are more debuggers available (such as included in Tibco's General Interface) these are some very good debuggers that are useful to most developers. If you use a debugger that is not mentioned here I would love to hear about it, so leave it in the comments.

Building Interactive Prototypes with jQuery

Tagged:  

John Resig, creator and lead developer of jQuery, recently gave a talk at @Media Ajax on jQuery and has posted his presentation on his blog. As he puts it - the talk ranges from the absolute basics to building and using plugins - it's definitely worth checking out.



Click Here to Download the PDF

John also posted example links mentioned in his talk (w/source code) including the source code to a completed Ajax social networking site example.

To read more about this presentation, check out John's blog.

Dynamic Loading of JavaScript without using Eval

In trying to create faster loading Ajax applications it is important to reduce the amount of code that is downloaded. One of the best ways to accomplish this is to dynamically load JavaScript as you need it. This will allow that the initial load time is very short.

There are a few ways to accomplish this. One is to have multiple JavaScript files that are loaded using either eval or DOM manipulation (since I am of the school of eval is evil I will use DOM manipulation). The other is to have a server side script (such as a php or ruby script) dynamically create the needed JavaScript based on parameters that are passed through the URL and once again it would be loaded using either eval or DOM manipulation.

No matter which method you choose to use the below code will work to dynamically load the JavaScript. For those of you who have read my post on the JSON Load Object without using Eval (Click here to read the article) the following code will look very familiar as the methods are very similar.

//Dynamic JavaScript Creation
var javascriptload=new Object();
javascriptload.CreateObject=function(codeholderid, url){
	this.codeholderid=codeholderid; //This is the id of the element to hold the script code
	this.url = url;
	this.loadjavascript(codeholderid, url);
};
javascriptload.CreateObject.prototype={
	loadjavascript:function(codeholderid, url){
		var JavaScriptCode=document.createElement("script");
		JavaScriptCode.setAttribute('type', 'text/javascript');
	        JavaScriptCode.setAttribute("src", url);
		document.getElementById(codeholderid).appendChild(JavaScriptCode);
	}
};

In the above code you would pass in the id of the element to hold the JavaScript (this can be a div, body tag or any other tag that can hold a script tag) and you would pass in the URL to the JavaScript (either the separate JavaScript files or the dynamically created JavaScript).

Now that you have the object to dynamically load JavaScript go through your applications and reduce the initial load time in your Ajax applications. You might be surprised just how much faster you can get your applications to load.

Accordion Widget Using the Yahoo UI

Tagged:  

As you may know Yahoo has a great user interface JavaScript library. The accordion widget is on that can be used on quite a few sites, so I have put together a little demo of this element.

Below is the code to get to the libraries that are needed for much of the JavaScript code.

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b2.js" ></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/animation_2.0.0-b3.js"></script>

Below is the JavaScript code that is used to access the Yahoo UI when creating the elements and events.

var AccordionMenu =(function()
{
	var YUD = YAHOO.util.Dom;
	var YUE = YAHOO.util.Event;
	var oMenuSetting = {};
	var oMenuCache = {};
	var dLastHoverTitle ;
	YUD.addClass(document.documentElement,'accordion-menu-js');
	
	function getDT(e)
	{
		var dEl = YUE.getTarget(e);
			
		if(	(e.tagName + '').toUpperCase()=='DD' )
		{	
			var dt = e.previousSibling ;
			while(dt)
			{
				if(dt.tagName &&  dt.tagName.toUpperCase() == 'DT'){break;};
				dt = dt.previousSibling
			};
			
			if(!dt || dt.tagName.toUpperCase() != 'DT'){return;}
			else{return (dt.tagName==='DT')?dt:null};
		}
		else if(e.clientX)
		{
			var found = false;
			while( dEl.parentNode)
			{
				if(YUD.hasClass(dEl,'a-m-t')){ found  = true ; break;};
				dEl = dEl.parentNode;
			};
			if(!found){return null}
			else{return (dEl.tagName==='DT')?dEl:null };	
		};		
	};
	
	
	
	function getDD(dt)
	{
		if(!dt){return null;};
		var dd = dt.nextSibling ;
	
		while(dd)
		{	
			if(dd.tagName && dd.tagName.toUpperCase() == 'DD'){break;};
			dd = dd.nextSibling;
			
		};
		if(!dd || dd.tagName.toUpperCase() != 'DD'){return;}
		else{return dd};
	};
	
	function expand(dl,dt,dd)
	{
		dl.hasAnimation +=1;
		YUD.addClass(dd,'a-m-d-before-expand');		
		var oAttr = {height:{from:0,to:dd.offsetHeight }};
		
		YUD.removeClass(dd,'a-m-d-before-expand');
		
		var onComplete = function()
		{	
			oAnim.onComplete.unsubscribe(onComplete);
			oAnim.stop();
			YUD.removeClass(dd,'a-m-d-anim');
			YUD.addClass(dd,'a-m-d-expand');
			onComplete = null;	
			dl.hasAnimation -=1;
			var dt = getDT(dd);	
			YUD.addClass(dt,'a-m-t-expand');
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen && dd.style.height!='' )
			{	
				oMenuCache[ dl.id ].onOpen(	 {dl:dl,dt:dt,dd:dd} );								
			};	
			dd.style.height = '';
		
		};
		
		var onTween = function()
		{
			if(dd.style.height)
			{	
				YUD.addClass(dd,'a-m-d-anim');				
				oAnim.onTween.unsubscribe(onTween);
				onTween = null;
				dd.oAnim = null;
			};
			
		};
		
		if(dd.oAnim)
		{
			dd.oAnim.stop();
			dd.oAnim = null;
			dl.hasAnimation -=1;	
		};
		var oEaseType = YAHOO.util.Easing.easeOut;
		var seconds = 0.5;
		if(oMenuCache[ dl.id ] )
		{
			oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
			seconds =  oMenuCache[ dl.id ]['seconds'];
			
			if( !oMenuCache[ dl.id ]['animation'] )
			{
				var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
				onComplete();
				return;
			};
		};
		
		
		var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);
		oAnim.onComplete.subscribe(onComplete);	
		oAnim.onTween.subscribe(onTween);
		oAnim.animate();
		dd.oAnim = oAnim ;
	
	};
	
	function collapse(dl,dt,dd)
	{
		dl.hasAnimation +=1;
		YUD.addClass(dd,'a-m-d-anim');
		var oAttr = {height:{from:dd.offsetHeight,to:0}};
		
		
		var onComplete = function()
		{
			oAnim.onComplete.unsubscribe(onComplete);
			YUD.removeClass(dd,'a-m-d-anim');
			YUD.removeClass(dd,'a-m-d-expand');
			dd.style.height = '';
			dd.oAnim = null;
			onComplete = null;	
			dl.hasAnimation -=1;	
			var dt = getDT(dd);	
			YUD.removeClass(dt,'a-m-t-expand');	
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen )
			{				
				oMenuCache[ dl.id ].onClose(	 {dl:dl,dt:dt,dd:dd} );
			};			
			
		};
		
		if(dd.oAnim)
		{
			dd.oAnim.stop();
			dd.oAnim = null;
			dl.hasAnimation -=1;	
		};
		
		var oEaseType = YAHOO.util.Easing.easeOut;
		var seconds = 0.5;
		if(oMenuCache[ dl.id ] )
		{
			oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
			seconds =  oMenuCache[ dl.id ]['seconds'];
			if( !oMenuCache[ dl.id ]['animation'] )
			{
				var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
				onComplete();
				return;
			};	
		};
		
		var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);	
		oAnim.onComplete.subscribe(onComplete);	
		oAnim.animate();
		dd.oAnim = oAnim ;
	};
	
	function collapseAll(dl,dt,dd)
	{
		var aOtherDD = YUD.getElementsByClassName('a-m-d-expand','dd',dl);
		for(var i=0;i 0 ){return;};
		YUD.removeClass(dt,'a-m-t-down');
		
		if(YUD.hasClass(dd,'a-m-d-expand'))
		{	
			collapse(dl,dt,dd);
		}
		else
		{			
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
			else{collapseAll(dl,dt,dd);}
			expand(dl,dt,dd);
		};		
		YUE.preventDefault(e);
		return false;
	};
	
	
	YUE.on( document,'mouseover',onMenuMouseover);
	YUE.on( document,'mouseout',onMenuMouseout);
	YUE.on( document,'mousedown',onMenuMousedown);
	YUE.on( document,'click',onMenuClick);
	
  var oApi = {
  
	openDtById : function(sId)
	{
		var dt = document.getElementById(sId);
		if(!dt){return;};
		if(!YUD.hasClass(dt,'a-m-t')){return;};
		var dl = dt.parentNode;
		var dd = getDD(dt);
		if(dl.hasAnimation==null){dl.hasAnimation = 0;};
		
		if(dl.hasAnimation > 0 ){return;};
		if(YUD.hasClass(dd,'a-m-d-expand')){return;};
		if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
		else{collapseAll(dl,dt,dd);}
		expand(dl,dt,dd);
	},
	
	closeDtById : function(sId)
	{
		var dt = document.getElementById(sId);
		if(!dt){return;};
		if(!YUD.hasClass(dt,'a-m-t')){return;};
		var dl = dt.parentNode;
		var dd = getDD(dt);
		if(dl.hasAnimation==null){dl.hasAnimation = 0;};
		if(dl.hasAnimation > 0 ){return;};
		if(!YUD.hasClass(dd,'a-m-d-expand')){return;};
		collapse(dl,dt,dd);
	},
	
	
	setting : function(id,oOptions)
	{	
		if( !oOptions ){return;};
	
		if( typeof(id)!='string' ){return;};
	
		var setMunu = function(dl)
		{	
			dl = dl || this;
			dl.hasAnimation = 0;
			oMenuCache[ dl.id ] = 
			{
				element:dl,
				dependent:true,
				onOpen:function(){},
				onClose:function(){},
				seconds:0.5,
				easeOut:true,
				openedIds:[],
				animation:true
			};
			oMenu =  oMenuCache[ dl.id ] ;
			
			if(typeof(oOptions['animation'])=='boolean')
			{
				oMenu['animation'] = !!oOptions['animation']; 
				
			};
			
			
			if(typeof(oOptions['dependent'])=='boolean')
			{
				oMenu['dependent'] = !!oOptions['dependent']; 
			};
			
			if(typeof(oOptions['easeOut'])=='boolean')
			{
				oMenu['easeOut'] = !!oOptions['easeOut']; 
			};
			
			if(typeof(oOptions['seconds'])=='number')
			{
				oMenu['seconds'] = Math.max(0 , oOptions['seconds'] ); 
			};
			
			if(typeof(oOptions['onOpen'])=='function')
			{
				oMenu['onOpen'] = oOptions['onOpen'];
			};
			
			if(typeof(oOptions['onClose'])=='function')
			{
				oMenu['onClose'] = oOptions['onClose'];
			};
		
			if(oOptions['openedIds'].shift)
			{
				oMenu['openedIds'] = oOptions['openedIds'];
			};
			
			
			for(var i=0;i

The below is the css code that is used for the look and feel.

body{
       font-family:Verdana;
       font-size:0.78em;
       background:white;
       padding:30px;
       background:black;
       color:white;}
dl.accordion-menu dd .bd{
       font-size:0.75em;
       color:#aaaaaa;
}
xmp{
       color:#FF0099;
       margin:2em 0;
       font-size:1em;
       font-family:Tahoma;
       letter-spacing:1px;
}
div xmp{
       color:white;
}
a{
       color:#CCFF00
}
address{
       float:right;
}
address a{
        color:white;
}
h3{
        color:#66CCFF;
}
h4{
        color:#FFCC66;
}
dl.accordion-menu {
	margin: 0;
	padding: 0;
	width: 15em;
	background:white;
}

dl.accordion-menu dt.a-m-t {
	margin: 0;
	background: #aaaaaa;
	padding: 0.3em 1em;
	color: #444444;
	border: solid 1px #222222;
	border-left-color: #dfdfdf;
	border-top-color: #dfdfdf;
}

dl.accordion-menu dt.a-m-t-hover{
	background:#cdcdcd;
}


dl.accordion-menu dt.a-m-t-down{
	border: solid 1px #222222;
	border-right-color: #dfdfdf;
	border-bottom-color: #dfdfdf;
}





html.accordion-menu-js dt.a-m-t{
	cursor:pointer;
	zoom:1;
}

dl.accordion-menu dd.a-m-d {
	margin: 0;
	padding: 0;
	padding:0;
}

html.accordion-menu-js dd.a-m-d{
	display:none;
}


html.accordion-menu-js dd.a-m-d-expand {
	display:block;
}

html.accordion-menu-js dd.a-m-d-before-expand {
	display:block;
	position:relative;
	z-index:-1;
	opacity:0;
	height:auto !important;
	visibility:hidden;
	overflow:visible;
}


html.accordion-menu-js dt.a-m-t-expand {
	border-left-color:#222222;
	color:black;
	background:#c0c0c0;
}

html.accordion-menu-js dd.a-m-d-anim {
	overflow:hidden;
	display:block;	
}

dl.accordion-menu dd.a-m-d .bd{
	padding:0.5em;
	border:Solid 1px #aaaaaa;
}

The below is what actually makes the elements. The dt tag holds the titles and the div inside the dd tag holds text for each accordion element.

<dl class="accordion-menu"><dt class="a-m-t">title 1 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
		
	<dt class="a-m-t">title 2 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
		
	<dt class="a-m-t">title 3 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
</dl>

Click here to view the full demo. For more information and demos using the Yahoo UI click here.

Keeping Your JavaScript Small

As you know that with websites speed is very important. Unfortunately many good JavaScript libraries are rather large (many are over 40K). Even with many people having high speed internet connections you should still try to keep your application under 50K (including the design). This is one reason that some tools ,such as General Interface, have only been adopted in the enterprise as people are guaranteed to have a faster connection.

One of the things that can make a huge difference in JavaScript size is to remove white space. I personally use MemTronic's FREEWARE HTML/JavaScript Cruncher-Compressor (click here to go to the application). The tool has various levels of compression and can make your JavaScript pretty small and even obfuscate your code (of course don't delete your original code or it will be hard to edit). I've seen code reduced by up to 70% using the tool, which keeps more complex applications loading quickly.

memtronicpic.jpg

Try using the tool with your favorite JavaScript code and run some load tests, you'll probably even be able to notice the difference of load time. If you reduce your code, I'd love to hear how much smaller your code gets, so leave a comment of your results.

Google Maps adds Terrain View

Tagged:  

Google Maps has received an update - it now has a Terrain view. The option appears where the Hybrid button used to appear. Don't worry, they haven't gotten rid of Hybrid! It's now a part of the Satellite button (a checkbox appears below the button that allows you to toggle "Labels" - which are the street/road/highway/etc.. names).

Google Maps Options

Here's a view of San Francisco in Terrain View:
Google Maps Terrain View

And here's a view of the Grand Canyon in Terrain View:

Google Maps Grand Canyon

Take a trip over to Google Maps to play around with this new feature.

Calendar - A Javascript class for Mootools

Tagged:  

Calendar Logo

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.

Calendar has been successfully tested in Safari, Firefox, Opera and Internet Explorer. The class requires Mootools 1.1 with Fx.Style, Element and Window. In order to enable dragging, the class also requires the Drag component.

Features include:
* Style-able and semantic XHTML
* Future / past calendar restrictions
* Highly configurable use of inputs and selects
* Multi-calendar support (with padding)
* Variable navigation options
* Multi-lingual and fancy date formatting


Calendar

Example Usage:

Form element:

 <input id="date" name="date" type="text" />

Page header:

 <head>
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript" src="calendar.js"></script>
  ...
  <script type="text/javascript">
    window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });
  </script>
</head>

Click here for more information, a couple of demos, and to download the class.

Syndicate content