Bill's Amazing Content Rotator jQuery Content Rotator.

Slides:



Advertisements
Similar presentations
JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
Advertisements

Introduction to Macromedia Director 8.5 – Lingo
Hypertext markup language.  Client asks for an html file  Server returns the html file  Client parses and displays it  This display is what most people.
Introduction to JavaScript Module 1 Client Side JS Programming M-GO Sponsored By
Scratch Programming Session 9 of 10 Review elements to use in stories, games, etc.
12-Jun-15 JavaScript Language Fundamentals I. 2 About JavaScript JavaScript is not Java, or even related to Java The original name for JavaScript was.
Introduction to JavaScript for Python Programmers
Inline, Internal, and External FIle
5.05 Apply Looping Structures
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
JQuery CS 268. What is jQuery? From their web site:
JavaScript & jQuery the missing manual Chapter 11
JQuery Page Slider. Our goal is to get to the functionality of the Panic Coda web site.Panic Coda web site.
Making a Timer in Alice.
CSS Sprites. What are sprites? In the early days of video games, memory for graphics was very low. So to make things load quickly and make graphics look.
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / Chris Greenhalgh.
Programming with Alice Computing Institute for K-12 Teachers Summer 2011 Workshop.
THE BIG PICTURE. How does JavaScript interact with the browser?
JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),
Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample page Sample page This is a simple sample. HTML user.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Introduction to Arrays. definitions and things to consider… This presentation is designed to give a simple demonstration of array and object visualizations.
Fall Week 3 CSCI-141 Scott C. Johnson.  Say we want to draw the following figure ◦ How would we go about doing this?
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
INTRODUCTION TO HTML5 Using jQuery with HTML5. Introducing jQuery  Although it is not a part of any W3C or WHATWG specification, jQuery performs an important.
Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.
COMPUTER PROGRAMMING I 5.05 Apply Looping Structures.
Piñata Game: Keeping Score in Alice By Maggie Bashford Professor Susan Rodger Duke University July
XP Tutorial 8 Adding Interactivity with ActionScript.
JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
CRE Programming Club - Class 2 Robert Eckstein and Robert Heard.
JavaScript Challenges Answers for challenges
1 Printing in Python Every program needs to do some output This is usually to the screen (shell window) Later we’ll see graphics windows and external files.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Unit 13 –JQuery Basics Instructor: Brent Presley.
Functions.  Assignment #2 is now due on Wednesday, Nov 25 th  (No Quiz)  Go over the midterm  Backtrack and re-cover the question about tracing the.
Changing HTML Attributes each() function Anonymous Functions $(this) keyword.
Basic HTML swap with AJAX. Lets get our beloved html for our llama site. Open the index.html page and add a class to our navigation links. Then lets add.
IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.
IN THE DOCUMENT OBJECT MODEL, EACH LINE OF HTML IS AN ELEMENT (AN OBJECT), ABLE TO HAVE ATTRIBUTES, PROPERTIES AND VALUES. CSS TELLS THE BROWSER HOW TO.
CSS IS A LANGUAGE DESIGNED TO TARGET HTML ELEMENTS AND NODES BY TYPE, CLASS, ID AND VALUE, AND CHANGE THEIR VALUES CSS – change how your HTML looks and.
- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.
JQuery Animation. If you look at example1.html, you will see that it is a basic web page with links to the jquery library, and a script.js file and some.
Today… Python Keywords. Iteration (or “Loops”!) Winter 2016CISC101 - Prof. McLeod1.
JavaScript Tutorial. What is JavaScript JavaScript is the programming language of HTML and the Web Programming makes computers do what you want them to.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
COMPUTER PROGRAMMING I 5.05 Apply Looping Structures.
Tarik Booker CS 120 California State University, Los Angeles.
CHAPTER 4 DECISIONS & LOOPS
Loops BIS1523 – Lecture 10.
Introduction To Repetition The for loop
HTML & teh internets.
Tutorial 6 Topic: jQuery and jQuery Mobile Li Xu
Arrays and files BIS1523 – Lecture 15.
Creating a Baseline Grid
Error Handling Summary of the next few pages: Error Handling Cursors.
Incrementing ITP © Ron Poet Lecture 8.
Introduction to JavaScript
A second look at JavaScript
Functions BIS1523 – Lecture 17.
In Class Program: Today in History
Introduction to JavaScript
Software Development Techniques
Web Programming and Design
Chapter 8 JavaScript: Control Statements, Part 2
Presentation transcript:

