Index

A

• accept option / Handling events for puzzle pieces
• accordion component, properties
  • collapsible / Displaying hotels in accordion
  • active / Displaying hotels in accordion
  • heightStyle / Displaying hotels in accordion
• ajaxAlbum.php file, parameters
  • action / Editing a picture name
  • albumId / Editing a picture name
  • pictureId / Editing a picture name
  • newImageName / Editing a picture name
• album names, photo album manager
  • filling / Filling album names
  • albums, displaying / Displaying the albums
  • sortable pictures, creating / Making the pictures sortable
  • dialogs, initializing for edit / Initializing dialogs for edit, delete, and zoom
  • dialogs, initializing for delete / Initializing dialogs for edit, delete, and zoom
  • dialogs, initializing for zoom / Initializing dialogs for edit, delete, and zoom
  • click events, handling for delete icon / Handling click events for edit, delete icons, and zooming pictures
  • click events, handling for edit / Handling click events for edit, delete icons, and zooming pictures
  • click events, handling for image zoom / Handling click events for edit, delete icons, and zooming pictures
• albums object, properties
  • jsonAlbums / Getting code structure ready
  • currentAlbum / Getting code structure ready
  • currentPictureId / Getting code structure ready
  • initialize / Getting code structure ready
  • fillAlbumNames / Getting code structure ready
  • addEventHandlers / Getting code structure ready
  • displayAlbum / Getting code structure ready
  • editImage / Getting code structure ready
  • deleteImage / Getting code structure ready
  • saveNewSequence / Getting code structure ready
• API key, Google Maps
  • obtaining / Getting a Google Maps API key
  • URL / Getting a Google Maps API key

C

• CAPTCHA
  • folder structure, creating / Creating the folder structure
• CDN
  • about / Using jQuery/jQuery UI libraries with a CDN, Using a CDN
  • using / Using a CDN
• CDNJS
  • URL / Using jQuery/jQuery UI libraries with a CDN
• chaining
  • about / Chain, chain, and chain
• Chrome DevTools
  • URL / The CSS background-position property
• code structure, dashboard
  • defining / Getting the code structure ready
• color picker
  • folder structure, setting up / Setting up the folder structure
  • markup, writing for page / Writing markup for the page
  • content, styling / Styling the content
  • implementing / Implementing the color picker
  • object structure, defining / Defining the object structure
  • init method, initializing / The init method
  • colors, modifying / Changing colors and updating the spinner
  • spinner, updating / Changing colors and updating the spinner
  • getHexColor method, defining / The getHexColor method
  • convertToHex method, defining / Converting to hex
  • improving / Improving the Colorpicker
• colorPicker object
  • init method / Defining the object structure
  • setColor method / Defining the object structure
  • getHexColor method / Defining the object structure
  • convertToHex method / Defining the object structure
• createSlices function / Creating slices of the image
• CSS background-position property
  • about / The CSS background-position property
• CSS rule declarations, properties
  • body / Styling the content
  • .container / Styling the content
  • #timeline / Styling the content
  • .year / Styling the content
  • .year div / Styling the content
  • #window / Styling the content
  • .close / Styling the content
  • .overlay / Styling the content
  • #leftOverlay / Styling the content
  • #rightOverlay / Styling the content
  • #yearEvents ul li / Styling the content
  • #slider / Styling the content
  • #sliderVal / Styling the content
  • .clear / Styling the content
• customized build, jQuery UI
  • using / Use a customized build of jQuery UI
  • URL / Use a customized build of jQuery UI

D

• dashboard
  • stage, setting up / Setting up the stage
  • page, designing / Designing the page
  • code structure, defining / Getting the code structure ready
  • portlets, initializing / Initializing the portlets
  • sharing buttons, implementing / Implementing sharing buttons
  • Flickr photos, displaying / Displaying Flickr photos
  • weather widget, creating / Creating a weather widget
  • posts, displaying from reddit front page / Displaying posts from the reddit front page
  • image display widget, creating / Creating an image display widget
  • portlets, improving / Improving the portlets
• DOM
  • about / Displaying data on the page
• drag and drop CAPTCHA
  • implementing / Implementing the drag and drop CAPTCHA
  • random color, setting / Setting a random color
  • displaying / Displaying the CAPTCHA
  • making functional / Making the drag and drop functional
  • server, validating / Validating on the server
  • color CAPTCHA, improving / Improving the color CAPTCHA
