Resources: Javascript Plug-ins
Activity: Exploring adding interactive content through
scripting
- One of the way you can add user
interactivity to your web pages is through client-side programming
- The most popular client side programming
language in use today is Javascript. Programmers write javascript code, and
then link to it within script tags, or link to it externally with a link
tag.
- Most often, web programmers use an application library such as
jQuery, MooTools, etc.
- There are many free script modules in the public domain that can add
immediate pizazz on your page. YOU CAN CHOOSE THE SCRIPT YOU WANT TO
INCLUDE, YOU DON'T HAVE TO UTILIZE THE FONTSIZER EXAMPLE ILLUSTRATED
BELOW.
- This resource will show you how to include
the fontsizer code you see on the upper right corner of this page. Follow
the four steps below. Place all appropriate files on your webspace in the same folder as your html file.
- You need four things for the fontsizer feature
- First, you need a link to the javascript code. Place this
inside the <head> tag. To simplify debugging, place it right before the
closing </head> tag, but remember, it could go anywhere: <script
type="text/javascript" src="fontsizer.js"></script>
- Second, you need the external file the above link is pointing to.
Once you access the file, save it and move it to your account on Pegaus.
Access the file HERE.
- Third, you need to include the customizing code that works with the
fontsizer javascript code you just downloaded. This code needs to go
directly inside your <body> tag (or an including container div, if you
are using one) Update the text so that it is appropriate for your page:
<ul
class="toolbar">
<li><a href="http://www.cs.iupui.edu/~mroberts/n241"
title="Return to the N241 Home Page">N241 Home </a></li>
<li><a href="#" onclick="window.print()" title="Opens
the print dialog box.">Print</a></li>
<li style="width:40px"><a href="#" onmousedown="fontSizer(1,'px')"
title="Increase the text size on this page.">A↑</a></li>
<li><a href="#" onmousedown="fontSizer(-1,'px')"
title="Decrease the text size on this page.">A↓</a></li>
</ul>
- Last, you need to include the styling instructions for the "toolbar"
class referenced in the above code snippet. You can place this code in
your external css style file
ul.toolbar {
margin:0;
margin-right: 45px;
padding:0;
text-align:right;
}
ul.toolbar li {
display:inline;
padding:0 10px;
list-style-type:none;
font-size:10px;
}
ul.toolbar li a {
text-decoration:none;
color:#000080;;
}
ul.toolbar li a:hover {
text-decoration:underline;
background-color:#000080;
color:#fff;
}