Hover Pop-Up question

[imported_dfmafia]

I'm trying to get a pop-up just like the username one used in the postbit template.

I have been unable to get it to work all the time and on ie.

<div class="col4">
<h3>OPTIONS</h3>
<div class="popupmenu memberaction<vb:if condition="$page_class"> {vb:raw page_class}</vb:if>">
<a><strong>Hover for OPTION</strong></a>
<ul class="popupbody popuphover memberaction_body">
<li class="left">
<p>
<div id="footer" class="shade footer">
YOURCODE
</div>
</li></ul>
</div>
</p>
</div>this doesnt open all the time in firefox and doesnt even display correctly in ie.

what am i missing here?

[Sarteck]

Proper HTML for one thing. XD


What are you trying to do, have it so that way you can hover over a button for the copyright? Does it HAVE to be the same as the User Dropdown Menu? If not, try this:

<div style="margin:20px; margin-top:5px;text-align:center;">
<input type="button"
value="Hover for Copyright"
style="font-size: smaller; color: #333333; border: 0px; padding: 4px; padding-left: 10px; padding-right: 10px;"
onMouseover="this.parentNode.getElementsByTagName('div')[0].style.display = 'block';"
onMouseout="this.parentNode.getElementsByTagName('div')[0].style.display = 'none';" />
<div class="alt2" style="margin: 0px; padding: 6px; border: 0px; display: none;">
<div>
PLACE HOVER CONTENT HERE
</div>
</div>
</div>Style to your liking, place your content in the PLACE HOVER CONTENT HERE bit.

(I use something similar for one of our Spoiler BB Codes on my forum.)

[imported_dfmafia]

thanks, I'll give it a go. Doesn't have to be the same as the user dropdown menu, it was just the first place I went to pull the code.

[Sarteck]

Well, if that's the case, there's so many different ways you can do it that it's not even funny. X3 And it doesn't have to be limited to an input button, like I showed--it can be a DIV element with a custom image background, or it could be a "block" header that you can hover over (like in the postbit on my own forum for userinfo: see http://forums.cleverbaka.com/showthread.php?97579-CleverBaka-Mission-Rules-and-Guidelines for an example, and hover over the info bar under my avatar).

Mind you, I don't know if it's a good idea to hide the footer, though--if you've downloaded some Modifications from here, that's where credit is given to the authors, not to mention vBulletin may (or may not, for all I really know) have an issue with it being hidden unless you pay to remove the branding, etc. (I don't really KNOW for sure if that's acceptable, so don't take my word on it, heh.)

[imported_dfmafia]

<div class="popupmenu memberaction<vb:if condition="$page_class"> {vb:raw page_class}</vb:if>">
<a><strong>Hover for CODE</strong></a>
<ul class="popupbody popuphover memberaction_body">
<li>
CODE CODE CODE
</li>
</ul>
</div>I took that out of the postbit when you hover/click on the username. I was hoping that would work but IE nothing changes, firefox it only works sometimes.

this is a test site I'm working on my localhost. I used the copyright block since its across all styles and easy to see to make adjustments. guess i could have used a brightly colored title image but i needed multiple lines of text

[imported_dfmafia]

Found what I was looking for. I tweaked the code a bit and ended up with it working just how I needed it too.
this works in FireFox but does not work in IE7 or IE9. I will continue to tweak it to get it to display properly in IE

RED are items you would need to change to fit your requirements and style


<div class="col4">
<h3>TITLE</h3>
<div><li class="popupmenu">
<a href="javascript://" class="popupctrl"><strong>Hover for INFO title</strong></a>
<ul class="popupbody popuphover">
<li id="footer" class="floatcontainer footer">
YOUR CODE
</li>
</ul>
</li>

</div>
</div>