We launched a new IT training category! Check out the 140+ courses now.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Separating data from the container

From: Create an Interactive Homepage Marquee with jQuery and Dreamweaver

Video: Separating data from the container

So at this point, now that we have all of our CSS and layout done, we're going to come back over to Code view and we're going to pull this data out of the marquee_container and put it into the marquee_panels. So in Code view, let's scroll down to the marquee_panels div that we created earlier. Let's get our cursor in here, and let's split this. Inside of marquee_panels, let's create another div, div class=, and this is going to be called marquee_panel singular.

Separating data from the container

So at this point, now that we have all of our CSS and layout done, we're going to come back over to Code view and we're going to pull this data out of the marquee_container and put it into the marquee_panels. So in Code view, let's scroll down to the marquee_panels div that we created earlier. Let's get our cursor in here, and let's split this. Inside of marquee_panels, let's create another div, div class=, and this is going to be called marquee_panel singular.

So all of the panels will be inside of--all the individual panels, rather- will be inside of the marquee_panels class. Let's end that tag. Begin a new tag. Forward slash to end that div. So everything inside of here will represent one panel worth of data. In the very first one, we're going to have just the image tag for the photography. So let's come up here to line 13. Let's select this entire line here. Let's choose Edit > Cut. I am also going to back up that ending div so that the marquee_photos div is on the same line.

Let's come down to marquee_panel. Let's tab in, choose Edit > Paste, and get that code in there. Let's create a new line. Let's create one more div, class="marquee_panel_caption". End the tag. New tag. Forward slash to end the div.

Let's open that up. Now, inside of here, let's come up to lines 15 through 18. We're going to grab the image tag for the flag, the h2 heading, and the two paragraph tags. We are going to go to Edit. We're going to cut this. Let's back this ending div up for our marquee_caption_content. Let's come down here to marquee_panel_ caption, choose Edit > Paste, and now we have all of the data for one of the panels inside of an entire marquee_panel div here.

So now what I want to do is let's grab all of the marquee_panel, choose Edit > Copy, and we're going to paste this four times. Let's hit Return, Command+V or Ctrl+V, paste 2, 3, and 4. So now we have four sets of panels. So the first one is London. We will leave this one the same. I just want to come in here to "This is a test caption for London", "This is a test caption for London".

This is how I can tell if this is actually working. So let's come down to the second one. Instead of london, we're going to type milan here. We are going to link to the milan.jpg file. Change Milan in the alt text. The flag is italy. For the heading, we're going to type Milan. M, we're going to use an acute accent mark.

So that's &i--the letter i is going to be the letter getting the acute, acute;lan. This is a test caption for. Let's choose Edit and Copy the heading, paste, paste. Next, the third one. Instead of london, type 'staugustine'.

For the heading, St. Augustine. Let's copy and paste "This is a caption for St. Augustine". Flag is going to be usa. The last one, instead of london, we're going to type montreal.

Flag is going to be canada. For the heading, I'm going to type 'Montreal' tr, we're going to put an acute for the e. éal. Let's copy that, "This is a caption for Montreal" Hit paste, Command+V. Now, the last thing I can do in order to make this look a little nicer on the screen for myself is inside of the width being 700, I can come in here and change this to 100, and I can get rid of the height attribute altogether.

We're going to be hiding this div from our users, but while we're looking at it on the screen to make our edits, we don't need to see the photography in full size. In jQuery, we're going to come in here and just simply pull out the source of this particular JPEG file. So I'm going to grab width=100, choose Copy, and for each one of these, I'm going to replace width and height, Command+V and Ctrl+V, and paste in just width as 100. Now, let's switch back to Design view.

Now, in Design view, I will see all these panels showing up in the page here. None of them more styled because we don't have any CSS rules that target anything inside of the marquee_panels tag, but we're going to actually hide this from the users. If I scroll up to the top, I'll see that our container now is completely empty for the marquee. We took out the photography and all the caption information, and we have them all down here. We can add or remove panels to our marquee by simply adding and removing the number of panels inside of the marquee_panel's main container div. Now that all of our data is in place, we want to do one more thing.

Let's come in to our CSS Rules. Let's create a rule called marquee_panel. Choose Class. So, marquee_panels. Choose OK. Let's come down to Block properties. Set a Display to none. Click OK. Now in our main page, we have all of the divs in place here, but the main panels will be hidden from our users.

At this point, we're ready to add jQuery to our project and start writing some JavaScript.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

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 and Dreamweaver.

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 preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.