If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

Rebecca Boucher

Page history last edited by reboucher 10 years, 4 months ago

10: How to add your name in bubbles using Javescript:

This was my hour of code activity. Exchange your name where it says "Becca"

var red = [0, 100, 63];

var orange = [40, 100, 60];

var green = [75, 100, 40];

var blue = [196, 77, 55];

var purple = [280, 50, 60];

var myName = "Becca";

var letterColors = [red, orange, green]

if(15 > 5) {

bubbleShape = "circle";

}

else {

bubbleShape = "square";

}

drawName(myName, letterColors);

bounceBubbles()

9: How to add a register form to your page:

http://www.htmlfreecodes.com/Register_Form.htm

Create a div and add this to the code in the middle of the open and close div tags

<tr>

<h1>Register</h1>

<tr>

Username: <input type="text" size="15" maxlength="25" name="username0">

</td>

</tr>

<tr>

Password: <input type="password" size="15" maxlength="25" name="password0">

</td>

</tr>

<tr>

Confirm Password: <input type="password" size="15" maxlength="25" name="cpassword">

</td>

</tr>

<tr>

Email: <input type="text" size="15" maxlength="25" name="email">

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form></td>

</tr>

</table>

8: How to make your cursor a magic wand:

http://www.dynamicdrive.com/dynamicindex13/star3.htm

Add this code to your HTML to make the cursor a wand.

Magic Wand cursor II (By Kurt at kurt.grigg@virgin.net)

Modified and permission granted to Dynamic Drive to feature script in archive

For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com

