line 1
line 2
line 3
line 4
line 5
Pretty simple stuff, click on a button (or link) and see more stuff on the web page (sometimes the web page gets taller).
So why write a blog (also in my list of programs)? I used to always blog
about a little anecdote; e.g., my wife asked me to throw out the garbage,
and... . This is a return to my anecdotal blogs. In this case I've been
job hunting, and applied for work at a local Chevrolet dealership. When I
got home I decided I should book up on the latest offerings from Chevrolet
and brought up http://chevrolet.com on
my browser. I noticed that Chevrolet's website (or maybe it was the
dealer's website) uses a lot of "show more" links; i.e., you click
on the link and it show more information on the page. I thought this was a good
idea; something that could be used on an online resume, or something like that.
I.e., you want to show the reader just enough to get their interest, but not so
much that it turns them off.
Not wanting to write anymore code then I have to, I searched the web for "show more" + link.
I was amazed that all the hits I got were for how to use a certain javascript package to get
this effect. Doesn't anybody write their own code anymore (OK, that sounds funny after stating,
"Not wanting to write anymore code...")? If I started reading more hits or even tried another
search string, I probably would've come across a page with an algorithm that just uses HTML,
JavaScript and CSS. Not wanting to read a bunch of web pages, I went ahead and wrote the code
for a more (and less) button. If you view the source code on this page, you'll see how I achieved
the "show more" effect.
At this point I do want to state that the basic method for changing how a web page is displayed is
to create more than one stylesheet that describes how to render the web page, or a part of it (usually
a <div> section). Give the <div> a class and id; the id value identifies the <div>
element, and the class
identifies which stylesheet to use for rendering on a web page. The "show more" button has an onclick property
too call a JavaScript function that dynamically changes the classname of the element (<div>, in this case).
If you look at this page's source code you'll see that I defined the <div> as three lines high, and the overflow
as hidden. Clicking on the "show more" button changes the class to a style sheet that defines the <div> height as
"auto".
I made immediate use of this "show more" method by incorporating it on my music collection page, mp3iFrame.html That page has "Dave's Music" at the top of the list, and links to mp3s around the Internet, below that. I hide the mp3s around the Internet, now, but make them visible with a "show more" button. It's amazing what applying for a job can inspire you to do.