Bill's Amazing Content Rotator jQuery Content Rotator

The content rotator we are going to make has a special feature. I wanted something that I could use in WordPress that a client who knows nothing about jQuery or even HTML could use. I wanted the client to just be able to add paragraphs in a normal way to a page and have them just work in the rotator. I didn't want the client to have to type in any additional classes or IDs. I didn't want to limit the client to any specific number of paragraphs. The following script is the result that I came up with. It could be modified in lots of ways for other uses and it is instructive on how to do this kind of thing with jQuery.

If you download, unzip and open the start file, you will see I have a simple page set up with an H2, a div with the ID of "container" and inside the container some paragraphs with quotes from students about the course. I have already included the jQuery library and linked it up. I also included an empty file for us to put our script into. There are two styles on a style sheet. The final result will take each quote one at a time and rotate them through in a loop on a timer.

The first thing we need to do is set the display of the paragraphs to none by default in the CSS. The rest will be taken care of in the jQuery. Next, we can add our document.ready() event handler to the top of the script.js file, as usual. Next, lets think about what we want to actually happen. We want to loop through the paragraphs on the page, one at a time on a timer, fading the paragraphs in, and then fading them out. When we have reached the last one on the page, we want to go back around to the first one and start all over again. There are lots of ways to do this. One way is to use a counter. When we get to the last paragraph, we set the counter back to the start. We could use a traditional programming loop, or we could have the program call itself to make it behave in a recursive fashion. We will actually do the last one.

Lets go ahead and make a counter variable and set it to 1. Then, I am going to make a new function OUTSIDE the document.ready() function. We can not use an inline, anonymous function in this case because we are going to have to call the function by name to get the recursive bit going. We will pass in the counter variable so we know which paragraph to get.

This is essentially the structure of the function we are going to write.

This will select the container nth child paragraph of the #container div and fade it in over two seconds. We initially set the counter to 1, which gets the first paragraph. It looks a little weird with the plus signs around the counter, but essentially we are breaking up the string inside the jQuery object so that we can use our counter variable and have it actually get evaluated as a variable. We are using the CSS nth-child() syntax for this which is what will allow us to deal with as many paragraphs as we want. Also, as a side note, the nth child does not use the zero index for counting. Instead counting starts at 1, just to make things even more confusing.

Next we will add a call back function to the to the fadeIn animation. This is because we want something to happen after the paragraph has faded in. Everything else we do is going to happen in that call back function. We are going to run an if/else statement inside the call back function to find out if we are on the last paragraph or not.

In the if statement we want to check and see if this paragraph, the one we just faded in, is the last child paragraph of the #container div. So we use the "this" keyword again for it. Lets leave this for now and figure out the else. I think it will make more sense that way. The else statement will run unless we are on the last paragraph of the div.

Inside the else statement, we are going to set a timer. setTimeout will take a function and run it AFTER waiting a specific amount of time. In this case, seven seconds. We can replace the doSomething with an anonymous function that we want to run after waiting seven seconds. We faded in the paragraph, we waited seven seconds, now we want to fade that paragraph out.

We want to take that same paragraph and fade it out. We are using the same counter as before. If we are on the first paragraph, the counter is still set to 1. After we have finished fading the paragraph out, we need one more call back function. What do we want to happen next? We want to get the next paragraph and start all over again.

We want to increment the counter and run contentRotator again with the new counter passed in. Now it will fade in paragraph number 2, wait 7 seconds, check to see if that is the last paragraph and if it is not, it will fade it out, set the counter to 3 and run the function again getting paragraph 3 instead. In programming, this is called recursive, which is a special kind of looping. Now we just need to fix the if part of the program.

For the if part of the program, we really just need an exact copy of what we did in the else statement with the timer and everything. The only really big difference here is that the counter needs to get set back to one because we are on the last paragraph and we want to rotate around to the beginning again.

The very last thing we have to do, is tell the document.ready() function to run this contentRotator() function when the page loads to get it started. From then on it will just run automatically.