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:
<?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>
got a screenshot? of the popup?
Zitat von: Snickers in Oktober 10, 2005, 11:35:19 VORMITTAG
got a screenshot? of the popup?
They will look just like you want to, this is just the techniques for the underlying code.
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 ::)
Zitat von: Snickers in Oktober 10, 2005, 11:44:33 VORMITTAG
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
cool! thanks!
Here is one that will folow the mouse when hovering:
<?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>
A note, for this to work, no parent should have overflow: auto or simlar, for example .post, remove that line or add:
.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?
Has anyone been able to use this in posts?
Coollllllll~
Zitat von: Sverre in Januar 14, 2006, 02:56:36 VORMITTAG
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: http://www.nitrorccarcentral.uk.to/community/index.php?board=2.0 Put your mouse over all of the links. You will see that some appear and some doesn't. :(
I ended up using Pure CSS Popups instead. Works like a charm :D
Can you show me the code for it?
I'll post it here or in a new topic when I find the time to write a tutorial.
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 (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?
Zitat von: Harvester in März 24, 2006, 05:38:38 VORMITTAG
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 (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
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
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.