Javascript Help Bar

Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Javascript Help Bar

Post by s.dot »

OK, I was just working on a new site and I thought of this little neat javascript. It's not complex in the least, but could be useful to someone. I'm not sure if it's been done before.

How it works is whenever someone mouses over a link, this help bar will display information relative to that link.

Code: Select all

<html>
<head>
<title>Helpbar</title>
<script type="text/javascript">
<!--
function helpBar(text)
{
	document.getElementById("info").innerHTML = '<p>'+text+'</p>';
}
function clearHelpBar()
{
	document.getElementById("info").innerHTML = '<p>Move your mouse over any link to get useful information.</p>';
}
//-->
</script>
</head>
<body>

// somewhere on the page

<div id="info" style="height: 30px; width: 500px;"><p>Move your mouse over any link to get useful information.</p></div>

<a href="testlink.html" onMouseOver="helpBar('This is just a test link!');" onMouseOut="clearHelpBar();">Test Link</a>

</body>
</html>
Simple, but neat. :-D
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Have you tried this in Firefox?
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Yup, works good.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
tores
Forum Contributor
Posts: 120
Joined: Fri Jun 18, 2004 3:04 am

Post by tores »

Just as a hint to those not knowing. You could display a tooltip for a link by using html-attribute title...

Code: Select all

<a href="testlink.html" title="This is just a test link!">Test Link</a>
Afterlife(69)
Spammer :|
Posts: 14
Joined: Mon Oct 03, 2005 4:51 am

Post by Afterlife(69) »

i made something like this for a tooltip feature on my forum.

Code: Select all

function setTip(tip, id)
	{
		if( object = document.getElementById(id) )
		{
			object.innerHTML = tip;
		}
	}
	function unsetTip(id)
	{
		if( object = document.getElementById(id) )
		{
			object.innerHTML = originalTip;
		}
	}
Demo: http://board.meetthe1337.com/portal.php
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post by pilau »

For my next site (which I am working on atm) I'm doing basically the same, a status bar, only HTML based.
Why? Because I can.
User avatar
_dev
Forum Newbie
Posts: 9
Joined: Tue Sep 20, 2005 4:15 am
Location: Austria

Post by _dev »

neat - but i found that first

actually have that script on my site for half a year now :)
Afterlife(69)
Spammer :|
Posts: 14
Joined: Mon Oct 03, 2005 4:51 am

Post by Afterlife(69) »

tores wrote:Just as a hint to those not knowing. You could display a tooltip for a link by using html-attribute title...

Code: Select all

<a href="testlink.html" title="This is just a test link!">Test Link</a>
hmm, that gives me an idea...

Code: Select all

onmouseover="setTip(this.title, 'ID'); return false;"
?
Post Reply