texarea expandible

kaninox · #1 (**permalink**) 27/05/2008, 19:42

he buscado pero los codigos que he visto no me funcionan :/ la idea es hacer un textarea expandible al igual como lo hace el de aqui... con unos botoncitos imagenes arriba abajo poder manejar el largo del textarea y que al igual que aqui si apreto mucho el hacerlo pequeño llegue hasta donde esta por defecto.....

espero se entienda mi idea....

Panino5001 · #2 (**permalink**) 27/05/2008, 19:56

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function $(id){ 
    return document.getElementById(id);     
} 
function addEvent(obj, evType, fn, useCapture){ 
  
 if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, useCapture); 
     
  } else if (obj.attachEvent){ 
    obj.attachEvent("on"+evType, fn); 
    
  } else { 
   obj['on'+evType]=fn; 
  } 
} 
var reng=5; 
function agregar(){ 
    $('quita').disabled=false; 
    reng=reng+5; 
    $('pp').rows=reng; 
} 
function quitar(){ 
    reng=reng-5; 
        if(reng<6){reng=5; 
        } 
    $('pp').rows=reng; 
} 
window.onload=function(){ 
    addEvent($('quita'), 'click', quitar, false); 
    addEvent($('agrega'), 'click', agregar, false); 
} 
</script> 
</head> 
 
<body> 
<form id="form1" name="form1" method="post" action=""> 
  <textarea id="pp" name="textarea" cols="60" rows="5"></textarea> 
  <input id="agrega" type="button" name="Submit" value="+" /> 
  <input id="quita" type="button" name="Submit2" value="-" /> 
</form> 
</body> 
</html>

kaninox · #3 (**permalink**) 27/05/2008, 22:01

yes master funciona del 1 se agradece....

mi pregunta es como puedo cambiar los botones + y - por imagenes .....

:)

Panino5001 · #4 (**permalink**) 27/05/2008, 22:07

Los reemplazás por imágenes manteniendo los atributos id que tienen esos botones ;)

kaninox · #5 (**permalink**) 27/05/2008, 22:17

haci lo hice y nada tambien probe con href id y onclick etc... :/

Código:


<a  id="agrega" onClick="agrega" href="#deta"> <img src="mas.jpg"  id="agrega" name="Submit" title="+" width="80" height="80"/></a>&nbsp;
 <a  id="quita" onBlur="quita" href="#deta"> <img src="menos.jpg" title="-"  id="quita" name="Submit2"  width="80" height="80"/></a>


cada uno solo y todo junto asi como se vee

Panino5001 · #6 (**permalink**) 27/05/2008, 22:53

Así funciona:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function $(id){ 
    return document.getElementById(id);     
} 
function addEvent(obj, evType, fn, useCapture){ 
  
 if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, useCapture); 
     
  } else if (obj.attachEvent){ 
    obj.attachEvent("on"+evType, fn); 
    
  } else { 
   obj['on'+evType]=fn; 
  } 
} 
var reng=5; 
function agregar(){ 
    $('quita').disabled=false; 
    reng=reng+5; 
    $('pp').rows=reng; 
} 
function quitar(){ 
    reng=reng-5; 
        if(reng<6){reng=5; 
        } 
    $('pp').rows=reng; 
} 
window.onload=function(){ 
    addEvent($('quita'), 'click', quitar, false); 
    addEvent($('agrega'), 'click', agregar, false); 
} 
</script> 
</head> 
 
<body><img id="agrega" src="http://www.forosdelweb.com/customavatars/avatar115517_1.gif" /><img  id="quita" src="http://www.forosdelweb.com/customavatars/avatar65984_1.gif" /> 
<form id="form1" name="form1" method="post" action=""> 
  <textarea id="pp" name="textarea" cols="60" rows="5"></textarea> 
</form> 
</body> 
</html>

(Lo único que hice es reemplazar los botones por imágenes, manteniendo los idis que tenían los botones)

Panino5001 · #7 (**permalink**) 27/05/2008, 22:55

(si necesitás la manito, agregá a las imágenes un style="cursor:pointer;")

kaninox · #8 (**permalink**) 28/05/2008, 22:01

gracias man me has salvado :)