Dick's Cut and Paste Tutorial


Home ] Up ]

Home
Post Your Link on My Site!
View all the Posted Links
Dick's Web Forum
Dick's Newsletter
Dick's Online Chat Room
Dick's Animated GIFS
Dick's JavaScript
Dick's Backgrounds
Dick's Horizontal Lines
Dick's Banners
Dick's Picture Viewer
Dick's FAQ
Dick's How to Link to Me
Dick's Web Design Lnks
Dick's Thanks Page
About Dick
Sign my Guestbook
View my Guestbook
______________________

To receive my newsletter, just enter your e-mail address: and click GO!

Subscribe      Unsubscribe

Tell A Friend about my site!
Type In Your Name:

Type In Your E-mail:

Your Friend's E-mail:

Your Comments:

Receive copy: 


   

 As much as I love GIFs, there is more to web page design than animations, (yes, you heard me say that). I had stayed away from JavaScript, because I could not afford the time to first learn the code, and then write the code ( I never wanted to learn HTML either). After investigating a little, I have found a wealth of freeware scripts on the web. They, like animated gifs, add a little spark to your page. I couldn't find instructions to suit me so, below is a basic tutorial on how to copy and paste the script into your HTML, and make it work. I'm learning this too as I go so bear with me, there may be some things that don't quite work.
       And... if you want to further your JavaScript knowledge, or just learn to write your own, try this link Keyword Link: JavaScript at Barnes and Noble.com .


   First, the basics,
