Terve
Väsäsin sivustoa jolla tarvitsen jQueryä lomakkeiden muotoiluun. Noh, linkkasin jQueryn ja oman (toimivan) koodini head-tagien sisällä. Koodi käsittelee sivustolla olevaa input-kenttää, mutta jos linkkaan koodin ennen input-kenttää, sillä ei ole vaikutusta kenttään.
Koodin rakenne menee näin.
<html>
<head>
<script src="jquery.js"></script>
<script src="omakoodi.js"></script>
</head>
<body>
<input ...>
</body>
</html>Se kenttää käsittelevä pätkä näyttää tältä.
$("input").focus(function() {
$(this).animate({
width: "150px"
}, 1500 );
});
$("input").blur(function() {
$(this).animate({
width: "100px"
}, 1500);
});Jos linkitän oman koodini vasta inputin määrittelyn jälkeen, se toimii. Nyt kun se on linkitetty head-lohkossa ennen inputtia, se ei toimi. Missä vika?
(Mod. huom: script-tagit kannattaa sulkea, jotta väritys toimii.)
Vika on tietenkin siinä, että input-elementtiä ei ole vielä tuossa vaiheessa. Yleensä JS-koodi on viisainta laittaa funktioon ja ajaa vasta, kun koko dokumentti on ladattu, ks. jQuery.ready.
$(function() {
$("input").focus(...);
});Tämä ei ole mitenkään jQuery-spesifinen asia vaan pätee kaikkeen JS-koodiin. Ilman kirjastoja kuunneltaisiin suoraan DOMContentLoaded-tapahtumaa tai vanhanaikaisemmin load-tapahtumaa.
$(document).ready(function() {
$("input").focus(function() {
$(this).animate({
width: "150px"
}, 1500 );
});
$("input").blur(function() {
$(this).animate({
width: "100px"
}, 1500);
});
});Edit: Korjattu versio, hyvä huomio Meta!
qeijo: Koodissasi on vakava virhe. Löydätkö? (Muutenkin täytyy vähän ihmetellä, miksi edes kirjoitit, kun ei ollut näköjään mitään sanottavaa.)
Kiitos teille vastauksista. qeijolla on nähtävästi ylimääräiset lainausmerkit document-sanan ympärillä.
Jatkan vielä vähän samaan tekstikenttään liittyen. Mistä johtuu, että esimerkiksi tällä sivulla keskimmäisessä input-kentässä pysyy normaalit reunat kun se on aktiivinen, mutta kun itse laitan tuolle inputilleni otline: none, häviävät nekin reunat, jotka tuossa näkyvät?
input-kentän on tarkoitus tomia kuten tässä Wordpress-teemassa. Kenttäni suurenee klikatessa, pienenee kun se ei ole aktiivinen ja siinä on pyöristetyt reunat (tämä taitaa olla CSS3-jippo, joka toimii nähtävästi uusimmilla selaimilla). Nyt kun CSS:ssä lukee
input:focus {
outline: none;
}niin aktiivisena koko reunusta häviää.
Ei outlinen pitäisi mitenkään vaikuttaa borderiin. Tarkista koodisi.
Taas kerran linkki sivullesi olisi huomattavasti hyödyllisempi kuin selitykset tai linkit muille sivuille.
Auts, onnistuinkin mokaamaan tässä kohtaa hienosti: Koitin häivyttää omin avuin outlinea määrittelemällä borderin nollaksi, ja sellainen oli jäänyt aikaisempaan kohtaan koodia. No, sieltä se löytyi ja nyt se toimii.
Kiitos.
Muokkaus. Linkki tosiaan olisi hyödyllinen, mutta palvelin pyörii omalla kotikoneella, eikä sinne pääse ulkomaailmasta. Olisihan sen voinut lähettää jonnekkin webhotelliin näkyviin..
Aihe on jo aika vanha, joten et voi enää vastata siihen.