Jegsworks: Free Online Computer Lessons Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Resources & Examples > Jan's Web Scripting Demo > Samples

Icon: Arrow - Previous pagePrevious  

Jan's Web Scripting Demo:
Samples

Next we will look at some more complex examples of web pages that use the techniques described in the earlier pages.

Sometimes, to understand something thoroughly, you just have to dig down into the guts of it and study it out. So the source code for the samples is commented to help you out. The notes below point out what to look for. (You might guess what time of year these were constructed!)

Each example below opens in its own tab or window. Return to this page to go to the next example.

Example: Santa LetterLetter to Santa

Fill in a form and get a letter to Santa that includes your choices.

  • CSS Styles: both in HEAD and inline
  • Pre-loading of images: gift images
  • JavaScript: Tranferring input from form inputs to final letter, esp. using innerHTML property; changing background to an animated GIF image
  • CSS Centering: Set a width and set margin: 0 auto to center DIV
  • CSS Display property: Final letter display:block; original form is hidden with display:none
Go see it!Icon: In Site

Example: Falling SnowFalling Snow

A script creates the illusion of falling snow from a few images.

  • JavaScript Animation: Create the background using script and several images instead of an animated gif
  • JavaScript Pre-loading images: falling snow gifs
  • JavaScript array: Falling snow gifs set into an array
  • JavaScript setInterval: Call function that replaces the background image
  • JavaScript: Syntax to use in script for changing of background image source
Go see it! Icon: In Site
[Warning - If your browser does not handle this script well, it may strobe very brightly. ]

Example: NativityNativity

A picture and text gradually come into view. Hotspots on the image change the label text. A script captures the coordinates of the mouse.

  • CSS Visibility property: Hide parts of page with visibility:hidden which leaving the space blank
  • JavaScript: onClick for button triggers function that gradually reveals image and then text
  • CSS3 Transition property: Change opacity from 0% to 100% to reveal
  • Replace text: onMouseOver shows labels using innerHTML; onMouseOut returns the label to the original
  • Capture coordinates: onMouseDown triggers function that displays current location of mouse pointer; on MouseUp hides the coordinates

Go see it!Icon: In Site

Example: Stacked CardsInteractive Stacked Cards

Moving the mouse over a card moves it to the top of the stack and changes the image on the card to one with a colored background. CSS arranges the cards in a fanned-out arrangement.

  • CSS Z-Index property: Stack elements vertically
  • CSS Position, Left, and Right properties: Position an element
  • CSS3 Border Radius property: Makes corners of cards rounded
  • CSS3 Box Shadow property: Adds a shadow to card and to image
  • CSS3 Transform property: Rotate card, scale card dimensions
  • CSS3 Transition property: Gradually reveals element
  • Pseudo-class Hover: Hovering over a card changes several properties: z-index, rotation, and scale. It also changes the image on the card. No JavaScript is needed for these changes.
  • JavasScript: Inline script in onMouseOver and onMouseOut changes the image on the card.
Go see it!Icon: In Site