[RESOLVED] Functions/links [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Functions/links

kazuki

06-12-2006, 04:25 AM

Hi, I have a HTML web page where the text written contains some words that the reader could probably need definition for. Currently I am writing the definition in brackets just after the name. This way, the page doesn't look so good. I want to make it a link; say when you click on the word itself, the discussion will appear next to the word in brackets and when you click it again, it disappears. (Like what microsoft office offline help sessions are. They give definitions in hidden links)....
How do i do this?

PS I do not have much idea about java script. So please tell me where to paste the solution in my HTML code. For the time being, I would just copy the solution.
Thanks

Kor

06-12-2006, 04:57 AM

Something like this?:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>
<script type="text/javascript">
function showhide(s){
while(s.nodeType!=1 && s.nodeName.toLowerCase()!='span'){s=s.nextSibling}
s.className=(s.className=='show')?'hide':'show';
return false
}
</script>
</head>
<body>
Lorem ipsum <a href="#" onclick="return showhide(this.nextSibling)">dolor</a> <span class="hide">[sit amet]</span>, consectetuer <a href="#" onclick="return showhide(this.nextSibling)">adipiscing</a> <span class="hide">[Vestibulum fringilla]</span> ligula in neque.
</body>
</html>

vwphillips

06-12-2006, 05:20 AM

http://www.vicsjavascripts.org.uk/AddAcronym/AddAcronym.htm

kazuki

06-12-2006, 05:38 AM

Great. it looks like magic to me! :)

But the text that is displayed on clicking the word is taking the same color as the rest of the paragraph and is hiighlighted with cyan. How do I change these 2 colors????

Something like this?:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>
<script type="text/javascript">
function showhide(s){
while(s.nodeType!=1 && s.nodeName.toLowerCase()!='span'){s=s.nextSibling}
s.className=(s.className=='show')?'hide':'show';
return false
}
</script>
</head>
<body>
Lorem ipsum <a href="#" onclick="return showhide(this.nextSibling)">dolor</a> <span class="hide">[sit amet]</span>, consectetuer <a href="#" onclick="return showhide(this.nextSibling)">adipiscing</a> <span class="hide">[Vestibulum fringilla]</span> ligula in neque.
</body>
</html>

Kor

06-12-2006, 05:40 AM

You may adjust everything you need about your comments from this CSS class

.show{
background-color: #CCFFFF;
display:inline;
}

You must have known CSS, at least basic, haven't you?

kazuki

06-12-2006, 06:10 AM

:) I dont. I know just the basics of HTML tags and have copied an already available template for my webpage. So I have changed these colors now. Thanks for the idea.

I have another question now. In my code, this particular word that is to be clicked to display the sentence, is disappearing when the mouse pointer is moved over it.
What could be the reason?

You may adjust everything you need about your comments from this CSS class

.show{
background-color: #CCFFFF;
display:inline;
}

You must have known CSS, at least basic, haven't you?

LeeU

06-12-2006, 08:57 AM

You can find another solution here (http://javascript.internet.com/navigation/absolute-popup-box.html) . It does require creating external files but it is great when you have a lot of info to pass along.

LeeU

06-12-2006, 12:12 PM

Kor,

It would be great if this could be tied to a CSS class. Then that way the link could be much shorter (and unobtrusive), i.e.,
<a href="somepage.html" class="definition">dhiohd</a>.

Also, the use of "#" in a link is not really recommended. It would be better for the link to go somewhere, in case the user doesn't have JavaScript (i.e., open a new window with the definition).

Just trying to make it user-friendly and compliant. Great script! I want to include it over at JavaScript Source.

Kor

06-12-2006, 01:38 PM

hm... I guess that, unfortunately, there must be no html page to go if the user has javascript disabled, unless there is a html page for each of the description text, which is an unefficient way. Unfortunately for the users with javascript disabled, some of the features woun't be perceptibly for them. This is it.

LeeU

06-13-2006, 10:52 AM

O.k., I tried something a little different. This should make the text easier to write and eliminates the "#", which is not really proper usage.

First, change the script to this (with thanks to Jeremy Keith):
function showhide(s){
while(s.nodeType!=1 && s.nodeName.toLowerCase()!='span'){s=s.nextSibling};
s.className=(s.className=='show2')?'hide':'show2';
return false;
}

window.onload=getReady;
function getReady() {
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
if (links[i].className == "show") {
links[i].onclick = function() {
return showhide(this.nextSibling);
}
}
}
}

Next, add this to the style sheet
.hide {
display: none;
}
.show {
display: inline;
border-bottom: double;
}

.show2 {
display: inline;
background-color: #FEFF9F;
padding: 0 3px 0 3px;
font-size: .9em;
}

Then, create the links like this, using the anchor tag instead of the href tag, and adding a class to the link (I added hard returns for display):
Lorem ipsum <a name="1" class="show">dolor</a> <span class="hide">sed diam nonummy
nibh euismod tincidunt ut laoreet</span>, consectetuer <a name="2" class="show">adipiscing</a>
<span class="hide">Vestibulum fringilla</span> ligula in neque.