Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Javascript (http://www.forosdelweb.com/f13/)
-   -   texarea expandible (http://www.forosdelweb.com/f13/texarea-expandible-590745/)

kaninox 27/05/2008 19:42
texarea expandible
 
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.... :ojotes:

Panino5001 27/05/2008 19:56
Respuesta: texarea expandible
 
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 27/05/2008 22:01
Respuesta: texarea expandible
 
yes master funciona del 1 se agradece....

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

:)

Panino5001 27/05/2008 22:07
Respuesta: texarea expandible
 
Los reemplazás por imágenes manteniendo los atributos id que tienen esos botones ;)

kaninox 27/05/2008 22:17
Respuesta: texarea expandible
 
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 27/05/2008 22:53
Respuesta: texarea expandible
 
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 27/05/2008 22:55
Respuesta: texarea expandible
 
(si necesitás la manito, agregá a las imágenes un style="cursor:pointer;")

kaninox 28/05/2008 22:01
Respuesta: texarea expandible
 
gracias man me has salvado :)


La zona horaria es GMT -6. Ahora son las 10:03.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.