Start learning with our library of video tutorials taught by experts. Get started

Create an Interactive Homepage Marquee with jQuery

Create an Interactive Homepage Marquee with jQuery

with Chris Converse

Video: Previewing the project across browsers and devices

I'm Chris Converse, and this is a course on creating an interactive homepage marquee for your website. I want to start by first showing the final project that we're going to be creating. Inside of the downloadable assets, inside of Final Project, I'm going to open the index.html file, opening this up inside of a Web browser. What we have here is a preload on our project that we'll go through, and download all the images and make sure they're all loaded. Once it's loaded, the image will fade up and our caption will slide into place. We have these buttons down here that will automatically generate based on the HTML markup.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Create an Interactive Homepage Marquee with jQuery
46m 49s Intermediate Mar 26, 2012

Viewers: in countries Watching now:

In this course, author Chris Converse builds a visually rich, interactive marquee to aggregate and display content on a web site home page. This course covers cropping and resizing artwork in Adobe Photoshop, creating HTML and CSS layouts, and dynamically generating marquee elements with the open-source JavaScript framework jQuery. Tutorials on animating between content panels are also included.

Topics include:
  • Creating project folders
  • Exporting graphics from Photoshop
  • Downloading and setting up Aptana Studio
  • Creating the HTML and JavaScript files
  • Setting up the Document Ready script
  • Generating the navigation buttons
  • Calculating and animating between photos
  • Setting the caption text
  • Preloading images and initializing the marquee
Subjects:
Web Web Design Projects
Author:
Chris Converse

Previewing the project across browsers and devices

I'm Chris Converse, and this is a course on creating an interactive homepage marquee for your website. I want to start by first showing the final project that we're going to be creating. Inside of the downloadable assets, inside of Final Project, I'm going to open the index.html file, opening this up inside of a Web browser. What we have here is a preload on our project that we'll go through, and download all the images and make sure they're all loaded. Once it's loaded, the image will fade up and our caption will slide into place. We have these buttons down here that will automatically generate based on the HTML markup.

As I click to links, the photos will sort of slide back and forth, the caption will move down, out of the way, change the content and then slide back up. Now, this entire experience is built using nothing more than HTML, CSS, and JavaScript. We've also used an open source framework called jQuery. One of the advantages of using an open source framework is that we can have the same user experience happen across all different platforms and browser types. So here we're going to go all the way back to Windows XP, going to take the same index file, let's load this into Internet Explorer 7.

We do need at least IE7, so that we can have the transparency in the caption area here. Likewise, let's jump over to Windows 7 and let's take a look at the same project running in IE9 which shipped just a few weeks ago. Click on the buttons, photos slide, all the transparency is in place. In addition, we can also look at our project running across different devices as well. So if we take a look over at the Android platform, I'm going to come in here to Google on the Android platform, mobile phone, take a look at the same project.

I'm going to hold Ctrl+F11 to rotate this device, tap and move this around. I can tap on the individual pieces here and get the same effect on a phone. Then likewise, running the same project inside of an iPad Simulator, I will hold Command+Arrow key to rotate this device. I can tap on these, and see these have same user experience again. One of the other features that we're going to be building into this particular project is these captions are going to be dynamic, so that regardless of how much content is inside of the caption area, we will calculate that using JavaScript and jQuery to figure out where the caption needs to move as our content grows.

So I'm going to take the index file, open it up in a text editor, and I'm going to quickly come in, and take the content from the second caption, and just add two more sets of content here, so I've basically tripled the size of this particular object. Let's go back to our browser, let's hit Reload. Now, when I go to Slide 2, the content is going to slide up two-thirds taller to accommodate all the different content and then slide back down. In addition, the HTML, when it gets initialized is going to count, using jQuery, the number of panels that we need as well.

So I can add or remove panels by simply adding or removing HTML in our source document. So I hope this project sounds interesting. And if so, let's get started with the first chapter.

There are currently no FAQs about Create an Interactive Homepage Marquee with jQuery.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Interactive Homepage Marquee with jQuery.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.