vb.org Archive - Hover Pop-Up question

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Hover Pop-Up question (https://vborg.vbsupport.ru/showthread.php?t=286163)

imported_dfmafia

07-31-2012 10:03 PM

Hover Pop-Up question

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.

Code:

      <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

08-01-2012 12:58 AM

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:

HTML Code:

<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

08-01-2012 02:55 AM

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

08-01-2012 08:41 AM

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/showthr...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

08-04-2012 02:33 AM

Code:

<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

09-10-2012 09:52 PM

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

Code:

      <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>

All times are GMT. The time now is 03:13 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.00955 seconds Memory Usage 1,732KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (1)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: