JavaHelp: Tips JavaScript

El Verdadero Javascript

Quiero darles unos tips muy comunes que me parece que volveré a utilizar sobre JavaScript y podrían serles útiles a ustedes también. Para los que no tienen mucha relación con este lenguaje [deberían =P], no es Java sino que está basado [o inspirado en] Java, por así decirlo, pero en realidad es un lenguaje web de lado de cliente y al ser Script no es tan estructurado como Java [todo esto en mis palabras y opinión].

1) JQuery

Para los que no saben que es JQuery es LA librería JS [JavaScript] con ésta puedes realizar múltiples efectos y manipulaciones de elementos HTML y varias cosas interesantes.
Dejo el siguiente bloque de código con el cuál importarás a tu sitio la última versión de JQuery

<!--JQUERY-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Para darte un ejemplo, con esta librería le di el efecto de ocultar/Mostrar a las entradas de la página de bienvenida

2) Imagenes redimensionables

Hace poco estuve trabajando con una imagen de fondo y me dio muchos problemas, lo que intentaba hacer era que la imagen de fondo de mi página no cambiara de ninguna forma si el usuario cambiaba la resolución [Ctrl+Rodillo es la más sencilla] la primera y más fácil solución fue la siguiente:

body2{
 background-image:url("/URL/miFondo.jpg");
 background-repeat:no-repeat;
 background-position:center center;
 background-attachment:fixed;
 -o-background-size: 100% 100%, auto;
 -moz-background-size: 100% 100%, auto;
 -webkit-background-size: 100% 100%, auto;
 background-size: 100% 100%, auto; 
}

La verdad no hay mucha información sobre esto en internet [¬¬ Google? u.u] y en parte por eso lo publico. El problema con esta solución tan simple es que funciona en todos los exploradores menos en uno, adivinen cuál? así que tuve que seguir buscando una solución para la versión 8 de IE [Probablemente esto si funcione para la 9], y me encontré con lo siguiente.

.imgFull{
 
 background-repeat:no-repeat;
 background-position:center center;
 -o-background-size: 100% 100%, auto;
 -moz-background-size: 100% 100%, auto;
 -webkit-background-size: 100% 100%, auto;
 background-size: 100% 100%, auto;
 
 min-width:100%;
 min-height:100%;
 
 width: 100%;
 height: 100%;
 position: absolute;
  left: 0%;
  top: 0%;
 
}

Como se darán cuenta esto no tiene Fondo, así que por fuerza se tendría que ser un <img> el elemento y toda esta implementación forzaría a que el resto de la información se manejara con posiciones absolutas me parece, así que no encontré una solución óptima para este problema, la ventaja fue que solo incluí 2 paneles y el otro simplemente lo puse de la siguiente forma, la cual lo deja perpetuamente centrado:

.imgCentrada{
 
 /*background: url("/URL/centrada.png");*/
 background-repeat:no-repeat;
 background-position:center center;
 -o-background-size: 100% 100%, auto;
 -moz-background-size: 100% 100%, auto;
 -webkit-background-size: 100% 100%, auto;
 background-size: 100% 100%, auto;
 
 min-width:50%;
 min-height:75%;
 
 width: 53.5%;
 height: 80%;
 position: absolute;
  left: 22.75%;
  top: 7.5%;    
}

3) Input Transparente

Quizás este tip no sea tan útil, pero igual lo pongo es una forma muy sencilla de desaparecer un input y aún así el usuario pueda escribir en él, sé que no hay muchos casos en los que sea necesario ya que hay campos password etc. pero igual lo dejo en CSS:

.transparente{
    font-size: 1em; 
    color: transparent; /* Fix for FF */ 
    border-style: none; 
    border-width: 0; 
    padding: 0 0 0 16px !important; /* Fix for IE */ 
    text-align: left; 
    width: 0px; 
    height: 0px; 
    line-height: 0 !important; 
    /*background: transparent url(images/button.gif) no-repeat scroll 0 0;*/ 
    overflow: hidden; 
    cursor: pointer; 
}

4) Google Code Prettify

Si en alguna ocasión necesitan hacer esto de pintar el código en web y poner las líneas de código etc. Google tiene una librería que lo hace y es muy simple descargas de acá la librería e implementarlo de la siguiente manera:

<!--SCRIPTS PARA CODE BEUTIFER DE GOOGLE-->
<link href="http://javahelp.redsaltillo.net/css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="google-code-prettify/src/prettify.js"></script>

<pre class="prettyprint linenums">
    Public class MiClasePrincipal extends Asterisk {}
    Public class MiEstado extends Estado {}
    
</pre>

Obviamente puedes modificar el css que trae la librería para que se adecue a tus necesidades [De cualquier manera allí viene el manual].
Acá pongo a tu disposición un demo y la librería.
Una cosa que puedes hacer es unir esto con JQuery de la siguiente manera, así no tendrías que estar poniendo la clase a cada bloque de 'pre':

<!--SCRIPTS PARA CODE BEUTIFER DE GOOGLE-->
<link href="http://javahelp.redsaltillo.net/css/prettify.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function() {

    // agrega clase prettyprint a todos los bloques // (tambien podemos agregar <code>)
    var prettify = false;
    $("pre").each(function() {
        $(this).addClass('prettyprint linenums');
        prettify = true;
    });

    // si se encontro bloques de código se llama la función prettyPrint
    if ( prettify ) {
        $.getScript("google-code-prettify/src/prettify.js", function() { prettyPrint() });
    }
});
</script>

5) Acentos en JavaScript

Hay veces que tenemos que hacer un document.write() desde JS pero a la hora de sacar acentos se chisquea, acá los códigos de los caracteres.

\u00e1 -> á
\u00e9 -> é
\u00ed -> í
\u00f3 -> ó
\u00fa -> ú

\u00c1 -> Á
\u00c9 -> É
\u00cd -> Í
\u00d3 -> Ó
\u00da -> Ú

\u00f1 -> ñ
\u00d1 -> Ñ

JavaHelp

miércoles, 6 de julio de 2011

Tips JavaScript

Seguidores