/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Functions/links

Copy linkTweet thisAlerts:
Jun 12.2006

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

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJun 12.2006 — Something like this?:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
&lt;!--
.hide{
display:none;
}
.show{
background-color: #CCFFFF;
display:inline;
}
--&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function showhide(s){
while(s.nodeType!=1 &amp;&amp; s.nodeName.toLowerCase()!='span'){s=s.nextSibling}
s.className=(s.className=='show')?'hide':'show';
return false
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
Lorem ipsum &lt;a href="#" onclick="return showhide(this.nextSibling)"&gt;dolor&lt;/a&gt; &lt;span class="hide"&gt;[sit amet]&lt;/span&gt;, consectetuer &lt;a href="#" onclick="return showhide(this.nextSibling)"&gt;adipiscing&lt;/a&gt; &lt;span class="hide"&gt;[Vestibulum fringilla]&lt;/span&gt; ligula in neque.
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@vwphillipsJun 12.2006 — [URL]http://www.vicsjavascripts.org.uk/AddAcronym/AddAcronym.htm[/URL]
Copy linkTweet thisAlerts:
@kazukiauthorJun 12.2006 — 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?:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
&lt;!--
.hide{
display:none;
}
.show{
background-color: #CCFFFF;
display:inline;
}
--&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function showhide(s){
while(s.nodeType!=1 &amp;&amp; s.nodeName.toLowerCase()!='span'){s=s.nextSibling}
s.className=(s.className=='show')?'hide':'show';
return false
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
Lorem ipsum &lt;a href="#" onclick="return showhide(this.nextSibling)"&gt;dolor&lt;/a&gt; &lt;span class="hide"&gt;[sit amet]&lt;/span&gt;, consectetuer &lt;a href="#" onclick="return showhide(this.nextSibling)"&gt;adipiscing&lt;/a&gt; &lt;span class="hide"&gt;[Vestibulum fringilla]&lt;/span&gt; ligula in neque.
&lt;/body&gt;
&lt;/html&gt;
[/QUOTE]
Copy linkTweet thisAlerts:
@KorJun 12.2006 — 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?
Copy linkTweet thisAlerts:
@kazukiauthorJun 12.2006 — ? 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?[/QUOTE]
Copy linkTweet thisAlerts:
@LeeUJun 12.2006 — You can find another solution [URL=http://javascript.internet.com/navigation/absolute-popup-box.html]here[/URL] . It does require creating external files but it is great when you have a lot of info to pass along.
Copy linkTweet thisAlerts:
@LeeUJun 12.2006 — 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.,
[CODE]<a href="somepage.html" class="definition">dhiohd</a>[/CODE].

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.
Copy linkTweet thisAlerts:
@KorJun 12.2006 — 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.
Copy linkTweet thisAlerts:
@LeeUJun 13.2006 — 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 ([I]with thanks to Jeremy Keith[/I]):
[CODE]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);
}
}
}
}[/CODE]

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

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

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):
[CODE]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.[/CODE]
×

Success!

Help @kazuki spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...