• draggable method, options
  • revert / Draggable country names
  • revertDuration / Draggable country names
  • cursor / Draggable country names
• drop option / Handling events for puzzle pieces
• droppable capital names, quiz application
  • creating / Droppable capital names and scoring
  • draggable element, accepting / Accepting a draggable element
  • drop event, using / The drop event

E

• event timeline
  • folder structure, creating / Creating the folder structure
  • HTML markup, writing / Designing the page
  • content, styling / Styling the content
  • code structure / Getting the code structure ready
  • markup, creating from data / Creating the timeline markup from data
  • functionality, implementing / Implementing the timeline functionality
  • improving / Improving the timeline

F

• Firebug
  • URL / The CSS background-position property
• Flickr photos, dashboard
  • displaying / Displaying Flickr photos
• folder structure
  • setting up / Setting up the folder structure for the JavaScript and CSS files
• functionality, event timeline
  • slider, implementing / Making the slider work
  • slider, implementing with if block / The if block
  • slider, implementing with else block / The else block
  • year window, dragging / Dragging the year window
  • event details, displaying on year window click / Displaying event details when a year window is clicked on
  • event details window, closing / Closing the event details window
• functional puzzle, jigsaw puzzle game
  • creating / Making the puzzle functional
  • image slices, creating / Creating slices of the image
  • CSS background-position property / The CSS background-position property
  • events, handling for puzzle pieces / Handling events for puzzle pieces
  • puzzle completion, checking for / Checking for puzzle completion
  • resetting / Resetting the puzzle

G

• Google CDN
  • URL / Using jQuery/jQuery UI libraries with a CDN, Using a CDN
• guidelines, jQuery UI
  • about / General Guidelines
  • CDN, using / Using a CDN
  • icons, using / Using the jQuery UI icons
  • elements, specifying / Be specific about elements as much as possible
  • chaining / Chain, chain, and chain
  • selectors, caching / Cache selectors
  • variables, caching / Cache your loop variables
  • DOM manipulation / DOM manipulation is costly

H

• home page, tabbed news reader
  • designing / Designing the page
  • markup, writing for tabs / Writing markup for tabs
  • content, styling / Styling the content
• home page, website tour
  • designing / Designing the home page
  • markup, writing / Writing markup for the page
  • elements, styling / Styling elements
• hoverClass option / Handling events for puzzle pieces

I

• icons
  • URL / Designing the page
• icons, jQuery UI
  • using / Using the jQuery UI icons
  • URL / Using the jQuery UI icons
• image display widget, dashboard
  • creating / Creating an image display widget

J

• jigsaw puzzle game
  • building / Getting ready
  • layout, creating / Creating the layout
  • functional puzzle, creating / Making the puzzle functional
  • Start button, implementing / Starting the game
  • puzzle, improving / Improving the puzzle
• jQuery
  • URL, for downloading / Downloading the required files
  • downloading / Downloading the required files
• jQuery/jQuery UI libraries
  • using, with CDN / Using jQuery/jQuery UI libraries with a CDN
• jQuery CDN
  • URL / Using a CDN
• jQuery UI
  • setting up / Setting up jQuery UI
  • URL, for downloading / Downloading the required files
  • downloading / Downloading the required files
  • folder structure, setting up / Setting up the folder structure for the JavaScript and CSS files
  • guidelines / General Guidelines
  • customized build, using / Use a customized build of jQuery UI
• jQuery UI sortable example
  • URL / Designing the page

L

• layout, jigsaw puzzle game
  • creating / Creating the layout
  • markup, creating / Creating the markup for the puzzle
  • elements, styling / Styling elements

M

• mapOptions object, properties
  • center / Displaying the map
  • zoom / Displaying the map
  • disableDefaultUI / Displaying the map
  • mapTypeId / Displaying the map
  • scrollwheel / Displaying the map
