Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although our behavior is functional, we are going to add one more bit of usability to it before we add it to our Dreamweaver behaviors. When the dialog box for the behavior loads, we are going to establish focus on the form element, so the user can just begin typing and they won't have to click inside of it. So this is a nice bit of functionality to add all your forms and not just your behaviors. So if you are working along with the exercise files, I have the styleSwitcher.js open and the styeSwitcher.htm open. I have got both of them open. I am currently working in the styleSwitcher.js. I am going to scroll all the way down to the bottom and there is an empty section down there called Local Functions and this is where we are going to initialize our user interface, setting a local variables, that sort of thing.
So I am going to add another single line comment down there, maybe a little bit of space between them, and I am going to type in, initialize user interface and establish focus. That's what we are going to do. So I will scroll down just a little bit more here, so I can see what I am typing and we are going to declare a new function. So go ahead and define a function using the Function keyword and after that, you want to type in, initializeUI, open a parenthesis, close parenthesis, open up a curly brace, hit Enter twice and close your curly brace.
So once again, we have built out the skeleton for this particular function. Now, inside that, type in document. theForm.title.focus, and then go ahead and open and close the parenthesis and then type in a semicolon. Now, if you like you could go ahead and do a single line comment, just out to the right of this too. You can actually comment out on the same line that you have the script, and I am just going to type in set focus on text box.
On the next line, I am going to type in document.theForm.title.select, and then once again open and close your parenthesis and type in a semicolon. And here we will do another single line comment, and here I am going to type, set insertion point into textbox. So first, we establish focus on the text box, and then we use select, so the cursor will be automatically blinked inside of it, so we can type it in. So that's half of what we need to do to initialize our user interface. Let's go ahead and save that.
And you can use coding to help you out here, and we'll just go ahead and pass the function call. So initializeUI, and then open and close your parenthesis and we are done. There we go. So we are all done, go ahead and make sure you do a Save All, and our behavior is finished and ready to be used. So in our next exercise, we will go ahead and save them to the proper directory, and we will reinitialize Dreamweaver by closing it and opening again and that will enable our behavior.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.