Tämä on jquery harjoitus sivu. Tässä on perusjuttuja

Double click event double click menu link to see the results

Tässä on normaali input field js tuo tämän toiminnon missä kentässä on vakio teksti joka poistuu kun lomaketta klikataan

Name:

Email:

Confirm email:

Tässä on järjestämätön lista. Input field toimii haku toimintona joka on case sensitiivinen

Tälläinen on hyödyllinen vaikka jos tuot paljon dataa DB:stä ja haluat etsiä pitkästä listasta tietyn osan

• kjkjlkjn
• lkjlkjlk
• lkjsljdf
• lkjdflsjkd
• lkjdljs

Form käyttäytymistä fieldin taustaväri muutetaan klikatessa ja kun painaa nappia sen value muuttuu ja se muuttuu disabled tilaan

Buttonin enabloiminen filen valinnan jälkeen

Click Event and Double Click event

Key UP and Key Down events Write in text feald to see result

Key Down tekee bugin missä kirjaumet tulee 1 perässä. Key UP korjaa sen

Change event handler, change value to see result

Submit event handler

Email news letter sing up

Btw, *Please enter email here* text comes from another jQuery code abowe

Toggle event handler click twise, click the link two times to see result

Hover event, Menu hover to see where are u going

Scroll Event handler Harjoitus 38 scroll to see result

Select event, Select text

Focus in and Out

Your name:

Your age:

Bind Event handler make text BOLD hover over the link

LIVE (Harjoitus 43)

Text area whit MAX lenght feedback counter

Harjoitus 47 Hide show DIV whit text and buttons

Harjoitus 48 - 52 Hover over Element

HTML Atribute , take html code from element and input to the element

Some text in here

Harjoitus 53 Val atribute

Harjoitus 54 ATTR atribute

A Link

Harjoitus 55 addClass to the element

This is some text here

Harjotus 56 Remove Class

Harjoitus 58 Remove Attr

I agree

Harjoitus 60 Each

Harjoitus 62 next / next all prev / prev all

• Erno
• Tuukka
• Nils
• Miika

Harjoitus 65 HAS Atribute

Jquery checks if there is a LI element or not. If not jqurty print empty menu text

Main Menu 1

Harjoitus 66 HIDE/SHOW + linear + callback

Harjoitus 68 FADE IN and OUT

Harjoitus 70 Fade Toggle

Harjoitus 71 Slide Down

Refrech the page to see result

Harjoitus 74 STOP

Harjoitus 75 Delay

I'm going to vanish, I'll be back !!!

Harjoitus 76 - 77 Gallery Fade Effect

Hover over the image

Harjoitus 78 , Append

Click button to see results

Your name is:

Harjoitus 81 Width / Height

Harjoitus 83 scrollTop

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Sun Moon Planet

Tämä harjoitus 85 on kommentoitu veke avaa se koodista. Se tuo mustan laatikon joka on aina keskellä ruutua ruudun koosta huolimatta

Harjoitus 87 Minimum text field lenght

5:

10:

Harjoitus 90 , Enable checkbox after scroll down

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

I agree to the terms and conditions

Harjoitus 92 inArray.

Erno Miika ja Tuukka on tallennettu ArrayListaan syötä nimi kenttään ja saat alert info. Jos laitat väärän nimen saat alert infon siitä ettei nimi löydy listasta

Harjoitus 93, Each

Syötä nimi kenttään ja se lisätään arrayihin

Harjoitus 94, NOW

now functiolla voi tuoda todella tarkan timestampin mukaan leikkin. Tässä on aika ja se päivittyy millisekunnin välein

Harjoitus 95, NOW + counting time

Miten pitkä aika on 12.8.2012 tästä hetkestä

Harjoitus 96 LOAD, Easy AJAX function and yes PHP too ;)

Harjoitus 97 , GET HTTP Request

Kun syötät sanan kentään jQuery tallentaa tiedon muuttujaan ja siirtää sen php tiedostolle ja palauttaa sen käännettynä väärinpäin

Harjoitus 98 , POST HTTP Request

Käytännössä ihan sama kuin GET mutta nyt käytetään POST komentoa. Tulos on silti sama

Harjoitus 100 , Other CallBack Functions

Harjoitus 101 , AJAX Load

Harjoitus 102 , AJAX Send DATA

Same but whit error handling, you need to change name of the file in code etc... to see alert

Harjoitus 105, AJAX Status codes ake, 404 page

Ylempi löytää sivun alempi ei

Harjoitus 106, Email validation form

PHP validates the address

Harjoitus 111, Update DATABASE

Settings

Name:

Harjoitus 116, Plugins, How to use them. In this example i used Show PassWord Plugin by: Byron Rode

Harjoitus 121, HighLight search plugin

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Harjoitus 125, Plugin CallBack functions

Harjoitus 127 - 133 , HoverText maid whit plugin

Tää harjotus on hankala. Joku ennalta tehty optio estää plugarin toiminnan

Harjoitus 133 - Countdown plugin

Harjoitus 140-145, jQuery UI, Drag

Ladattavat tarpeelliset setit http://jqueryui.com/

Huom! ilman optionsseja voit raahata tätä minne vain. Vaikka yli dokumentin

More Draggable options etc..

Rajoitetaan liikkumista

Vain X akselilla

Vain Y akselilla

Vain dokumentin sisällä !

Huom ! esim CSS body margin ei vaikuta tämän elmentin liikkumseen.

Parent, Liikkuminen elementin sisällä

Rajoitus kordinaateille X1, X2, Y1, Y2

Tässä tapauksessa 0,0,200,200

Huom tää siis lentää tonne ylös ;)

Cursor modifications

More that one option

Cursor change + opacity 60% while draggind

More that one option

Cursor change + opacity 60% while draggind + Grid

More that one option

Cursor change + opacity 60% while draggind + Revert 1000ms

More that one option

Cursor change + opacity 60% while draggind + Revert 1000ms + EVENT

Harjoitus 144 - 146 Droppable

Drag and DROP !

Harjoitus 147, Shortable

List 1

• Alex
• Billy
• Lisa

List 2

• London
• Helsinki
• Tallin

Sort list status

Harjoitus 149, Resizable

Ei toimi tässä dokumentissa mene katsomaan täältä

Ongelma on jossain tämän index html tai UI JS dokumentin sisällä. Joku muu scriptin pätkä ilmeisesti estää toiminnan

Harjoitus 152, Accordion

Harjoitus 154, Datepicker

Harjoitus 156, Dialog

Click the save button to see dialog

Harjoitus 159, Progressbar (nice)

Harjoitus 161, Slider

Harjoitus 163, Tabs

This page also uses 2 day cookie to store witch tab you have open. If you refresh the page active tab remains the same

Harjoitus 166, Drag and Drop Lists

UL - LI listasta voi raahata tiedon toiseen diviin. Tämä ei sinäänsä suoraan toimi ostoskorina , koska diviin menee vain teksti tieto li elementtien välistä

Harjoitus 168, Check if a Username is Abailable

Type username , code check if it's in DB

Reserved usernames are, Erno , Niko and Nilly