• maps mashup
  • folder structure, creating / Creating the folder structure
  • Google Maps API key, obtaining / Getting a Google Maps API key
  • page, designing / Designing the page
  • content, styling / Styling the content
  • code structure / Getting the code structure ready
  • minimum and maximum prices, setting / Setting minimum and maximum prices
  • hotels, displaying in accordion / Displaying hotels in accordion
  • spinner, setting up / Setting up the spinner
  • map, displaying / Displaying the map
  • markers, setting in map / Setting markers and infowindows in the map
  • infowindows, setting in map / Setting markers and infowindows in the map
  • slider, implementing / Implementing the slider
  • improving / Improving the functionality
• Microsoft CDN
  • URL / Using jQuery/jQuery UI libraries with a CDN, Using a CDN
• myMap object, properties
  • map / Getting the code structure ready
  • markers / Getting the code structure ready
  • infowindow / Getting the code structure ready
  • minPrice / Getting the code structure ready
  • maxPrice / Getting the code structure ready
  • hotelsList / Getting the code structure ready
  • initialize / Getting the code structure ready
  • setMinMaxPrices / Getting the code structure ready
  • displayHotels / Getting the code structure ready
  • setSpinner / Getting the code structure ready
  • createMap / Getting the code structure ready
  • setMarkersAndInfoWindow / Getting the code structure ready
  • setSlider / Getting the code structure ready

N

• number CAPTCHA
  • creating / Creating the number CAPTCHA
  • five-digit number, generating / Generating the five-digit number
  • displaying, on page / Displaying CAPTCHA on the page
  • sortable functionality, adding / Adding the sortable functionality
  • number, validating on server / Validating the number on the server

O

• object literal
  • about / Initializing the tour
• objTimeline object, properties
  • itemsToDisplay / Getting the code structure ready
  • minYear / Getting the code structure ready
  • maxYear / Getting the code structure ready
  • currentYear / Getting the code structure ready
  • timelineWindowStartYear / Getting the code structure ready
  • windowLeft / Getting the code structure ready
  • isWindowOpen / Getting the code structure ready
  • timelineData / Getting the code structure ready
  • init / Getting the code structure ready
  • createMarkup / Getting the code structure ready
  • createTimeline / Getting the code structure ready
  • closeWindow / Getting the code structure ready

P

• page, dashboard
  • designing / Designing the page
  • content, styling / Styling the content
• page, photo album manager
  • designing / Designing the page
  • placeholders, creating for albums / Creating placeholders for albums and pictures
  • placeholders, creating for pictures / Creating placeholders for albums and pictures
  • markup, writing for dialog boxes / Writing markup for dialog boxes
  • content, styling / Styling the content
• photo album manager
  • folder structure, creating / Creating the folder structure
  • page, designing / Designing the page
  • JSON file, creating for albums / Creating the JSON file for albums
  • code structure / Getting code structure ready
  • initialize method, implementing / Implementing the initialize method
  • album names, filling / Filling album names
  • improving / Improving album manager
• pictures, photo album manager
  • editing / Editing, deleting, and rearranging pictures
  • deleting / Editing, deleting, and rearranging pictures, Deleting a picture
  • rearranging / Editing, deleting, and rearranging pictures, Rearranging pictures of an album
  • picture name, editing / Editing a picture name
  • ajaxAlbum.php file / The ajaxAlbum.php file
• pictures array, properties
  • id / Creating the JSON file for albums
  • sequence / Creating the JSON file for albums
  • imageTitle / Creating the JSON file for albums
  • imageThumb / Creating the JSON file for albums
  • imageLarge / Creating the JSON file for albums
• portlets, dashboard
  • initializing / Initializing the portlets
• posts, dashboard
  • displaying, from reddit front page / Displaying posts from the reddit front page
• posts, tabbed news reader
  • displaying, of subreddit / Displaying posts of a subreddit
  • tab structure, creating / Creating the tab structure
  • DOM, building / Building the DOM for posts
  • comments, obtaining / Getting comments for a post

Q

• quiz application
  • layout, creating / Creating the layout
  • index.html file, editing / Markup for the quiz page
  • elements, styling / Styling elements
  • making functional / Making the quiz functional
  • data, displaying / Displaying data on the page
  • draggable country names, creating / Draggable country names
  • droppable capital names, creating / Droppable capital names and scoring
  • scores, adding / Droppable capital names and scoring
  • resetting / Resetting the quiz
  • enhancing / Improving the quiz

R

