Reference no: EM131601332

Jquery assignments

For this lab, we are going to add a glossary page to our website

Download the attached glossary.html file and the 3 image files to your website folder.Modify the css file to add the following styles:#pltTitle { color: #07a;}.botanic { color: darkgreen; font-style: italic;}.col { width: 20em; padding: 1em; float: left;}footer { clear: both;}View the page in the browser. You should see a fairly plain page with 2 columns of flowers listed.Create an external javascript file and link it to your page. Also link the jquery libraries to your page.First, let's add a mouseover event to change the color of the headings, h1 and h2 using the css method. You can change them to any color that you choose.Follow that with a mouseout event to change the color back to the original color. Test to make sure that is working before moving on to the next step.Next we are going to hide all of the botanic names. Then when you click on a flower name, we will display the botanic name for that flower.

The botanic names are all in span tags with a class of 'botanic'. Start by hiding all of the botanic names. This should be the first statement inside the document.ready() function so they will be hidden immediately when the page loads.

Each flower line is inside a div tag with a class of 'flower'. Add a click event to the flower class that will first hide the botanic class (this is to hide any previously displayed botanic name) and then show the botanic name for the current flower only.To do this, we are going to use a method called .children that will only select children of the current class and pass it the botanic class and then use the show() method to display it:$(this).children('.botanic').show();

We will learn more about the .children method in lesson 8.

Save your files and test to make sure that when you click on a flower name, it displays the botanic name for that flower only and hides any other botanic names.

The next event we will add is a hover event that will display an image for certain flowers. We are only going to do this for 3 flowers in the list. These flower names have been placed inside of a span tab with a class of 'pic'.

In the css file, add a thin dashed bottom border on these span tags so the user knows which ones they are. (.pic {border-bottom: thin dashed darkgreen;})

The flowers are currently showing at the bottom of the page. Each one is in a div with a class of 'imgdiv' and a unique id. Since we want the images to display next to the name, we need to use absolute positioning, so add .imgdiv {position: absolute;} to your css file.

When the page displays, we want this imgdivs to be hidden and only show when the user hovers over the name, so add the hide() method to the .imgdiv class at the top of the document.ready() function - right after hiding the botanic names.

Create a hover event for the .pic class. We will need to get the position of the cursor when we hover over the .pic span tag so we know where to place the image, so be sure to add the evt parameter to the anonymous function.

For the first function (mouseover):

Each picture has a title attribute that represents the name of the associated flower div. Get the title attribute and concatenate it with the # in front to create the id for the .imgdiv that you want to display. Save this as a variable.

Get the X and Y coordinates of the event and save them in variables. Add 150 to the x coordinate to move it to the right so it doesn't cover the name.

Set the top and left css properties of the div to display (using the variable you created) to these x and y coordinates and then show the image.

For the second function (mouseout):

Get the title attribute to create the id of the imgdiv just as you did in the first function (these are local variables so you can't just re-use it.)

Hide the image div.

Test each of the 3 flowers to see if the image shows and hides as expected.

Finally, we are going to add a keypress event so that if you type in a letter, it will jump to the first flower that starts with that letter in the list.

Add a keypress event.

Get the key pressed and convert it to the appropriate string character. Convert to lowercase (in case they entered an uppercase letter).

In the html, the first flower for each letter has an id equal to the lower case letter. To move to that location we want to use the anchor (#a, #b, etc.).

We will use a JavaScript property called window.location and assign it a value of # + the letter entered to jump to that location on the page:window.location="#"+keyPressed;

Test by typing in different letters to see if it works as expected. (I think all letters except x are present).

Attachment:- Java Assignment.rar