1 00:00:05,250 --> 00:00:11,550 So something else that we can do with Jake Query and Javascript basically as itself is do something 2 00:00:11,550 --> 00:00:16,190 call the events events are anything that you do with a degree you can interact with a browser. 3 00:00:16,200 --> 00:00:23,130 This could be as you mouse over a button it changes as you mouse if you click it it does something which 4 00:00:23,130 --> 00:00:27,630 is as you move your cursor over things to different acts like that are bats or things that happen within 5 00:00:27,630 --> 00:00:28,770 the browser window. 6 00:00:29,070 --> 00:00:34,580 So what to do is create some of those events using a query. 7 00:00:34,860 --> 00:00:42,270 So I use my last documentary I want to rename it here and to call the events save at the same location 8 00:00:42,270 --> 00:00:48,640 here and get rid of a bunch of these old commands through quick and still using the javascript. 9 00:00:48,720 --> 00:00:54,820 They're still using the first document ready function up here to get rid of the rest of the stuff in 10 00:00:54,820 --> 00:00:57,250 between here. 11 00:00:57,620 --> 00:01:07,930 Now I am going to ask you this text box area down here but instead of using Jake queery to stylize it 12 00:01:07,930 --> 00:01:11,760 I'm going to create just a little bit of basic CSSA here. 13 00:01:15,110 --> 00:01:24,240 And to target that idea just wrote where it can to say a text box to open and close that sucker. 14 00:01:25,130 --> 00:01:32,940 And when I say with say Turner 50 pixels maybe and give it a try. 15 00:01:33,190 --> 00:01:35,450 So when a group button here basically is what I'm doing. 16 00:01:35,460 --> 00:01:36,600 So height. 17 00:01:36,640 --> 00:01:39,230 Close to 50. 18 00:01:39,330 --> 00:01:40,860 You know I think this make it even smaller. 19 00:01:40,850 --> 00:01:46,210 Here is ticking down a little bit because it's a button it's not a big honkin area there and then maybe 20 00:01:46,210 --> 00:02:02,710 just give it a border one pixel solid black and maybe give the background color of ELAS blue shirt or 21 00:02:02,710 --> 00:02:03,330 whatever. 22 00:02:03,540 --> 00:02:03,840 OK. 23 00:02:03,880 --> 00:02:07,720 So we got that styled down there with a style sheet. 24 00:02:07,720 --> 00:02:08,080 OK. 25 00:02:08,350 --> 00:02:12,340 So the script is going to appear we're going to continue writing within here. 26 00:02:12,450 --> 00:02:18,310 So imma do is within the Dykeman's after the document is looked at and everything is ready then we can 27 00:02:18,310 --> 00:02:22,810 proceed with this and create a new Selecta right there. 28 00:02:22,810 --> 00:02:29,280 And this time we are going to create one that targets our text box. 29 00:02:29,470 --> 00:02:35,250 So we'll see a dollar sign excuse me countersigned text box. 30 00:02:35,980 --> 00:02:39,040 And what I want to do is give it an on event. 31 00:02:39,050 --> 00:02:43,780 Now have you done anything with the Photoshop or you can create these kind of like on mousehole or events 32 00:02:44,290 --> 00:02:46,740 or just on either javascript before. 33 00:02:46,930 --> 00:02:54,960 It's very very simple we just say we target that text box text box right down there and we say Ah. 34 00:02:55,260 --> 00:03:02,410 And we tell it what to do as somebody is on and so say and click event that is the event right there 35 00:03:03,250 --> 00:03:14,990 we say come on and say when the mouse is clicked and Mary close it out with a semi-colon. 36 00:03:15,100 --> 00:03:23,920 So a text box when somebody clicks and when the mouse is clicked and then we will also do another one. 37 00:03:24,430 --> 00:03:30,050 That's I retired in the same box here say a text box again. 38 00:03:31,510 --> 00:03:33,730 And again very similar to this type one appears. 39 00:03:33,730 --> 00:03:37,340 Forgot to put my hand side of the ID. 40 00:03:37,390 --> 00:03:45,680 Now again I would say in an event it's as mouse leave. 41 00:03:46,000 --> 00:03:49,330 I'm thinking of all that actually takes their mouse. 42 00:03:49,330 --> 00:03:51,130 Leave all lowercase there. 43 00:03:51,490 --> 00:04:05,080 And those quotes come will say when the mouse leaves camel case or when that mouse leaves and ran. 44 00:04:05,580 --> 00:04:08,230 So my colon there not all can do is. 45 00:04:08,230 --> 00:04:10,680 So you've got those two events that we just created up there. 46 00:04:10,720 --> 00:04:14,700 Once it clicks and once when the mouse leaves that area right there. 47 00:04:14,830 --> 00:04:20,440 What we're trying to do is create a function that says what to happen when something and when those 48 00:04:20,440 --> 00:04:21,660 two events happen. 49 00:04:21,970 --> 00:04:28,920 So say the function would do the first one when Mouse is clicked. 50 00:04:31,690 --> 00:04:34,440 Copy and paste it there so I have the exact same spelling. 51 00:04:34,620 --> 00:04:36,500 Open and close friends. 52 00:04:37,190 --> 00:04:42,340 Opening curly bracket there had returned a couple of times within that curly bracket we can say what 53 00:04:42,340 --> 00:04:43,180 the function is. 54 00:04:43,180 --> 00:04:52,590 When the mouse is clicked and again we would target it using our Jake Query and just like above we say 55 00:04:53,210 --> 00:05:03,190 in the text box where I change the team and that's and we will say open and close our parentheses open 56 00:05:03,190 --> 00:05:05,240 and close a pair of quotes. 57 00:05:05,980 --> 00:05:08,850 Let's do it. 58 00:05:09,000 --> 00:05:23,740 So our stuff that's tough to do is to get our H-1 tag up here and say you collect me now is the actual 59 00:05:23,740 --> 00:05:31,360 HDMI code that's going to put in the text box div using HD Mehl you click to me close that out. 60 00:05:32,560 --> 00:05:36,420 And at the end may or will close it out with a semi-colon. 61 00:05:36,820 --> 00:05:39,370 And we've got a closing curly bracket right there. 62 00:05:39,370 --> 00:05:46,180 So again targeting this on click event when Mouse is clicked the function mouse has clicked replace 63 00:05:46,180 --> 00:05:49,150 the HD mount with each one you click to me. 64 00:05:49,390 --> 00:05:52,010 Now run and do is do one for the mouse. 65 00:05:52,030 --> 00:05:56,830 Leave you've got some time to copy that because there's a lot of code there that we can copy and paste 66 00:05:56,830 --> 00:06:02,970 from and we can say when the mouse leaves so the new function when the mouse leaves what do we want 67 00:06:02,970 --> 00:06:05,450 to do when that happens here. 68 00:06:05,670 --> 00:06:11,250 We're still targeting that text box restall use and H.T. and Moul and you can say 69 00:06:14,820 --> 00:06:16,790 are you going. 70 00:06:17,890 --> 00:06:18,160 All. 71 00:06:18,230 --> 00:06:24,170 It's like proper English there where you go in close out that curly brackets same the rest of the code 72 00:06:24,170 --> 00:06:26,310 is all the same down here. 73 00:06:26,430 --> 00:06:30,650 I go ahead and get rid of this lorgnettes and copy down here. 74 00:06:30,740 --> 00:06:36,200 All right so I just have an empty text box Id get picked up on the last I can that we were working in 75 00:06:36,200 --> 00:06:38,090 if not you can go and type that idea out. 76 00:06:38,090 --> 00:06:45,130 Right now our text box should be about this with this height and this border here this background color. 77 00:06:45,410 --> 00:06:47,000 And these two functions are in place. 78 00:06:47,000 --> 00:06:48,310 Everything looks good. 79 00:06:48,350 --> 00:06:50,380 Let's go in and test it out again. 80 00:06:50,390 --> 00:06:55,910 I have a new file called events that each team will see that come back to my file here. 81 00:06:55,910 --> 00:07:00,690 Open this up box there enough and mouseover unseats says Where are you going. 82 00:07:00,740 --> 00:07:05,930 And if I click it you click to me mouse out again where you go and come back over. 83 00:07:05,930 --> 00:07:06,570 Click again. 84 00:07:06,590 --> 00:07:08,330 You clicked to me. 85 00:07:08,520 --> 00:07:11,650 And a lot of good things you can do using a query and that's.