WBG310 Lab 4 Week 7 – jquery panel and dialog – with animation – code with screenshots – Perfect Solution – Instant Delivery

Lab Price = $65
Please feel free to send us your queries at: [email protected]
Payment methods

Add to Cart

Buy Now

View Cart


Problem Statement

Week 7 Lab Steps
STEP 1: Prep Panel Elements Content and Images
Choose three (or more) games, or game ideas, that you will describe using text and images to include in a tabbed panel that you design. Evaluate images for size, quality, and suitability. Then alter in a photo editor and, using CSS for placement, plan the layout and code for each panel element as an individual

as you did for this week’s tutorial. Choose one tab section to link to more content as a separate HTML page. This page can be displayed as a popup, if desired. Use animation of your choice in the display process.
STEP 2: Build

s for Panel Content
Build one

element for each game product. Use the image to display along with the story. Use an appropriate div id attribute (eg: ) to identify the tab as necessary for the jquery-ui.js library or similar widget you choose. You will have at least three sections when you are done.
STEP 3: Build a Read-More Page and Link to It
Build an extra HTML page, named product_read_more.html, and within the

section, link to it.
STEP 4: Create the Panel Page
Create the main HTML page (w7lab.html) as represented here. A header, main content area (with the tabbed panel set), and footer are required.
Save the file as w7lab.html.
The image below is a suggestion insofar as color scheme is concerned. You may certainly use your own artistic creativity as you see fit.

STEP 5: Link the Styles and jQuery Files
Collect all of the dependent files to make the panel set work work as expected. If you use the jquery-ui.js library, there is also an associated CSS file—don’t forget it. Also, you will want to create your own site.css file to override any styles that you wish to control.
Link the dependent files in the proper order in your document.
STEP 6: Write the Code
The tabbed panel should contain three (or more) tabs that are linked to

s that load and display their content, including images in the main div container in the body of the document. Tabs should display rollover effects as well as change background color when selected. Use the standard

  • list elements to organize the tabs into their menu structure as was done in the Week 7 tutorial. Use the appropriate animation to transition each new section into and out of the panel for viewing.
    STEP 7: Prep Files for Grading
    Ensure that you have all of the files needed to make the panel set work in one place, and then zip all of the files together in a single bundle. Submit your assignment.

    Relevant Material
    Screenshots
    Lab 4: Game 3
    Lab 4: Game 3
    Lab 4: Game 2 ReadMore
    Lab 4: Game 2 ReadMore
    Lab 4: Game 1
    Lab 4: Game 1
    Lab 4: Game 2
    Lab 4: Game 2
    Instructions
    * If you want to purchase multiple products then click on “Buy Now” button which will give you ADD TO CART option.Please note that the payment is done through PayPal.
    * You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
    * Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at [email protected].
    * As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
    * Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
    * All the contents are compressed in one zip folder.
    * In case if you get stuck at any point during the payment process, please immediately contact us at [email protected] and we will fix it with you.
    * We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
    * Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
    * In case of any query, please donot hesitate to contact us at [email protected].
    * MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
    ******************************************** Good Luck ***************************************************
    Privacy Policy
    We take your privacy seriously and will take all measures to protect your personal information.
    Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
    Refund Policy
    Incase you face any issues with the tutorial, please free to contact us on [email protected]
    We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.
    Payment Details
    Lab Price = $65
    Please feel free to send us your queries at: [email protected]
    Payment methods

    Add to Cart

    Buy Now

    View Cart