All web pages are written in HTML code.
JavaScript is inserted into the HTML code.
Simple.

    JavaScript freeware is abundant on the web, but most of the documentation that comes with it is written like you already knew what to do.

     Following, is a step by step description of how to copy and paste this code example.

   This page has some JavaScript that puts a message, one letter at a time on the status bar ( that's the bottom line of your browser where it normally reports what your browser is doing). In this page's status bar are the words " I love to copy and paste!". In case you weren't watching, the letters came one at a time from right to left. This type is called a text scroller. And can be found on my One letter scroller page

Now, lets see how it's done.

    A sample of the HTML for this page when it started looks like this,

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>New Page 1</title>

</head>

<body>

</body>

</html>

   I went to The JavaScript Source and found a simple sample code for a text scroller. And I have put a copy of the code in next. I know it looks like a lot of stuff, but you don't have to actually know anything, all it takes is copy and paste, so don't stop now.

   Glance through the code below. You don't have to memorize anything, I only put this code here so you could look at it and see that it isn't scary, it's just code written by somebody to make your browser do certain things. Take notice of the instructions. It might make following my explanation a little easier.

 

<!-- TWO STEPS TO INSTALL ONE LETTER SCROLL: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler to the BODY tag -->

<!-- STEP ONE: Add this code into the HEAD of your HTML document -->

<!-- Original: Pun Man Kit <mkpunnl@netvigator.com> -->

<!-- Web Site: http://home.netvigator.com/~mkpunnl -->

<!-- This script and many more are available online from -->

<!-- The JavaScript Source!! http://javascriptsource.com -->

<script LANGUAGE="JavaScript">

<!-- Original: Pun Man Kit <mkpunnl@netvigator.com> -->

<!-- Web Site: http://home.netvigator.com/~mkpunnl -->

<!-- This script and many more are available online from -->

<!-- The JavaScript Source!! http://javascriptsource.com -->

<!-- Begin function scroll(jumpSpaces,position) {

var msg = "I love to copy and paste!"

var out = ""

if (killScroll) {return false}

for (var i=0; i<position; i++){

out += msg.charAt(i)}

for (i=1;i<jumpSpaces;i++) {

out += " "}

out += msg.charAt(position)

window.status = out

if (jumpSpaces <= 1) {

position++

if (msg.charAt(position) == ' ') {

position++ }

jumpSpaces = 100-position

}

else if (jumpSpaces > 3) {

jumpSpaces *= .75}

else {

jumpSpaces--}

if (position != msg.length) {

var cmd = "scroll(" + jumpSpaces + "," + position + ")";

scrollID = window.setTimeout(cmd,5);

}

else {

scrolling = false

return false}

return true;

}

function startScroller() {

if (scrolling)

if (!confirm('Re-initialize snapIn?'))

return false

killScroll = true

scrolling = true

var killID = window.setTimeout('killScroll=false',6)

scrollID = window.setTimeout('scroll(100,0)',10)

return true

}

var scrollID = Object

var scrolling = false

var killScroll = false

// End -->

</script>

<!-- STEP TWO: Add the onLoad event handler to the BODY tag -->

<onLoad="startScroller()" background="spacebackground.gif" bgproperties="fixed"

text="#FFFF00" link="#00FFFF">

<!-- Script Size: 1.67 KB -->


    That's the code. Your browser sees this code while a page is loading, and if everything is right, it knows what to do. It writes what you tell it to in the status bar of a visitors browser window. That's all.

    Just a few mouse clicks more,

   Now we get down to it. You'll have to have your page authoring software or your online page building ready in the HTML view, when your ready to paste the code into your page. If your just reading then never mind.  Either way, now's the time to see how copy and pasting makes it work.

    The author of this script, has added some handy instructions with the script (not all authors do that, it's a nice touch ). 

    Up at the beginning it says,

<!-- TWO STEPS TO INSTALL ONE LETTER SCROLL: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler to the BODY tag -->

<!-- STEP ONE: Add this code into the HEAD of your HTML document -->

 

   Ok, we can do that,

Highlight the script all the way down until you find the step two instructions.
Stop right before the step two instructions.
Copy it.
Open your HTML document or you HTML editor.
Find the <head> of your page.
Right after it, paste the script.

 

    Now step two,

Find the step two instructions and highlight all the way down.
Copy it.
Find the <body> tag in your document.
Right after it, paste the script.    

 

    One last step to personalize this script for your page,
To change the original status bar message from what the author put in the script to your own message, scroll through the script in your HTML editor until you find,

       {var msg = "Another JavaScript Example! Do you like it?"
This is the author's message, so to change it click on the text in quotation marks, and change it. Mine looks like this,

        {var msg = "I love to copy and paste!"
Save your work and view it in your browser. I hope it works the first time, but if it doesn't you'll get an error message. Don't worry, check your script again. make sure that all the parts are where all the parts are supposed to be. This code works, so if you get an error, check your work, you'll find the problem.
That's about it.

 

 

A few last things,

You can change other variables with this sample of script to suit your needs, and with most other ones.
After you have one working with the authors settings then play around until you are happy.
I might have missed some of the script while making this page, so you'd be safer copying the script right from the source. You can find this script at http://home.netvigator.com/ or go to my JavaScript collection page.
To see how this looks in the real world, right click on this page and select view source. Find my <head> and <body> tags and check it out. You can view source on any page on the web, and see how someone else does it.

    That's all there is to simple copy and paste JavaScript. Be sure to give credit to the authors by way of a link, because they are the ones that make it all up in the first place. Other than that, have fun.

 

 


____________________
Buy your books online at
barnesandnoble.com Homepage Check out books on Computers   Try a quick search by Keyword Link: Web Design And be sure to check out their
Special Feature
______________________



Free Webtools for Webmasters



Free Web Tools!


______________________

CDNOW


Shop here!

Home ] Post Your Link on My Site! ] View all the Posted Links ] Dick's Web Forum ] Dick's Newsletter ] Dick's Online Chat Room ] Dick's Animated GIFS ] Dick's JavaScript ] Dick's Backgrounds ] Dick's Horizontal Lines ] Dick's Banners ] Dick's Picture Viewer ] Dick's FAQ ] Dick's How to Link to Me ] Dick's Web Design Lnks ] Dick's Thanks Page ] About Dick ]

 

 

1