Join Chris Converse for an in-depth discussion in this video Adding the detail containers, part of Creating an Interactive Map with jQuery.
Now we are ready to add the markup for the city detail information that goes on…the right-hand side.…So inside of the index.html file, let's come down after the form element, let's…hit a Return, making sure we are still inside of the map container div, and…we will start by typing div class = "detail_container." end the div.…Let's get our cursor inside of the div, split it open, let's add another div inside of…here, class = "city_detail," let's end that div, let's split that one open, and…inside of here we are going to add two additional elements.…
First it's going to be an h3. I am going to type "Choose a city." On the next line, …set a paragraph tag and I will type "Instruction go here?"…So this is what users are going to see when they first hit this map, so we are…going to use this as an area to give the uses some instructions that we want…them to either use the form menu or click on the dot.…Once the user clicks on the dot, we are going to change all of the HTML that's…inside of this class called city_detail.…
Take a look at the finished web site here.
- Preparing web graphics
- Creating the main container
- Manipulating links with CSS
- Adding a drop-down menu
- Downloading jQuery and adding interactivity to a project
- Creating city details
- Overriding click events of anchor tags with jQuery