| INTRODUCTION & SYNTAX OVERVIEW |
|
| | Introduction to jQuery 12:00 |
Preview |
| | How to add jQuery to HTML page ? Using jQuery CDN or Downloaded file 14:00 |
|
| | Mini Quiz #1 |
|
| | jQuery syntax overview. 13:00 |
Preview |
| | jQuery selectors | How to use selectors ? 5:00 |
|
| | Mini Quiz #2 |
|
| | The elemet selector in jQuery 4:00 |
|
| | The Id selector in jQuery 3:00 |
|
| | QUIZ 1 |
|
| | The class selector in jQuery 4:00 |
|
| | The miscellaneous jQuery selectors (element.class , element.nth-child) 18:00 |
|
| | Mini Quiz #3 |
|
| | 1 module (4 pages) |
|
| EVENT HANDLING IN jQuery |
|
| | jQuery events triggering and Types of events 3:00 |
|
| | Trigger Mouse Events in jQuery 11:00 |
|
| | Keyboard Events in jQuery 7:00 |
|
| | Form Events in jQuery 14:00 |
|
| | Document/Window Events in jQuery 10:00 |
|
| | jQuery on() and off() methods to handel events 9:00 |
|
| | QUIZ 1 |
|
| | 2 module (2 pages) |
|
| | Mini Quiz #1 |
|
| jQuery EFFECTS |
|
| | hide(), side() and toggle() Methods 11:00 |
Preview |
| | fadeIn(), fadeOut(), fadeToggle() and fadeTo() Methods 11:00 |
|
| | slideIn(), slideOut() and slideToggle() Methods 11:00 |
|
| | animate() method , add CSS animations properties using jQuery 11:00 |
|
| | stop(), clearQueue() , finish() Method 10:00 |
|
| | jQuery Method Chaining 3:00 |
|
| | Mini Quiz #1 |
|
| | quiz 1 |
|
| | Assign #3 (1 pages) |
|
| | 3 module (3 pages) |
|
| jQuery HTML METHODS |
|
| | Get and set Content - text() ,html() and val() 17:00 |
|
| | Get and set Content - attr() , data() and prop() 12:00 |
|
| | jQuery add element - append(), prepend(), after() and before() 9:00 |
|
| | jQuery remove element - remove() and empty() methods 4:00 |
|
| | jQuery css classes - addClass(), removeClass() and toggleClass() methods 10:00 |
|
| | jQuery css() method - get and set css properties 8:00 |
|
| | jQuery Dimensions - get and set width and height 5:00 |
|
| | Mini Quiz #1 |
|
| | quiz 1 |
|
| | Assign #4 (1 pages) |
|
| jQuery Traversing |
|
| | What is Traversing ? 4:00 |
|
| | jQuery Traversing - Ancestors 10:00 |
|
| | jQuery Traversing - Descendants 6:00 |
|
| | jQuery Traversing - Siblings 6:00 |
|
| | jQuery Traversing - Filtering 7:00 |
|
| | has() and is() methods 7:00 |
|
| | each() method in jquery 5:00 |
|
| | Mini Quiz #1 |
|
| | quiz 1 |
|
| | 5 module (3 pages) |
|
| Exercise 1 |
|
| | Image gallery using jQuery 9:00 |
|
| | Maximun character validation using jQuery 12:00 |
|
| | On-off blub using switch 10:00 |
|
| | Course slider 6:00 |
|
| Events object: Properties & Methods |
|
| | pageX, pageY and offset method 8:00 |
|
| | event.type property 4:00 |
|
| | event.which property 5:00 |
|
| | event.target property 4:00 |
|
| | event.preventDefault() and event.isDefaultPrevented() methods 4:00 |
|
| | event.stopPropagation() and event.isPropagationStopped() 3:00 |
|
| | event.data property 8:00 |
|
| | Mini Quiz #1 |
|
| | quiz 1 |
|
| | 6 module (2) (1 pages) |
|
| | Assign #6 (1 pages) |
|
| Exercise - 2 |
|
| | I agree validation 7:00 |
|
| | Show and Hide Password 9:00 |
|
| | Add more row on click. 12:00 |
|
| | To do list using jQuery 11:00 |
|
| jQuery-UI (Introduction and Environment setup) |
|
| | What is jQuery UI ? 7:00 |
|
| | Required files for jQuery UI 4:00 |
|
| | Adding online and offline refrences 6:00 |
|
| Interaction: Draggable |
|
| | Introduction to Draggable interaction 4:00 |
|
| | Restrict the draggable interaction 6:00 |
|
| | Cancel draggable interaction 3:00 |
|
| | Set Type, Position and Click-ability of Cursor 7:00 |
|
| | Pixles to move using Grid Property. 2:00 |
|
| | Return to the Original Position using Revert Property. 3:00 |
|
| | Add a helper for draggable elements 5:00 |
|
| | Megnetic effect using snap property 8:00 |
|
| | Other properties 10:00 |
|
| | Managing the events of draggable 7:00 |
|
| Interaction: Droppable |
|
| | Introduction to Droppable 4:00 |
|
| | Decide Which Draggable Elements To Be Accepted 8:00 |
|
| | Decide when an Element to be Considered as Dropped 4:00 |
|
| | Decide which Nested Droppable Element to Accept Dropped Element 3:00 |
|
| | Manage the look of the droppable based on the draggable 6:00 |
|
| | Decide whether to revert back or not when missmatch 4:00 |
|
| | Manage events in Droppable 7:00 |
|
| Interaction: Resizeable |
|
| | Introduction to Resizeable 3:00 |
|
| | Where to drag to resize ? 4:00 |
|
| | Synchronize method 3:00 |
|
| | Ghost and Helper Methods 4:00 |
|
| | Restrict Resizable 7:00 |
|
| | Maintain aspect ratio of resizable 4:00 |
|
| | Animate resizing 6:00 |
|
| | Manage Events 5:00 |
|
| Selectable |
|
| | Introduction to selectable 13:00 |
|
| | Filter Selectables and Non-Selectables 4:00 |
|
| Sortable |
|
| | Introduction to sortable 3:00 |
|
| | Replace the White Space using placeholder option 2:00 |
|
| | Connect between Sortables 4:00 |
|
| | Make some items sortable 3:00 |
|
| Accordion |
|
| | Introduction to Accordion 5:00 |
|
| | Allow to Collapse All Panels |
|
| | "Decide which Panel to be Displayed by Default" 2:00 |
|
| | Decide which event to be used to display the content 2:00 |
|
| | Set the Height of the Content Panels 5:00 |
|
| | Change the Default Icons in Accordion 3:00 |
|
| Tab |
|
| | Introduction to Tabs Widget 3:00 |
|
| | Animate Hiding and Showing of Panels 6:00 |
|
| | Miscellaneous Options 4:00 |
|
| Autocomplete |
|
| | Introduction to autocomplete 4:00 |
|
| | Select One and Display Another 4:00 |
|
| | Some autocomplete options 3:00 |
|
| | Position options in autocomplete 10:00 |
|
| | Manage Events 7:00 |
|
| Dialog |
|
| | Introduction to Dialog Widget 4:00 |
|
| | Show and Hide effects 4:00 |
|
| | Set the size and position of the dialog box 7:00 |
|
| | Change Default Functionalities 3:00 |
|
| | Add Modal Behaviour 2:00 |
|
| | Add Buttons to the Dialog 7:00 |
|
| | Manage Events |
|
| | Different methods 5:00 |
|
| Datepicker |
|
| | Introduction to Datepicker 3:00 |
|
| | Make Dates in a Range Selectable 4:00 |
|
| | Make Weekends/Weekdays Non-Selectable 5:00 |
|
| | Make Specific Dates Non-Selectable 4:00 |
|
| | Holiday concept in datepicker 9:00 |
|
| | Style Holidays in Your Calendar 4:00 |
|
| | Animate Hiding and Showing of Datepicker 4:00 |
|
| | Format Date and Text Box 6:00 |
|
| | Alternate field and alternate text 3:00 |
|
| | Show datepicker in different ways. 7:00 |
|
| | Change default datepicker options 5:00 |
|
| | Change the language of the datepicker 7:00 |
|
| | Control Datepicker Programmatically 5:00 |
|
| Progress bar |
|
| | Introduction to Progress bar 2:00 |
|
| | Customise the progress bar 7:00 |
|
| | Change the Value of the Progressbar Programmatically 4:00 |
|
| Slider |
|
| | Introduction to the slider 4:00 |
|
| | Change event in slider 3:00 |
|
| | Range Slider 5:00 |
|
| | Other options 4:00 |
|
| | Manage events 5:00 |
|
| Menu |
|
| | Introduction to the Menu 5:00 |
|
| | Change icons of menu 3:00 |
|
| | Divider & items option. 3:00 |
|
| | Manage events 6:00 |
|
| Tooltip |
|
| | Introduction to tooltip 3:00 |
|
| | Show & Hide effects for tooltip 3:00 |
|
| | Position of the tooltip 2:00 |
|
| | Customize the look of tooltip 2:00 |
|
| | Customize the content of the tooltip 3:00 |
|
| | Events and Methods 5:00 |
|
| Spinner |
|
| | Introduction to the Spinner 14:00 |
|
| | Methods of the Spinner 7:00 |
|
| Miscellaneous Widgets |
|
| | Button Widget 3:00 |
|
| | Checkbox Radio 4:00 |
|
| | Selectmenu widget 2:00 |
|
| | Control group 5:00 |
|
| Effects |
|
| | Effect method 7:00 |
|
| | Show and Hide method 6:00 |
|
