Lynda - Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Category: Tutorial


Posted on 2014-04-23, by wowebook.

Description


Title: Lynda - Create a Sliding Tabbed Panel with jQuery and Dreamweaver
Video Format: MOV
File Size: 259.50 MB




A tabbed panel interface is a classic feature to incorporate in your website design, but they're usually static elements. This course shows how to build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver. Author Chris Converse leads you through the process from start to finish, from building the containers to styling the text, tab, and panels, and adding click events to make the tabs interactive. He also shows how to incorporate progressive enhancement techniques, so visitors who don't have JavaScript, for example, can still access the content.
Topics include:

* Creating the main panel and tab containers
* Adding content to the containers
* Adding CSS styles to the text and tabs
* Adding the jQuery $(document).ready() function
* Assigning click events to the tabs
* Setting an autostart on page load
* Creating custom graphics for the panels
* Assigning custom classes to the HTML elements
* Reassigning CSS rules with JavaScript

Table of Contents

0. Introduction (3m 41s
* Previewing the final project (1m 35s)
* About the exercise files (1m 26s)
* Beginning the project (40s)

1. Creating the HTML Containers (6m 36s)
* Creating the main panel and the tab containers (2m 15s)
* Creating the HTML containers for the tabs (51s)
* Creating the HTML containers for the panels (1m 27s)
* Adding content to the containers (2m 3s)

2. Styling the Tabs and Panels (17m 58s
* Adding CSS styles to the text (2m 55s)
* Adding CSS styles to the tabs (3m 54s)
* Styling the first and last tabs (6m 51s)
* Styling the main container and the panels (4m 18s)

3. Writing the JavaScript and jQuery (22m 35s)
* Adding the jQuery document ready (2m 35s)
* Lining up the panels in a row (4m 54s)
* Assigning click events to the tabs (2m 24s)
* Animating the panels based on the tab clicked (6m 17s)
* Assigning a selected state to the tab clicked (3m 9s)
* Setting an autostart on page load (3m 16s)

4. Creating Custom Graphics (1m 41s)
* Creating custom graphics for the panels (1m 41s)

5. Customizing the Panel Styles (7m 29s)
* Assigning custom classes to the HTML elements (1m 24s)
* Adding CSS rules for the video panel (4m 34s)
* Adding CSS rules for remaining panels (1m 31s)

6. Adding Progressive Enhancement Techniques (5m 38s
* Removing CSS rules that hide elements (1m 30s)
* Reassigning CSS rules with JavaScript (4m 8s)

7. Conclusion (1m 15s)
* Where to go from here (1m 15s)


If get link die or problem with unrar file , send request to bit.ly/124uJzh
Use 7zip for unrar if you get "Max 260 character" error
Password for Unrar : tut4dl
[b][Uploaded][/b]
http://uploaded.net/file/o3vksy89/Lynda.Create.a.Sliding.Tabbed_Panel.with.jQuery.and.Dreamweaver.4.19.part1.rar
http://uploaded.net/file/2xy2ilqg/Lynda.Create.a.Sliding.Tabbed_Panel.with.jQuery.and.Dreamweaver.4.19.part2.rar
[b][Rapidgator][/b]
http://rapidgator.net/file/6c8608fb4da748df8c896c11e752857a/Lynda.Create.a.Sliding.Tabbed_Panel.with.jQuery.and.Dreamweaver.4.19.part1.rar.html
http://rapidgator.net/file/45ef7795a03071f0f59269dff8f4a235/Lynda.Create.a.Sliding.Tabbed_Panel.with.jQuery.and.Dreamweaver.4.19.part2.rar.html

Sponsored High Speed Downloads
6509 dl's @ 3935 KB/s
Download Now [Full Version]
8679 dl's @ 3921 KB/s
Download Link 1 - Fast Download
6761 dl's @ 3635 KB/s
Download Mirror - Direct Download



Search More...
Lynda - Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Search free ebooks in ebookee.com!


Links
Download this book

No active download links here?
Please check the description for download links if any or do a search to find alternative books.


Related Books


Comments

No comments for "Lynda - Create a Sliding Tabbed Panel with jQuery and Dreamweaver".


    Add Your Comments
    1. Download links and password may be in the description section, read description carefully!
    2. Do a search to find mirrors if no download links or dead links.
    Back to Top