Home

ABCs of OOP Objects

Advanced JavaScript Example

ADVANCED CODE # 1 (OPTIONAL):

What if you want to have the box reach the right edge of the screen without exiting and then return to the right side of the screen. Programming is about problem solving, so you could say something like this: I know the box width is 100px so I can subtract it from the width and use it in the if/else statement.

1. Write the following variable below the other variables to hold a reference to the box width on the page.
   
   var boxSize = document.getElementById("myBox").style.width;
   
   
2. Write the following alert method below the boxSize variable to trace its width:
   
   alert(boxSize);
   
   
3. Preview page in browser.
   
   TEST RESULT: You should see the Alert dialog box does not return a result. We will fix that in the next step. Click the OK button and the box animate across the screen.  Return to the page to make an edit.
   
   
4. Add the following style attribute to the <div> tag and optionallly remove the width:100px from the CSS rule.
   
   <div id = "myBox" style="width:100px"> My Black Box</div>
   
   NOTE: The width:100px in the <style> tag will NOT work. It has to be a style attribute not a stye tag (e.g., <style>).
   
   
5. Preview page in browser again:
   
   TEST RESULT: You should see the Alert dialog box display this time 100px. Click the OK button and the box animate across the screen.  Return to the page to make another edit. Because we need a number and not a string, we will use the built-in parseFloat method to get just the number WITHOUT the "px."
   
   
6. Wrap a parseFloat method around the code on the right side of the variable.
   
   var boxSize = parseFloat(document.getElementById("myBox").style.width);
   
   
7. Preview page in browser again:
   
   TEST RESULT: You should see the Alert dialog box display this time 100. Click the OK button and the box animate across the screen.  Return to the page to make yet another edit.
   
   
8. Comment out the alert statement: //alert(boxSize)
   
   
9. Modify the if/else statement to read:
   
   if(currentXPos > windowSize - boxSize);
   
   
10. Preview page in browser again:
    
    TEST RESULT: You should see the box animate across the screen and return to the left of the stage before it exit the stage on the right.

ADVANCED CODE # 2 (OPTIONAL):

1. Save the jQuery file with a different name (e.g., jQuery_Simplified).
2. Delete all of the code between the $(document).ready function:
   

$(document).ready(function(e) 
{  
    //DELETE ALL OF THE CODE WITHIN THIS FUNCTION
}); // end of document ready

3. Add the following code highligthed in bold:

$(document).ready(function(e) 
{  

$("#myBox").animate({left:950}, 2000, "linear",  repeat);

	function repeat()
	{
		$("#myBox").css({left:0});
		$("#myBox").animate({left:950},2000, "linear", repeat);
	}

	}); // end of document ready

4. Preview page in browser.

TEST POINT: You should see the box animate but with a lot less code using jQuery.

5. (Optional) Replace "#myBox" with this in both of these lines of code:
   
   $(this).css({left:0});
   $(this).animate({left:950},2000, "linear", repeat);
   
   
6. Preview page in browser.

TEST POINT: You should see the box animate but but with a direct reference to the box.

© 2015. RMCS. All rights reserved.