Question from a friend...

[Madora]

because i'm not very knowledgable about all this web stuff

Somebody said...
I'm designing a website for a town. Is the following possible?

I'm listing businesses in the town, a picture and their name, on a page. I want there to be a little link with their name and picture that you can click to make their full contact information and bio appear underneath without the browser going to a different page or having anything pop-up. So you'll only see the bio/contact info if you want to for the particular business.
Is my explanation clear? It'd be like a 'Show more information' button... if this makes sense...

It seems like I've seen something done like this before. Is there any kind of HTML or javascript that I could use to do this?

"Who am I? Where did I come from? Who are these demons, and why do they relentlessly cross my path?"

[axoi]

Madora,

Yes this is possible and relatively simple.

What you do is have the extra contact information in a block object like a <div> tag with an id so <div id='contact1'>content here</div>

Then your style sheet looks like:
#contact1 { display: none; }

This hides the div's so that they only appear when clicked on.

Then you set up the contact link

<a href='#' onClick='show('contact1');'>Show more info...</a>

with the following function in the script tags in the head of the document:

function show ( tag_id ) {
obj = document.getElementById( tag_id );
obj.style.display = 'block';
}

This would allow you to show the tags ( you could change the above onClick to onMouseOver too ( with a corresponding onMouseOut etc.)

If you need a working example I can give you one. Just let me know.

- Bill

[Ryan8720]

Yes, it's possible. I think is the following are what they're talking about:

www.dynamicdrive.com/dynamicindex5/linkdescribe.htm (http://www.dynamicdrive.com/dynamicindex5/linkdescribe.htm)
www.dynamicdrive.com/dynamicindex5/popinfo2.htm (http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm)

//edit, posted at the same time. It can also be done completely with CSS, but takes a lot of debugging. If Bill's solution doesn't work for you, these are pretty easy.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Post Edited (Ryan8720) : 6/10/2004 5:39:59 AM GMT

axoi thats great. You bet I'm going to use this. Thanks!

Post Edited (benjo...) : 6/10/2004 12:04:21 PM GMT

[Benjamin]

Now is everyone just using getElementById() these days or are people still bothering to cater for Netscape 4 and some of the earlier versions of Internet Explorer? I was wondering this yesterday. I really can't be bothered to test for all the alternatives.

http://www.jackfruitdesign.com/
Om Namah Shivaya

[axoi]

I would hope the Netscape 4 is long forgotten and somehow buried. You wouldn't get much places with Netscape 4. The above would degrade into showing the <div>'s themselves as Netscape 4 doesn't use the CSS properly. In fact if you use the <link> tag to pull in the CSS I don't think Netscape uses that at all. ( I've purged much of my knowledge of Netscape 4 from the mind....for obvious reasons )

Which brings up a good point about HTML in general. HTML is a markup language with tags representing items in the virtual world. Like, for example, lets say you have a list of navigation links on the side of your page. If you mark that up as an unordered list, even to those who can not display the CSS that you style that fancy menu with, they can still see the list as a list. Which is the point of the markup in the first place. Use the meaning of the tags first then make them look pretty later with CSS. That way blind people can still read/use your site as their screen readers can still read your list...


- Bill

I test in three. IE, Safari and sometimes in Opera. Honestly if poeple are to lazy to update there browsers it's not my problem. Not only that but what a pain in the ass it is to make everything super compatible.

But I found out that if you use CSS-P to layout your site it's better to put a table in each box that expands the size of the box. That way it's compatible some how with all the other browsers. Weird I know.

[axoi]

benjo... said...
axoi thats great. You bet I'm going to use this. Thanks!

Both of the dynamic drive scripts that Ryan links to use this technique. The just use javascript for updating the positioning.

AFter the new IE bug found yesterday I doubt anyone will turn on javascript for awhile. If you haven't see anything about this new IE bug take a look at this:


http://www.computerworld.com.au/index.php?id=117316298&eid=-255


http://www.microsoft.com/security/incident/settings.mspx

Ugh. I hate microsoft. For a simple windows/macintosh browser which is small and standard compliant ( and more importantly free from these types of bugs ) try firefox...http://www.mozilla.org/
In most cases its faster at rendering sites than IE and its has pop ups turned off....

- Bill

[Ryan8720]

Thanks for the link, I wasn't aware of that. Thank god for Mozilla.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Madora]

Thanks guys!!

"Who am I? Where did I come from? Who are these demons, and why do they relentlessly cross my path?"