Vivir y Aprender Web » douglas.velasquez http://viviryaprenderweb.com Desarrollo web, recursos y tutoriales sobre xhtml, css, javascript, jquery, php, ruby on rails, seo y diseño web Wed, 20 Apr 2016 06:22:22 +0000 es-ES hourly 1 https://wordpress.org/?v=4.1.41 Cómo Limpiar elementos flotantes (float) en CSS http://viviryaprenderweb.com/limpiando-elementos-flotantes/ http://viviryaprenderweb.com/limpiando-elementos-flotantes/#comments Wed, 11 Jan 2012 05:14:30 +0000 http://viviryaprenderweb.com/?p=65 ¿Cómo hacerlo? Ejemplo 1 El diseño de la página requiere de dos columnas: del lado izquierdo se despliega el contenido principal y del lado derecho se lista el menú principal. Regularmente si desearamos colocar dos o más columnas haríamos lo siguiente: El CSS 1 2 3 <style type="text/css"> div.clear { clear: both; } </style> El […]

La entrada Cómo Limpiar elementos flotantes (float) en CSS aparece primero en Vivir y Aprender Web.

]]> ¿Cómo hacerlo?

Ejemplo 1

El diseño de la página requiere de dos columnas: del lado izquierdo se despliega el contenido principal y del lado derecho se lista el menú principal.

Regularmente si desearamos colocar dos o más columnas haríamos lo siguiente:

El CSS

1
2
3

<style type="text/css">
  div.clear { clear: both; }
</style>

El HTML

1
2
3
4
5
6
7
8
9

<div id="content">
  <div id="left">
    Este contenido se despliega en el lado izquierdo
  <div>
  <div id="right">
    Este contenido se despliega en el lado derecho
  </div>
  <div class="clear"></div>
</div>

El único inconveniente es que para limpiar los elementos flotantes nos vemos en la obligación de colocar un div vacío a continuación de los elementos flotantes, tal como se muestra en el caso anterior, lo cual a veces puede ser un poco confuso y claro, ensuciar nuestro código HTML.

El CSS

1
2
3
4
5

<style type="text/css">
  .cleaner { *display: inline-block; }
  * html .cleaner { height: 1%; }
  .cleaner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }
</style>

El HTML

1
2
3
4
5
6
7
8
9

 
<div id="content" class="cleaner">
  <div id="left">
    Este contenido se despliega en el lado izquierdo
  <div>
  <div id="right">
    Este contenido se despliega en el lado derecho
  </div>
</div>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

La entrada Cómo Limpiar elementos flotantes (float) en CSS aparece primero en Vivir y Aprender Web.

]]> http://viviryaprenderweb.com/limpiando-elementos-flotantes/feed/ 0 Texto ‘Buscar’ por defecto http://viviryaprenderweb.com/texto-buscar-por-defecto/ http://viviryaprenderweb.com/texto-buscar-por-defecto/#comments Tue, 10 Jan 2012 05:12:56 +0000 http://viviryaprenderweb.com/?p=76 ¿Cómo hacerlo? Ejemplo 1 Colocamos un texto por defecto en la casilla de texto del buscador. Al cargar la página se coloca un texto por defecto (atributo «default») en la casilla de texto si esta se encuentra vacía. Al hacer clic en la casilla de texto, se quita el texto por defecto. Cuando se deja […]

La entrada Texto ‘Buscar’ por defecto aparece primero en Vivir y Aprender Web.

]]> ¿Cómo hacerlo?

Ejemplo 1

Colocamos un texto por defecto en la casilla de texto del buscador.

Al cargar la página se coloca un texto por defecto (atributo «default») en la casilla de texto si esta se encuentra vacía.

  • Al hacer clic en la casilla de texto, se quita el texto por defecto.
  • Cuando se deja la casilla de texto (eveto «blur»), se verifica el valor (atributo «value») de esta y si no se introdujo texto alguno se coloca el texto por defecto (atributo «default»).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      if(input.length > 0){
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      input.blur(function(e){
        if($(this).val() == ''){
          $(this).val(default_text);
        }
      });
 
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
    }
 
    init_input_search('search_by');
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      // verificamos si la casilla de texto con el 'id' indicado existe
      if(input.length > 0){
        // obtenemos el valor del atributo'default'
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        // evaluamos que se haya definido un texto por defecto para mostrar en caso
        // que la casilla de texto este en blanco; si es asi lo colocamos como valor de
        // la casilla de texto
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      // si se hace clic en la casilla de texto, se quita el texto por  defecto colocado al
      // cargar la página
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      // cuando la casilla de texto se deja, colocamos el texto por defecto solo en caso
      // que esta haya sido dejada en blanco
      input.blur(function(e){
        if(default_text != '' &amp;&amp; $(this).val() == ''){
          $(this).val(default_text);
        }
      });
    }
 
      // antes de enviar el formulario limpiamos la casilla de texto si al enviar el formuario
      // contiene el texto por defecto
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
 
    // inicializamos la casilla de texto
    init_input_search('search_by');
  });
</script>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

La entrada Texto ‘Buscar’ por defecto aparece primero en Vivir y Aprender Web.

]]> http://viviryaprenderweb.com/texto-buscar-por-defecto/feed/ 0