Przycisk rozwijania formularza

[Maq 73]

Witam,

 

zna ktoś jakiś skrypcik który po naciśnięciu przycisku rozwija pole textearea? Chodzi mi o to żeby formularz płynnie rozszerzył się na wysokość, może to być coś w jQuery.

Szukałem czegoś takiego, ale niestety co najwyżej znalazłem pasek na zasadzie przeciągnij i upuść, a interesuje mnie przycisk obok formularza który za każdym naciśnięciem powiększał pole tekstowe o zdefiniowaną z góry ilość pikseli.

 

Ktoś pomoże?

 

Z góry dzięki.

[Gość Kamikadze]

Spróbuj coś takiego:

 

 

<form method="post">
   <input type="text" name="nazwa" /><br>
       <input type="text" name="nazwa" /><br>


<div style="margin-top:5px">
<div class="quotetitle">
    <input type="button" value="Rozwiń" style="width: 50px; font-size: 10px; margin: 0px; padding: 0px;" onclick="
	    if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '')
	    {
		    this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = '';
		    this.innerText = '';
		    this.value = 'Zwiń';
	    }
	    else
	    {
		    this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none';
		    this.innerText = '';
		    this.value = 'Rozwiń';
	    }
    " />
   </div>
   <div class="quotecontent" style="display: none; background-color: #E6E6FA;">

   <textarea name="nazwa" cols="10" rows="10">Tu wpisz tekst który pojawi się domyślnie</textarea>


</div>
</div>



       <br><input type="text" name="nazwa" />


</form>

 

Przetestuj i dostosuj wg. swoich potrzeb

[Maq 73]

@Kamikadze, dzięki za zainteresowanie, ale chodziło mi nie chowanie całkowite formularza czy jego odkrywanie, a powiększanie już widocznego pola o zdefiniowaną ilość pikseli, po każdym kliknięciu.

 

Próbowałem coś pokombinować z skryptem co zapodałeś, ale z mizernym skutkiem, jednak to może z powodu mojej znajomości JS

[pietrovek 19]

eee...ja go inaczej zrozumiałem..więc może o to chodzi:

<form method="post">
   <input type="text" name="nazwa" /><br>
    <input type="text" name="nazwa" /><br>


<div style="margin-top:5px">
<div class="quotetitle">
	    <input type="button" value="rozszerz pole" style="width: 50px; font-size: 10px; margin: 0px; padding: 0px;" onclick="
					    var h=document.getElementById('nazwa').style.height;
          	 document.getElementById('nazwa').style.height=parseInt(h.replace('px',''))+20;

	    " />
   </div>
   <div class="quotecontent" style="display: block; background-color: #E6E6FA;">

   <textarea name="nazwa" id="nazwa" style='height:100px;'>Tu wpisz tekst który pojawi się domyślnie</textarea>


</div>
</div>



    <br><input type="text" name="nazwa" />


</form>

[Gość Kamikadze]

Nie zrozumiałem Przepraszam

 

Masz tutaj +/- (powiększanie i zmniejszanie)

 

<center>
<form method="post">
<textarea style="width: 300px; height: 200px;" id="text"></textarea>
<script type="text/javascript">
function zoomPlus(co, ile){
   area=document.getElementById(co).style.height;
   a=parseFloat(area);
   newArea=a+ile;
   document.getElementById(co).style.height=newArea;
}
function zoomMinus(co, ile){
   area=document.getElementById(co).style.height;
   a=parseFloat(area);
   newArea=a-ile;
   document.getElementById(co).style.height=newArea;
}
</script>
<br>
<a href="javascript:void(null)" onclick="zoomPlus('text', 50)">+</a> <a href="javascript:void(null)" onclick="zoomMinus('text', 50)">-</a>


</form>

</center>

[Maq 73]

@pietrovek - tak, właśnie o coś takiego chodziło, dzięki.

@kamikadze - teoretycznie ten Twój drugi skrypt też by się nadał po usunięciu minusa , bo nawet na niego nie mam miejsca odpowiedniego na stronie , a przycisk jest w formie graficznej do tego skrypcik od @pietrovek wygląda na lżejszy, jednak dzięki za zainteresowanie.

[Gość Kamikadze]

Zajrzałeś chociaż w skrypt ode mnie? Jest opcja wstawienia obrazka graficznego (np. plusik obrazkowy lub zmiany napisu)

Możesz nawet umieścić gdzie chcesz ten przycisk

 

Możesz wywalić minusa jak go w ogóle nie chcesz.

 

Popatrz sobie jeszcze raz w kod i nie przekopiuj bezmyślnie!

 

 

Zobacz sobie coś takiego:

 

 

<center>
<table>
<tr>
<td valign="top" width=250>

<form method="post">
<textarea style="width: 300px; height: 200px;" id="text"></textarea>
<script type="text/javascript">
function zoomPlus(co, ile){
   area=document.getElementById(co).style.height;
   a=parseFloat(area);
   newArea=a+ile;
   document.getElementById(co).style.height=newArea;
}
function zoomMinus(co, ile){
   area=document.getElementById(co).style.height;
   a=parseFloat(area);
   newArea=a-ile;
   document.getElementById(co).style.height=newArea;
}
</script>
<br>

</form>
</td>
<td valign="top" width=250>
Menu:<br>
<a href="javascript:void(null)" onclick="zoomPlus('text', 50)"><img src="http://www.supermatma.ayz.pl/wp-content/uploads/2010/01/1104.png" border=0></a> <br>
</center>

 

Nie masz minusa, plus dałem byle gdzie, jako obrazek z innej strony. PODSTAWY HTML

[Maq 73]

Przeczytałeś dokładnie co napisałem? Skrypt od @pietrovek jest lżejszy, u niego wystarczy tylko przy obrazku wrzucić jedną linijkę

 

onclick="var h=document.getElementById('nazwa').style.height;document.getElementById('nazwa').style.height=parseInt(h.replace('px',''))+20; "

bez bawienia się np. w funkcję. ustalam jeszcze tylko odpowiednie ID formularza i jest git

 

A HTMLa znam , baa, wszystkie moje projekty walidują się poprawnie jako xHTML 1.0 Strict

Akurat nie znam JS, ale za to znam inne języki jak np. PHP, nie każdy może być biegły we wszystkich możliwych językach programowania

 

 

Tak w ogóle jak już wywaliłeś przycisk MINUS, to warto byłoby wyrzucić też kod JS do którego się odwołuje on

 

function zoomMinus(co, ile){
area=document.getElementById(co).style.height;
a=parseFloat(area);
newArea=a-ile;
document.getElementById(co).style.height=newArea;
}

bo widzę że trochę śmietnik się zrobił w kodzie który dałeś w ostatnim swoim poście

Edytowano Listopad 18, 2011 przez Maq (zobacz historię edycji)

[Gość Kamikadze]

Bo się trochę zirytowałem i na szybko wywaliłem

 

Zapomniałem usunać js