Creación de menú (UL) desde cero – 5 Animación JQuery

En los post anteriores hemos creado un menú básico horizontal utilizando listas no ordenadas, luego le agregamos submenús y también lo hicimos pegajoso al scrollear sobre la página. El día de hoy modificaremos el menú básico para hacerlo vertical y vamos a utilizar JQuery para animar (mostrar / ocultar ) el menú y mejorar la navegabilidad del sitio.

1.- Estructura básica del menú. Utilizaremos la misma estructura que hemos utilizado desde el inicio.  

 <div class="contenedorMenu">        
           <ul class="menu">
                 <li><a href="#inicio">Inicio</a></li>            
                 <li><a href="#seccion1">Sección 1</a></li>
                 <li><a href="#seccion2">Sección 2</a></li>
                 <li><a href="#seccion3">Sección 3</a></li>
        </ul>                        
 </div>

 

2.- Estilos para el menú. Utilizaremos las mismas reglas, solamente cambiaremos algunos estilos para hacerlo vertical.   Hasta este punto el menú se ve así: Menu JQuery

3.- Agregar elementos adicionales a la página. Vamos a incorporar un encabezado para el menú, este contendrá un botón en donde al hacer clic se mostrara u ocultara el menú. Antes del div class=”contenedorMenu” agregamos:

<div class=”encabezadoMenu”></div>
<div class=”botonMenu”></div>

y su correspondiente css

/*Estilos para el encabezado del menu*/            
.encabezadoMenu{ width:250px; height:70px; background-color:#2C2C30;}            
.botonMenu{width:37px; height:31px; background-image:url(‘Menu.png’); position:relative; top:20px; left:25px;}            
.botonMenu:hover{ cursor:pointer} ahora el menú se ve asi: Menu5_1 4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la versión mas reciente para trabajar nuestros proyectos. 5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente: -Inicialmente el menú debe estar oculto. -Al hacer clic sobre el botón, el menú deberá desplegarse y mostrarse completamente. -Al hacer clic nuevamente, el menú deberá contraerse y ocultarse completamente. Esto se implementará así: // <![CDATA[

    $(document).ready(function(){    
          $(“.contenedorMenu”).slideToggle(); /*Ocultar de inicio el menu*/
          /*Efecto del menu principal*/
          $(“.botonMenu”).click(function(event){ 
               event.stopPropagation(); 
              $(“.contenedorMenu”).slideToggle();  /*SlideUp o SlideDown dependiendo de su estado*/
        });            
  });    

// ]]>
menuAnimado El funcionamiento de SlideToggle, SlideUp y SlideDown puede estudiarse en la documentación oficial de JQuery. En el siguiente post, incluiremos el uso del scroll para ocultar el menú. Gracias

Juego del “Gato” en JQuery

Esta vez vamos a diseñar un juego, el famoso “Gato” para poder competir con algún amigo. Algunos problemas para la elaboración de este juego se solucionaron con la ayuda del libro “Programming with JavaScript: Algorithms and Applications for Desktop and mobile Browsers”.

Comencemos:

1.- Estructura html. En este caso no es nada complicada, solamente haremos uso de un div sobre el cual iremos agregando la estructura con la función append. Por ello es necesario agregarle un id con el cual vamos a hacerle referencia.

<div id=”gato”></div>

2.- Estilos del juego. En este caso no haremos uso de muchos estilos, simplemente para el identificador anterior y poder centrarlo, de modo que podamos ver mejor el tablero del juego.

<style type=”text/css”>
#gato{ width:250px;  margin:10px auto; }

</style>

3.- Agregar la referencia a la API de JQuery. Accedemos a la página de JQuery para agregar el query más actualizado.

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

4.- Implementar código JQuery. El siguiente es el código completo del script, posteriormente vamos a definir cada uno de sus elementos a fin de entenderlo.

<script type=”text/javascript”>
  $(document).ready(function () {
       var cuadritos = [];
       var puntos;
       var movimientos;
       var turno = “X”;
       var ganar = [7, 56, 448, 73, 146, 292, 273, 84];
       var jugar,ganador;

      $(function() {
var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);

               var indicador = 1;
               for (var i=0; i<3; i+=1) {
                              var fila = $(“<tr>”);
                              tablero.append(fila);
                              for (var j = 0; j <3; j += 1) {
                                          var celda = $(“<td height=50 width=50 align=center></td>”);
                                          celda[0].indicador = indicador;
                                          celda.click(function() {
                                                               if ($(this).html() !== ” “) {
                                                                          return;      
                                                                         }
                                                              $(this).html(turno);
                                                              movimientos =movimientos + 1;
                                                              puntos[turno] += $(this)[0].indicador;
                                                              if (ganador(puntos[turno])) {
                                                                         alert(turno + ” ha Ganado!!!”);
                                                                         }
                                                              else if (movimientos == 9) {
                                                                         alert(“Es un empate”);
                                                                          }
                                                              else {
                                                                       if(turno==”X”)
                                                                                      {turno=”O”;}
                                                                       else
                                                                                       {turno=”X”}
                                                                       }
                                              });
                                           fila.append(celda);
                                           cuadritos.push(celda);
                                           indicador += indicador;
                                 }
               }
   $(document.getElementById(“gato”)).append(tablero);
               jugar();
               });

jugar = function() {
                       turno = “X”;
                       puntos = {“X”: 0, “O”: 0};
                       movimientos = 0;
                       cuadritos.forEach(function(cuadro)
                                                             {cuadro.html(” “);
                                                         });
                   };

ganador = function(puntos) {
                           for (var i=0;i<ganar.length;i+=1) {
                                           if ((ganar[i]&puntos)==ganar[i]){
                                                       return true;
                                                        }
                             }
                            return false;
                      };
});
</script>

5.- Entendiendo el script de JQuery. La función principal, como ya sabemos, comienza con el

$(document).ready();

De modo que hagamos referencia al documento de nuestra página. Declaramos algunas variables que nos serán útiles.

Para determinar la condición de victoria cada cuadro se “etiqueta” de izquierda a derecha y de arriba abajo, con las sucesivas potencias de 2. Cada celda representa un valor de la potencia y dicho valor se le asigna al jugador que ocupa la casilla. Por lo tanto el ganador se puede determinar fácilmente comprobando si los valores de los jugadores han cubierto cualquiera de las combinaciones para obtener la victoria. Dichas combinaciones son las que pertenecen a la variable ganar:

273                 84

/

1 |   2 |   4  = 7

—–+—–+—–

8 |  16 |  32  = 56

—–+—–+—–

64 | 128 | 256  = 448

=================

73   146   292

De este modo llenamos la variable ganar con los valores con los que es posible ganar.

La siguiente función se encarga de dibujar el tablero haciendo uso del comando append, se utiliza todo entre la función $( ) pues de este modo se hace más simple seleccionar elementos y para poder hacer un callback de otras funciones (jugar y ganador) que se explicarán más adelante  y funciona de la siguiente manera:

  var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);

Define una variable con un código html que se encarga de dibujar nuestra tabla. El siguiente for se encarga de agregar las filas de nuestra tabla de acuerdo al tamaño que definimos

for (var i=0; i<3; i+=1) {
var fila = $(“<tr>”);

            tablero.append(fila);

Entendemos entonces que nuestro primer for se encarga de agregar las filas, requerimos que sea menor que 3 pues un “gato” no contiene más de 3 filas,  y se agregan con el comando append a la tabla como se mencionó anteriormente.

Del mismo modo que lo anterior, nuestro siguiente for agrega las celdas (necesitamos que sean 3 por fila) y a la primer celda (Celda[0]) le asigna el valor de 1, denotado como celda[0].indicador de modo que se asignen los valores a la matriz en potencias de 2 (20=1) como se explicó en la primera parte.

for (var j = 0; j <3; j += 1) {
var celda = $(“<td height=50 width=50 align=center></td>”);

                celda[0].indicador = indicador;

A continuación, y dentro de ambos for utilizamos la función click en la variable celda que nos permitirá realizar lo que necesitamos cuando se le de click a la celda

celda.click(function() {

Y una vez dentro de la función si se da click a un elemento que no esté vacío no queremos que ocurra algo, por lo que utilizamos el siguiente condicional:

if ($(this).html() !== ” “) {
return;

         }

En caso de que el elemento esté vacío mediante el uso de $(this).html(turno); nos encargamos de imprimir X o O de acuerdo al turno que corresponde. A continuación aumentamos los movimientos, pues se utilizan como condición para alcanzar un empate, es decir, si se alcanzan los 9 movimientos y no se ha declarado un ganador, automáticamente se determina un empate.

A continuación se suman los puntos que obtiene por presionar una casilla y se le asignan a turno, sea O o X:

puntos[turno] += $(this)[0].indicador;

Ahora, mediante condicionales se determinan las condiciones de victoria, primeramente, si los puntos sumados corresponden a alguno de la cadena ganador, entonces se determina que ha ganado el jugador del turno en curso. En caso de que no se haya determinado aún un ganador y se hayan alcanzado los 9 movimientos determina un empate con un alert. Y finalemente, si no hay ganador aún, cambia al turno del siguiente jugador.

if (ganador(puntos[turno])) {
alert(turno + ” ha Ganado!!!”);

       }
else if (movimientos == 9) {
              alert(“Es un empate”);
       }
else {
              if(turno==”X”)
                             {turno=”O”;}
              else
                             {turno=”X”}
          }

Y para terminar los cilcos for agregamos la celda a la fila con append, y el valor de la celda (en la que se hizo click) al arreglo cuadritos mediante la función push y aumentamos el indicador.

fila.append(celda);
cuadritos.push(celda);

indicador += indicador;

Terminamos la función llamando al documento y obteniendo el elemento por su identificador (nuestro único div) y le agregamos el tablero que se realizó anteriormente. Y llamamos a otra función llamada jugar();.

$(document.getElementById(“gato”)).append(tablero);
jugar();

FUNCIÓN JUGAR Y FUNCIÓN GANADOR

Estas funciones no son nada complicadas,  se declaran como variables para poder llamarlas dentro de la función principal, de modo que podamos hacer modificaciones al juego más rápidamente, además de que sera menos complicado entender como funciona el cambio de turnos y la búsqueda del ganador en el arreglo. La función jugar únicamente tiene la función de alternar los valores de O o X y de asignar a cada elemento de “cuadritos” un espacio en blanco.

jugar = function() {
turno = “X”;

                        puntos = {“X”: 0, “O”: 0};
                        movimientos = 0;
                        cuadritos.forEach(function(cuadro)
                                                              {cuadro.html(” “);}

Por último explicaremos la función ganador la cual, tal como lo dice su nombre, se encargará de determinar al ganador haciendo un recorrido mediante un for, de los valores con los cuales se obtiene la victoria mediante una condición if. Básicamente se encarga de determinar si la puntuación en cualquier momento es una puntuación ganadora y regresar un verdadero.

ganador = function(puntos) {
for (var i=0;i<ganar.length;i+=1) {

                                                   if ((ganar[i]&puntos)==ganar[i]){
                                                                      return true;
                                                            }
                          }
                       return false;
              };

Esperamos que este código sirva para entender el uso de algunas funciones y entender el callback entre funciones. Saludos!

Galería de imágenes con JQuery

A continuación se muestra un ejemplo de galería de imágenes utilizando el efecto de desvanecimiento y difuminación, utilizando estilos, y jquery.

Esta imagen muestra el diseño de la pagina en si.

imagen general de la pagina

imagen general de la pagina

Aquí se puede observar el efecto que se aplica, al hacer clic sobre una imagen aparecerá dicha imagen en el recuadro de la derecha (efecto de desvanecimiento) mientras el resto de las imágenes no seleccionadas se difuminan.

al dar click se aprecian estos efectos

al dar click se aprecian estos efectos

1) hacer referencia a la librería de jquery

<script src=“http://code.jquery.com/jquery-1.11.0.min.js”></script>


2) editaremos la parte de los estilos que para dar formato a la pagina

/*referencia a una fuente de google*/

href=’http://fonts.googleapis.com/css?family=Henny+Penny’ rel=’stylesheet’ type=’text/css’/>

<style type=”text/css”>

/*clase que edita el logo de inicio de la pagina*/


.principal{
width:200px;
height:200px;
}

/*clase que edita el titulo de la pagina */


.titulo{
width:1000px;
height:200px;
margin-top:-200px; margin-left:200px;
text-align:center;
font-size:80px;
color:white;
font-family: ‘Henny Penny’, cursive;
}

/*clase que edita el tamaño y borde que tiene cada imagen del menú (imágenes pequeñas)*/

.imCh2{
width:100px;
height:100px;
border:thin orange solid;
}

/*clase que edita el div que contiene cada una de las imágenes pequeñas*/

.imCh{
width:103px;
height:103px;
float:left;
}

/*clase que edita el div que contiene la imagen grande */

.imG{
width:400px;
height:400px;
margin-top:-425px;
margin-left:450px;
border:thin gray dashed;
}

/*clase que edita el tamaño de la imagen grande (imagen del efecto de desvanecimiento) */

.imG2{
width:400px;
height:400px;
}

/*clase que edita los títulos de separación en el menú*/


.subtitulos{
width:200px;
color:white;
text-align:center;
font-size:25px;
}

/*edita el cuerpo de la pagina*/

body{
background-color:black;
margin: 50px;
}


3) dar forma a la pagina utilizando html (body)

/*se crea el titulo con el logo de la pagina*/

<div>
<div><img class=”principal” src=”principal.jpg” alt=”” /></div>
<div class=”titulo”>Bienvenido a Hogwarts!</div>
</div>

 

/*se crea el menú de imágenes (para este caso son 8 y 2 subtitulos) cabe mencionar que para que este código funcione deben agregarse directorios reales en el atributo src de las imágenes*/

<div style=”width:206px; margin-left:200px; overflow:hidden;” >


<div class=”subtitulos”>Casas</div>
<div class=”imCh”><img class=”imCh2″ src=”g.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”s.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”h.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”r.jpg” alt=”” /></div>


<div class=”subtitulos” style=”margin-top:205px”> Profesores</div>
<div class=”imCh”><img class=”imCh2″ src=”dom.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”mcgo.jpg” alt=””/></div>
<div class=”imCh”><img class=”imCh2″ src=”snape.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”hagrid.jpg” alt=”” /></div>
</div>

 

/*colocamos la imagen grande que es la que va a ir apareciendo dependiendo de la imagen seleccionada (por default en este ejemplo se utiliza otra imagen)*/

<div class=”imG”><img class=”imG2″ src=”ini.jpg” alt=”” /></div>


4)Ahora si editaremos los efectos con jquery

<script type=”text/javascript”>
$(document).ready(funcion);

/*esta función genera el desvanecimiento y reaparición de cada una de las imágenes pequeñas osea el menú (desvanecer y reaparecer la imagen duran en conjunto el mismo tiempo del efecto de la imagen grande) */

function desvanece(){
$(“.imCh2”).each(function(){ 
/*se indica que para cada imagen del menú se realizaran las sig. animaciones*/

$(this).animate({opacity:0.15},10,function(){
 /*opaca la imagen en un tiempo de 10 ms*/

$(this).delay(900).animate({opacity:1},0); 
/*detiene la imagen opacada por 0.9 seg y luego la reaparece */

});
});
}

/*función principal donde se revisa sobre cual imagen se dio clic y se implementan las animaciones*/

function funcion(){


$(“.imCh2”).click(function(event){ 
/*se revisa el clic en cualquiera de las imágenes*/

$(“.imG2″).css({display:”none”});  
/*desaparece la imagen grande que se encuentre desplegada*/

var im=$(this).html($(this).attr(“src”)).text(); 
/*de la imagen donde se dio clic (this) se recupera el atributo src y se convierte en una cadena*/

switch(im){  
/*este switch se utiliza para aparecer un fondo diferente para cada una de las imágenes intercalado en el efecto*/


case “g.jpg”:$(“.imG”).css({background:”#6E1B17″}); break;
case “s.jpg”:$(“.imG”).css({background:”#386C26″}); break;
case “h.jpg”:$(“.imG”).css({background:”#94681E”}); break;
case “r.jpg”:$(“.imG”).css({background:”#072466″}); break;
case “dom.jpg”:$(“.imG”).css({background:”#4E6A81″}); break;
case “mcgo.jpg”:$(“.imG”).css({background:”#121C0D”}); break;
case “snape.jpg”:$(“.imG”).css({background:”black”}); break;
case “hagrid.jpg”:$(“.imG”).css({background:”#69493A”}); break;
}

/* aquí se aplica el efecto de aparecer la imagen grande gradualmente (fadeIn) , antes de que aparezca la imagen se ve el color de fondo seleccionado*/

$(“.imG2”).attr(“src”,im).fadeIn(1000);

/*manda llamar la función desvanece (explicada arriba)*/

desvanece();

/*debido a que desvanece() opaca todas las imágenes del menú con la sig. instrucción reaparece la imagen sobre la que se dio clic, este efecto tiene un tiempo de 0 seg para que no se note la transición*/

$(this).animate({opacity:1},0);
});
}
</script>




NOTA1: recordar que los script y style van dentro del <head>

NOTA2: la librería de jquery de la forma que aparece en este blog solo funciona al estar conectado a Internet, si se va a utilizar sin Internet es preciso descargar y guardar la librería en el mismo directorio donde se guardará la pagina.

Animacion de texto sobre imagen

Este es un efecto  para mostrar información de una imagen al pasar el cursor encima, se puede utilizar para agregarle atractivo a cualquier pagina, sobe todo si maneja muchas imágenes, este ejemplo esta echo para funcionar con 4 imagenes, veamos los pasos:

1.- HTML:

 Colocaremos un div por cada imagen que tendremos la cual contendrá los estilos que queremos agregar

<div class=”info c1″></div>

<div class=”info c2″></div>

<div class=”info c3″></div>

<div class=”info c4″></div>

y de igual manera insertar las imágenes que queramos:

<div class=”pic” id=”pic1″><img src=”pic1.jpg”/> </div> 

<div class=”pic” id=”pic2″> <img src=”pic2.jpg”/> </div>

<div class=”pic” id=”pic3″><img src=”pic3.jpg”/></div>

<div class=”pic” id=”pic4″> <img src=”pic4.jpg”/></div>

 

2.- CSS:

.pic{
     width: 250px;
     height: 400px;
    position:relative;
    float: left;
    border:10px black solid;
    margin-left: 20px ;
}

img {
      position : relative;
      width: 250px;
      height: 400px;
     z-index:-1;
}

le daremos un tamaño deseado a nuestras imágenes

 
.info{
height:50px;
position:absolute;
margin-left:10px;
top:-20px;
background-color:navy;
background-color: rgba(255, 0, 0, 0.2);
margin-top:160px;
text-align:center;
padding:10px 0px 0px 0px;
color:white;
font-family:”AR CHRISTY”
}

esta clase le dará nuestros estilos deseados al efecto

3.- SCRIPT

El primer paso sera esconder la información de la imagen:

$(“.c1 .c2 .c3 .c4”).hide();

Queremos que la información se despliegue al pasar el cursor del mouse, para ello obtendremos la altura (height) el ancho (width) de la imagen para adaptar nuestro efecto:

$(“.pic”).mouseover(function(){

var w = $(this).width();
var h = $(this).height();

y obtendremos el id de cada imagen como método para seleccionar la imagen con el cursor:

var ids = $(this).attr(“id”);

después, mostraremos el efecto de la información sobre la imagen:

if(ids==”pic1″){    // ids == pic2 pic 3 pic 4…
$(“.c1”).show().animate({height: h, top:-150,fontSize:5},200)
.animate({fontSize:22},2000).end();}

De la misma manera, se remueve el efecto al quitar el cursor: 

$(“.pic”).mouseleave(function(){

$(“.c1”).hide().animate({height:0, top:160,},0); } //.c2 c3 c4…..

Y listo!!. Un inconveniente de esta animación es adaptarlo acorde a otros tamaños de imagen, lo cual se puede solucionar cambiando las propiedades de las clases.

 

Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>

2.- Estilos para el menú. Utilizaremos los estilos generados en el primer ejercicio.

<style type=”text/css”>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=”pagina”>
            <div class=”encabezado”></div>
            <div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=”text/javascript” >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(“.encabezado”).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(“.contenedorMenu”).addClass(“sticky”);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(“.contenedorMenu”).removeClass(“sticky”);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

ASPX + TinyMCE

En algunas ocasiones es necesario crear aplicaciones web, cuyos formularios soliciten información a los usuarios (Eje: El registro a un diplomado virtual), en donde estos puedan agregar enlaces a alguna pagina, crear tablas para organizar contenidos, enumerar en lista algunas características o elementos, resaltar texto o hacerlo mas grande.

Claro!!!.. Las respuesta es un TextBox que tenga la propiedad de poder editar contenido como HTML. Ya que nativamente el control ASP TextBox no cuenta con esta propiedad, es necesario utilizar otras tecnologías como Ajax o en este caso JQuery.

Lo primero que necesitamos es descargar el plugin TinyMCE, un editor de contenido HTML muy popular, que además de todo cuenta con plugins para WordPress, Joomla, etc.

http://www.tinymce.com/tryit/basic.php

Agregamos el directorio tiny_mce a nuestro proyecto, que entre otras cosas continene:

Los archivos .js, los temas, lenguajes, etc.

Luego de esto, ubicamos el asrchivo donde irá el control HTML, y configuramos el plugin:

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions
,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste
,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
template,wordcount,advlist,autosave",


// Theme options
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft
,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,
|,tablecontrols",
theme_advanced_buttons2: "bullist,numlist,link,unlink,image,code",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,
sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|
,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

// Example content CSS (should be your site CSS)
// using false to ensure that the default browser settings are used for
best Accessibility
// ACCESSIBILITY SETTINGS
content_css: false,
// Use browser preferred colors for dialogs.
browser_preferred_colors: true,
detect_highcontrast: true,

// Drop lists for link/image/media/template dialogs
template_external_list_url: “lists/template_list.js”,
external_link_list_url: “lists/link_list.js”,
external_image_list_url: “lists/image_list.js”,
media_external_list_url: “lists/media_list.js”,
// Style formats
style_formats: [
{ title: ‘Bold text’, inline: ‘b’ },
{ title: ‘Red text’, inline: ‘span’, styles: { color: ‘#ff0000’} },
{ title: ‘Red header’, block: ‘h1’, styles: { color: ‘#ff0000’} },
{ title: ‘Example 1’, inline: ‘span’, classes: ‘example1’ },
{ title: ‘Example 2’, inline: ‘span’, classes: ‘example2’ },
{ title: ‘Table styles’ },
{ title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’ }
],

// Replace values for the template plugin
template_replace_values: {
username: “Some User”,
staffid: “991234”
}
});
</script>

Y finalmente el control que por default debe ser un textarea. Agregamos el
runat=”server” para verlo del lado del servidor y listo.

<body>
<form id="form1" runat="server">
<div>
<textarea runat="server" style="background-color:#000;
width: 300px" id="Texto" name="elm1" rows="15" cols="80"
></textarea>
</div>
</form>
</body>

Error “A potentially dangerous Request.Form value was detected”

Solucion 1:
Uso de las clases HTMLEncode y HTMLDecode.

http://blog.tentaclesoftware.com/archive/2012/05/21/asp-net-4-0-tinymce-and-
ldquoa-potentially-dangerous-request.aspx

Solucion 2:
Deshabilitar la RequestValidation.

Default.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="TinyMCE.Default" ValidateRequest="false">

Web.Config

<location path="Default.aspx">
<system.web>
<httpRuntime requestValidationMode="2.0" />
</system.web>
</location>

Gracias.