Advertisement:

Author Topic: Mouseover popup  (Read 99621 times)

Offline AzaToth

  • Jr. Member
  • **
  • Posts: 276
  • Gender: Male
Mouseover popup
« on: 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)

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) {
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>
« Last Edit: October 11, 2005, 07:12:51 AM by AzaToth »

Offline Snickers

  • Jr. Member
  • **
  • Posts: 127
Re: Mouseover popup
« Reply #1 on: October 10, 2005, 11:35:19 AM »
got a screenshot? of the popup?

Offline AzaToth

  • Jr. Member
  • **
  • Posts: 276
  • Gender: Male
Re: Mouseover popup
« Reply #2 on: October 10, 2005, 11:39:27 AM »
got a screenshot? of the popup?
They will look just like you want to, this is just the techniques for the underlying code.

Offline Snickers

  • Jr. Member
  • **
  • Posts: 127
Re: Mouseover popup
« Reply #3 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  ::)

Offline AzaToth

  • Jr. Member
  • **
  • Posts: 276
  • Gender: Male
Re: Mouseover popup
« Reply #4 on: October 10, 2005, 12:41:57 PM »
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

Offline Snickers

  • Jr. Member
  • **
  • Posts: 127
Re: Mouseover popup
« Reply #5 on: October 10, 2005, 01:10:44 PM »
cool! thanks!

Offline AzaToth

  • Jr. Member
  • **
  • Posts: 276
  • Gender: Male
Re: Mouseover popup
« Reply #6 on: 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>

Offline AzaToth

  • Jr. Member
  • **
  • Posts: 276
  • Gender: Male
Re: Mouseover popup
« Reply #7 on: 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?


Offline Sverre

  • Sr. Member
  • ****
  • Posts: 748
Re: Mouseover popup
« Reply #8 on: January 14, 2006, 02:56:36 AM »
Has anyone been able to use this in posts?

Offline kikkok

  • Newbie
  • *
  • Posts: 4
  • www.korkwai.com
    • www.korkwai.com
Re: Mouseover popup
« Reply #9 on: February 05, 2006, 12:54:30 AM »
Coollllllll~
hxxp:www.korkwai.com/ [nonactive]

Offline DARRKCLOUD

  • Newbie
  • *
  • Posts: 9
    • RC Car Source
Re: Mouseover popup
« Reply #10 on: March 23, 2006, 08:48:06 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. :(
« Last Edit: March 23, 2006, 09:10:04 AM by DARRKCLOUD »
hxxp:www.rccarsource.com [nonactive]
hxxp:forums.rccarsource.com [nonactive]
hxxp:www.thecarfourm.net [nonactive]

Offline Sverre

  • Sr. Member
  • ****
  • Posts: 748
Re: Mouseover popup
« Reply #11 on: March 23, 2006, 10:32:39 AM »
I ended up using Pure CSS Popups instead. Works like a charm :D

Offline DARRKCLOUD

  • Newbie
  • *
  • Posts: 9
    • RC Car Source
Re: Mouseover popup
« Reply #12 on: March 23, 2006, 10:59:58 AM »
Can you show me the code for it?
hxxp:www.rccarsource.com [nonactive]
hxxp:forums.rccarsource.com [nonactive]
hxxp:www.thecarfourm.net [nonactive]

Offline Sverre

  • Sr. Member
  • ****
  • Posts: 748
Re: Mouseover popup
« Reply #13 on: 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.

Offline Harvester

  • Charter Member
  • Full Member
  • *
  • Posts: 690
  • Gender: Male
Re: Mouseover popup
« Reply #14 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?

Offline Sverre

  • Sr. Member
  • ****
  • Posts: 748
Re: Mouseover popup
« Reply #15 on: March 24, 2006, 10:37:18 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

Offline Zagdul

  • Semi-Newbie
  • *
  • Posts: 90
Re: Mouseover popup
« Reply #16 on: 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

Offline Sarge

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 6,209
  • Gender: Male
    • Zëri YT!
Re: Mouseover popup
« Reply #17 on: 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.
    Please do not PM me with support requests unless I invite you to.

http://www.zeriyt.com/   ~   http://www.galeriashqiptare.net/


Quote
<H> I had zero posts when I started posting