¿Y por qué no? - Programación JavaScript y ActionScript

Muy interesante esta librería de JavaScript que nos permite personalizar la ventanita de info que aparece cuando hacemos click sobre una burbuja de Google Maps.

Es muy completa y está muy bien documentada.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Aquí dejo un ejemplo, cargo los datos de las burbujas de un json externo para que sea mas facil meter mas datos:
Este ejemplo solo funciona subido a un servidor en desde el localhost, debido a la seguridad a la hora de cargar archivos externos.
Descargar Ejemplo Infobox

Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:

var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
 
jQuery("body").bind(clickEvent, funcionClick);

Otro plugin maravilloso que me ha enseñado hoy Javi es Emmet, para escribir a toda leche CSS en Sublime Text 🙂
Ahora basta con poner

w50

pulsar tabulador, y él te pone

width: 50px;

Mola eh? 🙂

Aquí toda la documentación: http://docs.emmet.io/cheat-sheet/

Para instalarlo como cualquier otro plugin de Sublime, abrimos la paleta Command

Abrimos el paquete instalador

E instalamos el Emmet:

Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.

He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D

Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.

$(document).bind("mousemove", (function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}));

Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂

 
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
	mouseX = $(document).width()*0.5 + e.beta*10;
	mouseY = $(document).height()*0.5 - e.gamma*5;
}, true);

Descargar el ejemplo completo

Me flipa el Sublime Text para editar código, y estos son mis preferencias y mis atajos de teclado sin los cuales ya no puedo vivir 🙂

Setting:

{
	"bold_folder_labels": true,
	"close_windows_when_empty": true,
	"color_scheme": "Packages/Material Color Scheme/sublime/material-dark.tmTheme",
	"create_window_at_startup": false,
	"detect_indentation": false,
	"detect_slow_plugins": false,
	"font_face": "LucidaGrande",
	"font_size": 17.0,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"CSSLint",
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"open_files_in_new_window": false,
	"tabSize": 6,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": false,
 	"line_padding_bottom": 2
}

Keybindings:

[
	{ "keys": ["super+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} },
	{ "keys": ["alt+up"], "command": "swap_line_up" },
	{ "keys": ["alt+down"], "command": "swap_line_down" },
	{ "keys": ["super+alt+down"], "command": "duplicate_line" },
	{ "keys": ["super+shift+c"], "command": "toggle_comment", "args": { "block": true } },
	{ "keys": ["super+b"], "command": "toggle_side_bar" },
	{ "keys": ["ctrl+shift+f"], "command": "reindent"},
	{ "keys": ["super+alt+r"], "command": "show_panel", "args": {"panel": "replace"} },

	{ "keys": ["super+space"], "command": "auto_complete" },
	{ "keys": ["super+space"], "command": "replace_completion_with_auto_complete", "context":
		[
			{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
			{ "key": "auto_complete_visible", "operator": "equal", "operand": false },
			{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
		]
	}
]

He encontrado este plugin de jQuery para hacer el típico scroll que desaparece cuando no se está usando. Sobre todo mola porque es super fácil de usar y de tunnear 🙂

http://areaaperta.com/nicescroll/demo.html

jQuery(".contenedor").niceScroll({cursorwidth:"8px", cursoropacitymax:0.5});