Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.