• range slider, properties
  • min / Implementing the slider
  • max / Implementing the slider
  • range / Implementing the slider
  • values / Implementing the slider
  • step / Implementing the slider
  • slide / Implementing the slider
  • stop / Implementing the slider
• reflow
  • about / DOM manipulation is costly

S

• searchable widget
  • folder structure / The folder structure
  • creating / Creating a widget to search data in a table
  • markup, writing for table / Writing markup for the table
  • content, styling / Styling the content
  • implementing / Implementing the widget
  • widget structure, defining / Defining the widget structure
  • default options, setting up / Setting up default options
  • initializing / Initializing the widget and attaching event handlers
  • event handlers, attaching / Initializing the widget and attaching event handlers
  • table, filtering / Filtering the table
  • option value, setting / Making changes when the option value is changed
  • destroying / Destroying the widget
  • calling / Calling the widget from the page
  • improving / Improving the searchable widget
• sharing buttons implementation, dashboard
  • about / Implementing sharing buttons
  • Facebook / Implementing sharing buttons
  • Twitter / Implementing sharing buttons
  • Reddit / Implementing sharing buttons
  • Google Plus / Implementing sharing buttons
• shuffle function
  • URL / Displaying data on the page
• slider CAPTCHA
  • creating / Creating the slider CAPTCHA
  • minimum value, generating / Generating minimum and maximum values for the slider
  • maximum value, generating / Generating minimum and maximum values for the slider
  • making functional / Making the slider functional
  • slider values, validating / Validating the slider values
  • improving / Improving the slider CAPTCHA
• slide widget
  • folder structure / The folder structure
  • creating / Creating a widget to display a slideshow
  • markup, writing / Writing markup for slides
  • content, styling / Styling the content
  • implementing / Implementing the widget
  • widget structure, defining / Defining the widget structure
  • default options, setting up / Setting up default options
  • initializing / Initializing the widget and displaying the first slide
  • first slide, displaying / Initializing the widget and displaying the first slide
  • slides, displaying one by one / Displaying slides one by one
  • option value, setting / Making changes when the option value is changed
  • destroying / Destroying the widget
  • calling / Calling the widget from the page
  • improving / Improving the banner widget
• slide widget, options
  • duration / Setting up default options
  • effect / Setting up default options
  • easingDuration / Setting up default options
  • beforeShow / Setting up default options
• sortable component
  • connectWith option / Initializing the portlets
  • handle option / Initializing the portlets
  • cancel option / Initializing the portlets
  • placeholder option / Initializing the portlets
• sortable components, properties
  • handle / Making the pictures sortable
  • placeholder / Making the pictures sortable
  • cursor / Making the pictures sortable
• stage, dashboard
  • setting up / Setting up the stage

T

• tabbed news reader
  • folder structure, creating / Creating the folder structure
  • home page, designing / Designing the page
  • code structure / Getting the code structure ready
  • event handlers, adding in init method / Adding event handlers in the init method
  • posts, displaying of subreddit / Displaying posts of a subreddit
  • improving / Improving MyjqReddit
• themeroller
  • about / Using jQuery UI Themeroller to customize a theme
  • used, for customizing theme / Using jQuery UI Themeroller to customize a theme
  • URL / Using jQuery UI Themeroller to customize a theme
  • options / Using jQuery UI Themeroller to customize a theme

W

• $.widget() function, properties
  • options / Defining the widget structure
  • _create / Defining the widget structure
  • _destroy / Defining the widget structure
  • _setOption / Defining the widget structure
• weather widget, dashboard
  • creating / Creating a weather widget
  • URL / Creating a weather widget
• website tour
  • folder structure, creating / Getting ready
  • home page, designing / Designing the home page
  • functionality, implementing / Making the tour functional
  • improving / Improving the tour
• website tour, functionality
  • implementing / Making the tour functional
  • accordion, initializing / Initializing accordion and tooltips
  • tooltips, initializing / Initializing accordion and tooltips
  • dialog box, initializing / Defining the dialog
  • tour steps, defining / Defining the tour steps
  • initializing / Initializing the tour
  • tour step, displaying / Displaying a tour step
  • Next button, defining / Making the Previous and Next buttons functional
  • Previous button, defining / Making the Previous and Next buttons functional
  • ending / Ending the tour