Mouseover popup

AzaToth · October 10, 2005, 09:27:13 AM

This is an example how to make a popup when hovering over a item
(copy and past in a new document to see how it works)

<?xml  version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello World</title>

		<script type="text/javascript">
			function showBox(text, obj) {
				helpNode = document.createElement('div');
				helpNode.id = 'popBox';
				helpNode.setAttribute('class','popBox');
				helpNode.innerHTML = text;
				obj.appendChild(helpNode);
			}

function hideBox() {
	node = document.getElementById('popBox');
	node.parentNode.removeChild(node);
}
</script>
<style type="text/css">
	.popBox {
		position: absolute;
		z-index: 2;
		background: #cccccc;
		width: 600px;
		padding: 0.3em;
		border: 1px solid gray;
	}
	span {
		color: red;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Bar</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Biz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
	<div onmouseover="showBox('<b>Biiz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
</body>
</html>

Here is one that will follow the mouse when hovering:

Code Select

<?xml  version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello World</title>

		<script type="text/javascript">
			function showBox(text, obj, e) {
					obj.onmouseout = hideBox;
					obj.onmousemove = moveBox;
					node = document.createElement('div');
					node.style.left = e.layerX + 'px';
					node.style.top = e.layerY + 'px';
					node.id = 'popBox';
					node.innerHTML = text;
					obj.appendChild(node);
			}
function moveBox(e) {
	node = document.getElementById('popBox');
	node.style.left = e.layerX + 'px';
	node.style.top = e.layerY + 'px';
}
function hideBox() {
	node = document.getElementById('popBox');
	node.parentNode.removeChild(node);
}
</script>
<style type="text/css">
	#popBox {
		position: absolute;
		z-index: 2;
		background: #cccccc;
		width: 600px;
		padding: 0.3em;
		border: 1px solid gray;
	}
	span {
		color: red;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div>hello...</div>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this, event)"><img src="hmm.png"/></div>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this, event)"><span>adios amigo...</span></div>
	<div>hello...</div>
</body>
</html>

Snickers · October 10, 2005, 11:35:19 AM

got a screenshot? of the popup?

AzaToth · October 10, 2005, 11:39:27 AM

Quote from: Snickers on October 10, 2005, 11:35:19 AM
got a screenshot? of the popup?

They will look just like you want to, this is just the techniques for the underlying code.

Snickers · October 10, 2005, 11:44:33 AM

Okay, but I'm a little hardheaded, could you show me an example of one you made?

I am confused whether it is what i think it is or not

AzaToth · October 10, 2005, 12:41:57 PM

Quote from: Snickers on October 10, 2005, 11:44:33 AM
Okay, but I'm a little hardheaded, could you show me an example of one you made?

I am confused whether it is what i think it is or not

Changed it a bit, try to copy the whole document into a new document to see

Snickers · October 10, 2005, 01:10:44 PM

cool! thanks!

AzaToth · October 10, 2005, 04:25:24 PM

Here is one that will folow the mouse when hovering:

Code Select

<?xml  version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello World</title>

		<script type="text/javascript">
			function showBox(text, obj, e) {
					obj.onmouseout = hideBox;
					obj.onmousemove = moveBox;
					node = document.createElement('div');
					node.style.left = e.layerX + 'px';
					node.style.top = e.layerY + 'px';
					node.id = 'popBox';
					node.setAttribute('class','popBox');
					node.innerHTML = text;
					obj.appendChild(node);
			}
function moveBox(e) {
	node = document.getElementById('popBox');
	node.style.left = e.layerX + 'px';
	node.style.top = e.layerY + 'px';
}
function hideBox() {
	node = document.getElementById('popBox');
	node.parentNode.removeChild(node);
	on = false;
}
</script>
<style type="text/css">
	.popBox {
		position: absolute;
		z-index: 2;
		background: #cccccc;
		width: 600px;
		padding: 0.3em;
		border: 1px solid gray;
	}
	span {
		color: red;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div>hello...</div>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this, event)"><img src="hmm.png"/></div>
	<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this, event)"><span>adios amigo...</span></div>
	<div>hello...</div>
</body>
</html>

AzaToth · October 11, 2005, 11:19:48 AM

A note, for this to work, no parent should have overflow: auto or simlar, for example .post, remove that line or add:

Code Select

.post { overflow: visible !important; }
.post is the class her for example a normal post in SMF

if it's overflow: auto, then the popup will be constrained inside that box etc...

P.S. Can any official person here say why they have set .post as overflow: auto?

Sverre · January 14, 2006, 02:56:36 AM

Has anyone been able to use this in posts?

kikkok · February 05, 2006, 12:54:30 AM

Coollllllll~

DARRKCLOUD · March 23, 2006, 08:48:06 AM

Quote from: Sverre on January 14, 2006, 02:56:36 AM
Has anyone been able to use this in posts?

I have started to make this work, but it only works on some and not others, because SMF stores posts with line breaks. To remove them, I have tried NL2BR, PREG_REPLACE and STR_REPLACE but they still appear, and the <br /> Doesn't.

Preview: hxxp:www.nitrorccarcentral.uk.to/community/index.php?board=2.0 [nonactive] Put your mouse over all of the links. You will see that some appear and some doesn't.

Sverre · March 23, 2006, 10:32:39 AM

I ended up using Pure CSS Popups instead. Works like a charm

DARRKCLOUD · March 23, 2006, 10:59:58 AM

Can you show me the code for it?

Sverre · March 23, 2006, 11:52:55 AM

I'll post it here or in a new topic when I find the time to write a tutorial.

Harvester · March 24, 2006, 05:38:38 AM

Id like to figure out how to make a rollover that will change the background color of the highlighted thread... the only example i know of to explain what I wanna do is a phpbb theme...

http://www.phpbbdesigns.com/?style=160&noframes=1

see how when you move the mouse over the different boards the red changes from dark to a lighter one? I like that affect but cant find out how to get it on my SMF board. Any ideas?

Sverre · March 24, 2006, 10:37:18 AM

Quote from: Harvester on March 24, 2006, 05:38:38 AM
Id like to figure out how to make a rollover that will change the background color of the highlighted thread... the only example i know of to explain what I wanna do is a phpbb theme...

http://www.phpbbdesigns.com/?style=160&noframes=1

see how when you move the mouse over the different boards the red changes from dark to a lighter one? I like that affect but cant find out how to get it on my SMF board. Any ideas?

That's something completely different.

There's an old MOD which might help you in the following topic though:
http://www.simplemachines.org/community/index.php?topic=6879.0

Zagdul · May 09, 2008, 03:03:25 AM

Hello. I'm a newbie to coding/programing but am pretty good at following instructions.

How could I implement this so all images posted in threads would output the mousover from it's original source? I'd very much like it to mouse over an image and ouput a nice image that follows the mouse at about a 1000px width with a non constrained hight (this way it keeps the aspect ratio correct).

Currently I'm using a mod which links the image in the thread to it's source and am using the admin CP to resize the image to fit the forum width.

http://custom.simplemachines.org/mods/index.php?mod=641

Sarge · July 05, 2008, 06:14:37 AM

ProperMethodz, please don't respond to topics that are more than 2 years old...

To get support for a mod, click on the "Support and comments for this mod" link and it will take you to the proper topic.

News:

Mouseover popup