Dynamische lengte text input

[Stefanos1990]

Hallo mensen,

ik heb een probleem: ik maak een zoekscriptje voor een google gadget.
een tekst vak en een zoek-knop
hieronder een stukje uit de code:
<input name="searchit" value="" type="text" size="25">

het probleem is de size. op mijn resolutie (1280*800) is grootte 25 perfect.
maar op kleinere resoluties is het text vak dan zo groot dat de zoek-knop wegvalt.

als ik de size verklein naar 10 dan doet ie het ook tot 800*600, maar dan heb je miniscuul vakje op grotere resoluties. Een andere mogelijke oplossing is om de hoogte van de gadget te verhogen zodat bij een kleinere resolutie de gadget op 2 regels staat ipv 1, maar ik wil de gadget eigenlijk gewoon zo compact mogelijk houden.

is er een manier dat ik de lengte van het tekstvak dynamisch kan krijgen?

bedankt,
Stefan

 

[mrniceguy2002]

Het dynamisch krijgen van de lengte zou met javascript kunnen.

Ik weet de preciese code niet, maar die zal vast via google te vinden zijn.

Je zou dan de grootte van de browser (die hoeft niet altijd full-screen te zijn) op moeten vragen, dit vermenigvuldigen met een grootte van je input-scherm. De grootte van je invulscherm is dan de uitkomst..

Anders zou je ook kunnen proberen met css de grootte van het scherm kunnen veranderen.

de eenvoudigste manier is <input name="searchit" value="" type="text" style='width:100px;'>
Let wel op! de grootte via css is in pixels, door simpel width="25" neer ze zetten, gaat het uit van 25 tekens, dit hangt dan weer af van de grootte van je lettertype.

 

[jeroendenoot]

CSS is hier inderdaad denk ik geschikter voor dan Javascript (wat overigens ook kan).
Je kunt met CSS ook een percentage opgeven als breedte. Dan kun je de zoekknop ook beter een percentage geven, en wel het resterende deel. Voorbeeld:

<input type="text" ... style="width:80%" /><input type="submit" ... style="width:20%" />

Succes ermee. :thumb:
(Toevallig, ik ben op het moment ook bezig met het schrijven van een Google Gadget.)

 

[Stefanos1990]

Bedankt allebei, om de een of andere rede lukte het me niet met css. zal wel iets zijn in de rest van de code dat ervoor zorgde dat het niet werkte. maar toen heb ik dus javascript geprobeerd, en daarmee werkte het ook wel heel goed. dus bedankt

 

[mrniceguy2002]

Zou je dan even de code kunnen posten =)

heb ik er ook weer wat bijgeleerd =))

 

[Stefanos1990]

die javascript bedoel je?
tuurlijk.

Dit heb ik nu, maar ik moet het nog even omschrijven zodat de size gewoon een variabele is. Ik gebruik het script in een iframe, dus vandaar de kleine getallen.

<SCRIPT language="JavaScript">

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

if (winW>=472)
{
document.write('<input name="searchit" value="" type="text" size="28">')
}
else if  (winW>=366)
{
document.write('<input name="searchit" value="" type="text" size="25">')
}
else if  (winW>=319)
{
document.write('<input name="searchit" value="" type="text" size="18">')
}
else if  (winW>=284)
{
document.write('<input name="searchit" value="" type="text" size="12">')
}
else if  (winW>=234)
{
document.write('<input name="searchit" value="" type="text" size="3">')
}
else if  (winW>=207)
{
document.write('<input name="searchit" value="" type="text" size="4">')
}
else
{
document.write('<input name="searchit" value="" type="text" size="2">')
}

</SCRIPT>

ik heb het getest met firefox 2, IE 7 en opera 9, alleen op opera doet ie het nog niet, maar ik weet nog niet waarom.

 

[jeroendenoot]

Misschien dat het werkt als je dat ene stukje veranderd in:

if (document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
} elseif (window.innerWidth) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}

 

[Stefanos1990]

jah, maar ik zie nu ook dat ik geen else gebruikt heb voor andere browsers dan IE en firefox.
na een aanpassing in jou code is het dit geworden, werkt op alledrie de browsers:

if (document.body.offsetWidth) 
{
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
} else
{
 winW = window.innerWidth;
 winH = window.innerHeight;
}

 

[jeroendenoot]

Oh ja, de fout in mijn code was dat elseif niet bestaat in javascript, dat had else if moeten zijn. In de war met PHP. Als je er dat van maakt is het beter.

if (document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
} else if (window.innerWidth) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}

 

[Stefanos1990]

jah, maar de if is niet nodig, want hij pakt toch automatisch de onderste dan.