Archive

Archive for the ‘Web’ Category

Obtener valor(option) de elemento select al cambiar – jQuery

August 5, 2011 Leave a comment

HTML de ejemplo

 <select id="mySelect">
    <option value="1">option A</option>
    <option value="2">option B</option>
</select>
<br/>
<span id="iSelected">Hola</span>
 

jQuery para conseguir el option recien seleccionado:

 
$('#mySelect').change(function(){
    var $selectedOption = $(this).find('option:selected');
    var selectedLabel = $selectedOption.text();
    var selectedValue = $selectedOption.val();
    $('#iSelected').text(selectedValue + ' - ' + selectedLabel);
});

JsFiddle con el ejemplo

Cambiar el width de un input dependiendo de su entrada

July 20, 2011 Leave a comment

Hoy estaba mirando por la ventana, cuando repentinamente se me vino a la mente, jumm… por que no incrementar el ancho de un input dependiendo de la longitud de lo que se está escribiendo… entonces llegue a esto:

<input 
    onkeyup="this.style.width = this.value.length + 2 + 'ex';" 
    onkeypress="this.onkeyup();"/>

Es importante también definir en tu CSS los tamaños máximos y mínimos del input, para que no desaparesca ni tampoco cresca hasta el infinito de los infinitos

input{ min-width: 100px; max-width: 50ex;}

Y… pueden ver el ejemplo en jsfiddle

JavaScript simple form submit

July 20, 2011 Leave a comment

<form name="nombreForm" id="miFormulario">
</form>
<a href="#" onclick="document.nombreForm.submit()">oneWay</a> 
<a href="#" onclick="document.forms["miFormulario"].submit()">otherWay</a> 
<a href="#" onclick="document.forms[0].submit()">OMG3way?</a>  
Categories: JavaScript, Mini-tips, Web

Scroll to the top of the page with jQuery

March 30, 2011 Leave a comment


$('html').scrollTop(0);

Si quieres hacerlo que se vea como animado puedes hacer:

$('html').animate({scrollTop:0}, 'slow');

Propiedas que se heredan en CSS

May 5, 2010 Leave a comment

Heredan:

  • color
  • font
  • letter-spacing
  • line-height
  • list-style
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space
  • word-spacing

No heredan:

  • background
  • border
  • display
  • float and clear
  • height and width
  • margin
  • min- and max-height and -width
  • outline
  • overflow
  • padding
  • position
  • text-decoration
  • vertical-align
  • z-index

Fuente: W3 , CommunityMx

Categories: CSS, Diseño, Programación, Tips, Web

Páginas de CSS de mucha ayuda

April 19, 2010 Leave a comment
Categories: CSS, Diseño, Links, Tips, Web
Follow

Get every new post delivered to your Inbox.

Join 175 other followers