Trick or Treat - Alex Style

Tonight I sat Alex down and had a man to man talk with him about the basics (from a kids perspective) of Halloween. I explained that "We go out to people’s houses, say trick or treat, and they give us candy. Do you want candy?" Alex responded "I want a lollypop!"



Our first stop was to pick up some friends. Alex was thrilled when he got a lollypop at their house. Once we got started it took a while for him to get comfortable with going up to houses. Finally we came to a house where some other kids were explaining their costumes to the residents. Alex got over his nerves, ran up the steps and announced "Tada! Ladybug!" Apparently his Spiderman costume was lost on him.



So there he was, standing on a step dressed up as Spiderman/ladybug with a lollypop in his mouth and a near empty trick or treat bag. The woman at the door held out the bowl of candy and asked if he would like one. Alex smiled up at her and said "No thanks, I have a lollypop."

russelldad_blog_tags
_family_

Alex says thank you

A few days ago Alex and Christine gave each other a kiss. This dialog followed...





Christine: Thank you Alex!

Alex: No, Thank You Mama.

Christine: No, Thank you Alex!

Alex: No, Thank You Mama.

Christine: No, Thank you Alex!

Alex: [sternly]No Mama... Stop Mama... Thank You Mama.

Christine: [pause] You're welcome Alex!

Alex: [big smile] No problem Mama!



russelldad_blog_tags
_family_

Resizable images on a web page

screen shot
The other day trying to make an audiobook using the instructions
from my old audiobook post.
I found myself jumping back and forth between the instructions
and the full size screen shot that was linked via a thumbnail.
The thumbnail to the right is the one from the audiobook post…



I realized that it would be nicer if the image resized inside the context of
the page instead of loading a new page when I clicked on it. That way I could
still read the instructions and see the image at its full size or thumbnail
size. Then I realized that it’s pretty easy to make an image do that. Try it...
Click on the thumbnail. It will alternatively resize between a big and a small
image without reloading the page!




How it works in 3 parts:



Part 1: A JavaScript function that tells the image to resize.
You add this to the <head> section of your page once and any image can use it. Here's the code:

<script>
/* changeImageSize(image, bigWidth, bigHeight,
smallWidth, smallHeight)

Purpose: alternates the size of an image on
the page from big to small based on
the settings provided by the call to
the function.

Expects:
image: an image tag object
bigWidth: the image width to use when
displaying a the big size
bigHeight: the image height to use when
displaying a the big size
smallWidth: the image width to use when
displaying a the small size
smallHeight: the image height to use when
displaying a the small size

Note: the decision to swith size is based on a
comparison of the image objects current
width to the big size.

usage:

<img width="212" height="230"
align="right"
alt="dialog sample"
class="imgGrow"
src="pic.jpg"
onclick="changeImageSize(this,530,575,212,230)">


*/
function changeImageSize(image, bigWidth, bigHeight,
smallWidth, smallHeight)
{


// see if the width of the image is set to
// the small size if so, make it big
if (image.width == smallWidth)
{
image.width=bigWidth;
image.height=bigHeight;
}
else
{
image.width=smallWidth;
image.height=smallHeight;
}
}
</script>




Part 2 (optional): CSS
that to causes the green highlight and changes the cursor type when you mouse over the image.
You add this to the <head> section of your page. It's optional, but very cool to use.
Here's the code:




<style>
/* images that have the ability to grow and
shrink should use this class */
.imgGrow {
margin: 10pt 10px 10px 10pt;
padding: 10px;
color:green;
cursor: hand;
border:1px dashed;
text-decoration:none;

}
</style>





Part 3: The image tag. This is the HTML you would use to add the image
to your page. Here's the code:


<img width="212" height="230"
align="right"
alt="dialog sample"
class="imgGrow"
src="pic.jpg"
onclick="changeImageSize(this,530,575,212,230)">


  1. The width and height tags should be set to the initial size you want the image displayed.

  2. The class="imgGrow" tells the image to use the style we defined in step #2.

  3. Set src="[the url location of your image]".

  4. The onclick="changeImageSize(this,220,146,110,73)" tag is what makes the image resizable. Its 5 arguments in order

    • the image object: just type "this" its a javascript keyword

    • bigWidth: the image width to use when displaying a the big size

    • bigHeight: the image height to use when displaying a the big size

    • smallWidth: the image width to use when displaying a the small size

    • smallHeight: the image height to use when displaying a the small size




Once you have parts 1 and 2 added to you're page just add images using the convention in part 3.



Share and Enjoy.





russelldad_blog_tags
_code_
_invention_

What Alex wants for Christmas

Last night Christine and I were sitting on our bed talking about Christmas presents. Alex climbed up and the following conversation commenced.






Alex: Whaya doing mama?

Christine: Writing down things I want for Christmas. Do you want something for Christmas?

Alex: ummm.... YEAH!

Christine: What would you like?

Alex: ummm... appows!

Christine: Ok apples, anything else?

Alex: ummm... nanannas!

Christine: Banannas check, anything else?

Alex: chewwies?

Christine: Sure, Cherries! Anything else?

Alex: and a ciwcle

Christine: One Circle. Got it, anything else?

Alex: no thanks.




russelldad_blog_tags
_family_