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

Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

From: Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

Video: Detecting the need of the wrap around effect

Now to add this wraparound effect we're going to add a few lines before the window.currentPanel statement. So what we're going to do here is add a conditional statement inside of JavaScript. So first I'm going to type if, beginning and ending parentheses, beginning and ending bracket. Let's split the brackets open. After the brackets, we're going to type else if, beginning and ending parentheses, beginning and ending bracket. Let's split those brackets open. Then we're going to type else, beginning and ending bracket, and let's split those brackets open.

Detecting the need of the wrap around effect

Now to add this wraparound effect we're going to add a few lines before the window.currentPanel statement. So what we're going to do here is add a conditional statement inside of JavaScript. So first I'm going to type if, beginning and ending parentheses, beginning and ending bracket. Let's split the brackets open. After the brackets, we're going to type else if, beginning and ending parentheses, beginning and ending bracket. Let's split those brackets open. Then we're going to type else, beginning and ending bracket, and let's split those brackets open.

So this is a conditional statement in JavaScript that has an else-if. So it's kind of like combining two if statements into one statement. So inside of the parentheses for the first if what we want to do is check the currentPanel and see if it equals to totalPanels. That way we'll know if we were actually on the last panel of the four that are part of our marquee content. So we're going to type window.currentPanel, two equal signs to test the overall quality of that variable with window.totalPanels.

So if the currentPanel equals totalPanels, we know that we are on the last item. Let's hit a space. Let's put two ampersands signs. We want to test the second condition inside of this if statement, and the second condition is going to be navClicked, double equals, then a zero. So if we were on the last panel and the user clicks the navigation item 0, which is the first item, we know that we need to create an animation that goes from the last panel to the first panel.

So inside of the if statement, let's just put an alert in here. Two tick marks inside for a string literal, and we're going to type animate from last to first. This way we can test this in a browser and make sure that when we're actually clicking from the last item to the first item that this logic is actually working properly. Now let's bring our cursor inside of the parentheses for the else-if statement.

We can add a few spaces in there. We're going to say window.currentPanel, double equals, 1, two ampersands, and navClicked, double equals, and let's do a beginning and ending parentheses inside of here. We want to calculate window.totalPanels minus 1.

So this statement here is only going to happen if the condition up here, which is the currentPanel equals the totalPanels and the item that clicked on was 0, we're going to come down here and check to see if the currentPanel is 1. So we're on the first panel of the content of the marquee and the nav item that was clicked equals the totalPanels, which is 4-1, which is going to give us 3. Because remember, the nav items go 0, 1, 2, 3. They count from 0 to 3 instead of 1 to 4. So if we know that nav item equals the last panel and we're currently on the first panel, we're going to run this statement.

So let's come up here and copy the alert statement. Let's paste it down here, and we're going to say, we're going to animate from first to last. Then inside of the final else statement we're just going to paste an alert, and we'll just type animate normally. So let's go test this in a browser and make sure that we see these alerts every time we expect to see them. So let's hit File > Save, let's come back out to our browser, and let's hit Reload.

Now when I click on the second navigation item, I'll get a JavaScript pop-up that says animate normally. Now we're in number 2. Let's jump over to 4. This also says animate normally. Now I'm on the last panel. Let's come over and click on the first item. This pop-up comes up and says animate from last to first, so I know that we've properly calculated the fact we're on the last item and the person is going to the first. Let's click OK. We're on the first item. Let's click on the last item. We get a pop-up that says animate from first to last.

So now we know where if statement are properly determining whether the person is on the last panel and going to the first or on the first and going to the last, so in the next movie we can start by modifying the animation scripts to create that wraparound effect.

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 Add a Wraparound Effect for a 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.