if (document.all){

with (document){

write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')

write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>')

write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>')

write('</div>')

}

if (document.layers)

{window.captureEvents(Event.MOUSEMOVE);}

var yBase = 200;

var xBase = 200;

var step = 1;

var currStep = 0;

var Xpos = 1;

var Ypos = 1;

if (document.all)

{

function MoveHandler(){

Xpos = document.body.scrollLeft+event.x;

Ypos = document.body.scrollTop+event.y;

}

document.onmousemove = MoveHandler;

}

else if (document.layers)

{

function xMoveHandler(evnt){

Xpos = evnt.pageX;

Ypos = evnt.pageY;

}

window.onMouseMove = xMoveHandler;

}

function animateLogo() {

if (document.all)

{

yBase = window.document.body.offsetHeight/6;

xBase = window.document.body.offsetWidth/6;

}

else if (document.layers)

{

yBase = window.innerHeight/8;

xBase = window.innerWidth/8;

}

if (document.all)

{

for ( i = 0 ; i < starsDiv.all.length ; i++ )

{

starsDiv.all[i].style.top = Ypos + yBase*Math.sin((currStep + i*4)/12)*Math.cos(400+currStep/200);

starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(currStep/200);

}

else if (document.layers)

{

for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!

{

var templayer="a"+j

document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(400+currStep/200);

document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(currStep/200);

}

currStep+= step;

setTimeout("animateLogo()", 10);

}

animateLogo();

</script>

7: How to add a contact us form to your page:

http://www.htmlfreecodes.com/Contact_us_Form.htm

Make a div and add this to the code with the div code.

<html>

<head>

.style1 {

text-align: center;

}

.style2 {

font-size: 40pt;

color: #0000FF;

font-family: "Times New Roman", Times, serif;

}

.style3 {

font-size: medium;

color: #0000FF;

font-family: "Times New Roman", Times, serif;

}

.style5 {

font-family: "Times New Roman", Times, serif;

border-right-style: solid;

border-right-width: 0px;

border-top-style: solid;

border-top-width: 0px;

background-color: #CCFFFF;

}

.style6 {

text-align: center;

border-left-style: solid;

border-left-width: 0px;

border-right-style: solid;

border-right-width: 0px;

border-top-style: solid;

border-top-width: 0px;

background-color: #CCCCFF;

}

.style8 {

border: 3px dashed #0000CC;

}

.style9 {

font-family: "Times New Roman", Times, serif;

border-right-style: solid;

border-right-width: 0px;

background-color: #CCFFFF;

}

.style11 {

font-family: "Times New Roman", Times, serif;

border-right-style: solid;

border-right-width: 0px;

border-bottom-style: solid;

border-bottom-width: 0px;

}

.style12 {

font-family: "Times New Roman", Times, serif;

padding-left: 10px;

background-color: #CCFFFF;

}

.style13 {

font-family: "Times New Roman", Times, serif;

border-right-style: solid;

border-right-width: 0px;

background-color: #D5F1FF;

}

.style15 {

font-family: "Times New Roman", Times, serif;

border-right-style: solid;

border-right-width: 0px;

border-bottom-style: solid;

border-bottom-width: 0px;

background-color: #D5F1FF;

}

.style17 {

font-family: "Times New Roman", Times, serif;

padding-left: 10px;

background-color: #D5F1FF;

}

.style18 {

font-family: "Times New Roman", Times, serif;

border-left-style: solid;

border-left-width: 0px;

padding-left: 10px;

background-color: #CCFFFF;

text-align: center;

}

.style19 {

font-size: xx-small;

}

</style>

</head>

<body>

<tr>

<strong class="style11">Contact us</strong></span><br class="style3">

</tr>

<tr>

</div>

</span> </td>

</tr>

<tr>

<td class="style17" style="width: 268px; height: 40;"><strong>Your Email:</strong></td>

</tr>

<tr>

<td class="style12" style="width: 268px; height: 40;"><strong>Your website:</strong></td>

</tr>

<tr>

<td class="style17" style="width: 268px; height: 123px;"><strong>Comment:</strong></td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

6: How to add a password to your page:

http://www.htmlfreecodes.com/Put_password_on_your_website_to_protect_your_pages.htm

<!--//

/*This Script allows people to enter by using a form that asks for a

UserID and Password*/

function pasuser(form) {

if (form.id.value=="user") {

if (form.pass.value=="password") {

location="http://www.htmlfreecodes.com"

} else {

alert("Invalid Password")

}

} else { alert("Invalid UserID")

}

//-->

</script>

<font size="3">Login

Area</font></b></i></h1></center></td></tr>

<font size="3">UserID:</font></b></i></h1></td>

<td height="64" bordercolor="#FFFF00" style="border: 1px solid #FF0000"><form name="login"><input

name="id" type="text"></td></tr>

<font size="3">Password:</font></b></i></h1></td>

<td bordercolor="#FFFF00" style="border: 1px solid #FF0000"><input name="pass"

type="password"></td></tr>

<tr><td bordercolor="#FFFF00" style="border: 1px solid #FF0000" height="51"><center><input type="button" value="Login"

onClick="pasuser(this.form)"></center></td>

<td bordercolor="#FFFF00" style="border: 1px solid #FF0000" height="51"><center><input

type="Reset"></form></td></tr></table></center>

5: How to add a welcome message to your site:

http://www.htmlfreecodes.com/Show_welcome_message_to_visitors_of_your_website.htm

<html>

<head>

alert("Welcome to my site")

</script>

</head>

</html>

4: How to add an email form to your page:

http://www.htmlfreecodes.com/Html_email_form.htm

<TR>

</DIV>

</TD>

</TD>

</TR>

<TR>

<TD><DIV align="right"><B>Email:</B></DIV>

</TD>

<TD>

</TD>

</TR>

<TR>

<B>Comment:</B>

</DIV>

</TD>

</TR>

</TABLE>

<font face="Tahoma"><a target="_blank" href="/http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none">Html

cript Free Code</span></a></font>

3: How to add a calendar to your page:

http://www.htmlfreecodes.com/Todays_date_on_website_on_a_nice_calendar.htm

<html>

<head>

</head>

<body>

<!-- Begin

monthnames = new Array(

"January",

"Februrary",

"March",

"April",

"May",

"June",

"July",

"August",

"September",

"October",

"November",

"Decemeber");

var linkcount=0;

function addlink(month, day, href) {

var entry = new Array(3);

entry[0] = month;

entry[1] = day;

entry[2] = href;

this[linkcount++] = entry;

}

Array.prototype.addlink = addlink;

linkdays = new Array();

monthdays = new Array(12);

monthdays[0]=31;

monthdays[1]=28;

monthdays[2]=31;

monthdays[3]=30;

monthdays[4]=31;

monthdays[5]=30;

monthdays[6]=31;

monthdays[7]=31;

monthdays[8]=30;

monthdays[9]=31;

monthdays[10]=30;

monthdays[11]=31;

todayDate=new Date();

thisday=todayDate.getDay();

thismonth=todayDate.getMonth();

thisdate=todayDate.getDate();

thisyear=todayDate.getYear();

thisyear = thisyear % 100;

thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));

if (((thisyear % 4 == 0)

&& !(thisyear % 100 == 0))

||(thisyear % 400 == 0)) monthdays[1]++;

startspaces=thisdate;

while (startspaces > 7) startspaces-=7;

startspaces = thisday - startspaces + 1;

if (startspaces < 0) startspaces+=7;

document.write("<table border=2 bgcolor=white ");

document.write("bordercolor=black><font color=black>");

document.write("<tr><td colspan=7><center><strong>"

+ monthnames[thismonth] + " " + thisyear

+ "</strong></center></font></td></tr>");

document.write("<tr>");

document.write("<td align=center>Su</td>");

document.write("<td align=center>M</td>");

document.write("<td align=center>Tu</td>");

document.write("<td align=center>W</td>");

document.write("<td align=center>Th</td>");

document.write("<td align=center>F</td>");

document.write("<td align=center>Sa</td>");

document.write("</tr>");

document.write("<tr>");

for (s=0;s<startspaces;s++) {

document.write("<td> </td>");

}

count=1;

while (count <= monthdays[thismonth]) {

for (b = startspaces;b<7;b++) {

linktrue=false;

document.write("<td>");

for (c=0;c<linkdays.length;c++) {

if (linkdays[c] != null) {

if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {

document.write("<a href=\"" + linkdays[c][2] + "\">");

linktrue=true;

}

if (count==thisdate) {

document.write("<font color='FF0000'><strong>");

}

if (count <= monthdays[thismonth]) {

document.write(count);

}

else {

document.write(" ");

}

if (count==thisdate) {

document.write("</strong></font>");

}

if (linktrue)

document.write("</a>");

document.write("</td>");

count++;

}

document.write("</tr>");

document.write("<tr>");

startspaces=0;

}

document.write("</table></p>");

// End -->

</script>

</center>

2: How to add snow to your page:

http://www.htmlfreecodes.com/Snow_on_the_page.htm

// Set the number of snowflakes (more than 30 - 40 not recommended)

var snowmax=35

// Set the colors for the snow. Add as many colors as you like

var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like

var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)

var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)

var sinkspeed=0.6

// Set the maximal-size of your snowflaxes

var snowmaxsize=22

// Set the minimal-size of your snowflaxes

var snowminsize=8

// Set the snowing-zone

// Set 1 for all-over-snowing, set 2 for left-side-snowing

// Set 3 for center-snowing, set 4 for right-side-snowing

var snowingzone=3

///////////////////////////////////////////////////////////////////////////

// CONFIGURATION ENDS HERE

///////////////////////////////////////////////////////////////////////////

// Do not edit below this line

var snow=new Array()

var marginbottom

var marginright

var timer

var i_snow=0

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)

var ns6=document.getElementById&&!document.all

var opera=browserinfos.match(/Opera/)

var browserok=ie5||ns6||opera

function randommaker(range) {

rand=Math.floor(range*Math.random())

return rand

}

function initsnow() {

if (ie5 || opera) {

marginbottom = document.body.clientHeight

marginright = document.body.clientWidth

}

else if (ns6) {

marginbottom = window.innerHeight

marginright = window.innerWidth

}

var snowsizerange=snowmaxsize-snowminsize

for (i=0;i<=snowmax;i++) {

crds[i] = 0;

lftrght[i] = Math.random()*15;

x_mv[i] = 0.03 + Math.random()/10;

snow[i]=document.getElementById("s"+i)

snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]

snow[i].size=randommaker(snowsizerange)+snowminsize

snow[i].style.fontSize=snow[i].size

snow[i].style.color=snowcolor[randommaker(snowcolor.length)]

snow[i].sink=sinkspeed*snow[i].size/5

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)

snow[i].style.left=snow[i].posx

snow[i].style.top=snow[i].posy

}

