Javascript: Mostrar código fuente de la página

El siguiente script habilita una forma en que los visitantes de tu página web pueden ver el código fuente. Es útil para aquellos sitios web que puedan estar enseñando desarrollo web y de esta forma ofrecer una forma fácil de acceder al código. La función es:

function VerFuente() {
		window.location = "view-source:" + window.location.href;
}

Un ejemplo de uso podría ser:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ver Código Fuente</title>
<script language=JavaScript>
function VerFuente() {
		window.location = "view-source:" + window.location.href;
}
</script>
</head>
<body>
	<p><a href=javascript:VerFuente()>Ver código fuente</a></p>
</body>
</html>

Javascript: texto no seleccionable

El siguiente código impide que el texto de una página web se pueda seleccionar. Obviamente no funcionará cuando el usuario tenga el javascript deshabilitado en el navegador.

<script type="text/javascript">
var Unselectable = {
	enable : function(e) {
		var e = e ? e : window.event;
		if (e.button != 1) {
			if (e.target) {
				var targer = e.target;
			} else if (e.srcElement) {
				var targer = e.srcElement;
			}
 
			var targetTag = targer.tagName.toLowerCase();
			if ((targetTag != "input") && (targetTag != "textarea")) {
				return false;
			}
		}
	},
	disable : function () {
		return true;
	} 
}
if (typeof(document.onselectstart) != "undefined") {
	document.onselectstart = Unselectable.enable;
} else {
	document.onmousedown = Unselectable.enable;
	document.onmouseup = Unselectable.disable;
}
</script>

Bookmarkleter

Esta herramienta crea bookmarklets a partir de código JavaScript. Las acciones que realiza son las siguientes:

  • Elimina los saltos de línea, tabuladores y espacios adicionales
  • Codifica caracteres especiales: [espacio],%, ", <,>, #, @,etc.
  • Coloca todo el código en una función contenedora (si esto no se ha hecho ya)

Bookmarkleter » »

jQuery: Cómo obtener las coordenadas del puntero del ratón

El siguiente código nos muestra la posición X e Y del puntero del ratón respecto a la página web.

<html>
<head>
<title>jQuery Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(document).mousemove(function(e){
			$('#posicion_cursor').html("Pos x : " + e.pageX + " | Pos y : " + e.pageY);
	});
});
</script>
</head>
<body>
<div id="posicion_cursor"></div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Testea el soporte a CSS3 con Javascript

Interesante código en javascript que testea el soporte de la propiedad CSS3 que se le especifique. Cuando se pasa la propiedad se debe omitir el guión. Por lo que si deseamos testear "border-radius", deberemos pasar "borderRadius" o "BorderRadius".

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }
      return false;
   };
})();

// EJEMPLO DE USO
if( supports('borderRadius')) {
  alert('Tu navegador soporta la propiedad border-radius');
}

Visto en » »