movesnow()

}

function movesnow() {

for (i=0;i<=snowmax;i++) {

crds[i] += x_mv[i];

snow[i].posy+=snow[i].sink

snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);

snow[i].style.top=snow[i].posy

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=0

}

var timer=setTimeout("movesnow()",50)

}

for (i=0;i<=snowmax;i++) {

document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")

}

if (browserok) {

window.onload=initsnow

}

</script>

1: How to add a Google search bar to your page:

</td></tr></TABLE>

</FORM>

</center>

<font face="Tahoma"><a target="_blank" href="/http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>

I got this from: http://htmlfreecodes.com/Google_Search_on_Your_Page.htm

Comments (11)

Entry #1: 4/4. Great job, all required elements are provided. Being able to search directly from your site to Google is a useful code to add because that way the visitor does not leave your site.

Entry #2: 4/4. All required elements are provided. Adding snow is neat dynamic concept but be sure to do it in a visually pleasing approach.

Entry #3 & #4: 4/4 for both entries. Both entries are very useful elements to add onto a site and all required pieces are included in your post. Be sure to label your posts #1, #2...

I can not grade your posts until you organize the Wiki with wiki entry numbers.

Post #5 & #6: 3/4. These are both useful codes to know for a practical site- in the future try to provide the directions in your own words. I see a lot of code adn little directions.

Post #7 & #8: All required elements are provided. #7, provide more details on where to place the code in the HTML- also sometimes these codes can cause the site design to be distracting from the information being provide. #8, how do user submit the forms and designers collect the information?

Very good amount of useful code! I really enjoy the pop up message notifying the user, super useful!

I am definitely going to use some of the code you provided. Most of it I haven't seen before and it will be of great use to me. Especially the calendar, which I think would fit on almost any site. Thanks, Good Job!

I thin entry 9 is very useful as it can help someone get information about their audience and then can change their site to tailor it to their audience.

Excellent job on your wikis Becca! Your entries are very useful, but I really like the visual aide to all of your entries, it helped me to quickly identify what each entry was on.

Post #9 & 10: 4/4. I really like the Javascript post- just make sure when you add it to a site it is not distracting from the look of the overall site. I am interested to know what happens after people register? Where does the information go?

You don't have permission to comment on this page.

To join this workspace, request access.

Already have an account? Log in!

Loading…

This is your Sidebar, which you can edit like any other page in your workspace.

This Sidebar appears everywhere on your workspace. Add to it whatever you like -- a navigation section, a link to your favorite web sites, or anything else.

Loading…

Rebecca Boucher

Rebecca Boucher

Page Tools

Insert links

Comments (11)

Lori said

Lori said

Lori said

Lori said

Lori said

Lori said

vltrofimov said

aidoherty said

jaalbrecht said

sykinder said

Lori said

Join this workspace

Navigator

SideBar

Recent Activity