The Arcive of Official vBulletin Modifications Site.

The Geek · #1 04-09-2005, 09:38 PM

To put a floating popup box onmouseover key links.

I am sure you guys have seen them... hover over and a little popup box appears above link with either a definition or a sponsor link or something.

ie

Code:

<a href=http://www.bob.com onmouseover="showbox(this,'here is what I want in the popup box');" onmouseout="hidebox(this);">Hover over me</a>

Ideally, the div should not need a unique identifier. i.e. showthis should get whateven information it needs from 'this' being passed to it.

Is this possible?
If youve got the code or the js know how - let me know.

er... think I stuck this in the wrong forum :ermm:

CJPC · #2 04-09-2005, 10:06 PM

Well, dont feel right taking money, did a quick google search and prettymuch stole it (well i didnt , as credit is given in there, meh, just, mehh, its all right there below, not my code tho, ya that works)

Save it as a HTML file, you should be good to go, I stripped it up so its only the essential code

Code:

<HTML><HEAD>

<SCRIPT language=javascript>
  <!--
  /*  Your are permitted to reuse this code as long as the following copyright
      notice is not removed:

      This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this
      code can be found at Inside Dynamic HTML: HTTP://www.insideDHTML.com
  */


  // Support for all collection
  var allSupport = document.all!=null

  function setupEventObject(e) {
    // Map NS event object to IEs
    if (e==null) return // IE returns
    window.event = e
    window.event.fromElement = e.target
    window.event.toElement = e.target
    window.event.srcElement = e.target
    window.event.x = e.x
    window.event.y = e.y
    // Route the event to the original element
    // Necessary to make sure _tip is set.
    window.event.srcElement.handleEvent(e);
  }


  function checkName(src) {
    // Look for tooltip in IE
    while ((src!=null) && (src._tip==null))
      src = src.parentElement
    return src
  }

  function getElement(elName) {
    // Get an element from its ID
    if (allSupport)
      return document.all[elName]
    else
      return document.layers[elName]
  }

  function writeContents(el, tip) {
    // Replace the contents of the tooltip
    if (allSupport)
      el.innerHTML = tip
    else {
      // In NS, insert a table to work around
      // stylesheet rendering bug.
      // NS fails to apply style sheets when writing
      // contents into a positioned element.
      el.document.open()
      el.document.write("<TABLE WIDTH=200 BORDER=1 bordercolor=black><TR><TD WIDTH=100% BGCOLOR=yellow>")
      el.document.write(tip)
      el.document.write("</TD></TR></TABLE>")
      el.document.close()
    }
  }

  function getOffset(el, which) {
    // Function for IE to calculate position 
    // of an element.
    var amount = el["offset"+which] 
    if (which=="Top")
      amount+=el.offsetHeight
    el = el.offsetParent
    while (el!=null) {
      amount+=el["offset"+which]
      el = el.offsetParent
    }
    return amount
  }
  

  function setPosition(el) {
    // Set the position of an element
    src = window.event.srcElement
    if (allSupport) {
      el.style.pixelTop = getOffset(src, "Top")
      el.style.pixelLeft = getOffset(src, "Left")
    } else
    {
      el.top = src.y + 20 //window.event.y + 15
      el.left = src.x //window.event.x
    }
  }
      
  function setVisibility(el, bDisplay) {
    // Hide or show to tip
    if (bDisplay)
      if (allSupport)
        el.style.visibility = "visible" 
      else
        el.visibility = "show";
    else
      if (allSupport)
        el.style.visibility = "hidden"
      else
        el.visibility = "hidden"
  }


  function displayContents(tip) {
    // Display the tooltip. 
    var el = getElement("tipBox")
    writeContents(el, tip)
    setPosition(el)
    setVisibility(el, true)
  }


  function doMouseOver(e) {
    // Mouse moves over an element
    setupEventObject(e)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if  (!el._display) {
        displayContents(el._tip)
        el._display = true
      }
  }

  function doMouseOut(e) {
    // Mouse leaves an element
    setupEventObject(e)
    el = checkName(window.event.srcElement)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if (el._display)
        if ((el.contains==null) || (!el.contains(window.event.toElement))) {
          setVisibility(getElement("tipBox"), false)
          el._display = false
        }
  }

  function doLoad() {
    // Do Loading
    if ((window.document.captureEvents==null) && (!allSupport))
      return // Not IE4 or NS4
    if (window.document.captureEvents!=null)  // NS - capture events
      window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
    window.document.onmouseover = doMouseOver;
    window.document.onmouseout = doMouseOut;
  }

  window.onload = doLoad
  // -->
</SCRIPT>
<STYLE>
  <!--
  #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: yellow; visibility: hidden}
  -->
</STYLE>



 <STYLE>
   UL, OL {font: 10pt arial}
 </STYLE>



<BODY BGCOLOR=white>

<P>Hover it!<A HREF="linky.html" ONMOUSEOVER="this._tip='A Good Example!'">Right here!</A>

<DIV ID=tipBox>
</DIV>

</BODY>
</HTML>

KW802 · #3 04-09-2005, 10:10 PM

How complicated are you trying to make it? For just a simple message use the "title" tag as in ....

PHP Code:


			
<a href="{link}" title="{message to be displayed when hovering over the link}">{text}</a>

CJPC · #4 04-09-2005, 10:14 PM

Ya, he said he wanted a javascript box, not an alt tag = the complication!

KW802 · #5 04-09-2005, 10:22 PM

Quote:

Originally Posted by CJPC

Ya, he said he wanted a javascript box, not an alt tag = the complication!

He did not say it had to be JS. For every problem there are multiple solutions.

The Geek · #6 04-09-2005, 10:29 PM

I would rather not use JS, but sadly the title tag wont cut it.
FOr an idea of what I am using it for, see https://vborg.vbsupport.ru/showthread.php?t=79627

I already use the title tag now.

The only problem I instinctually have with the above code is that I think it will conflict with vb's capture of mouseover events.
Still. It may get me a little further to my goal. A promise is a promise. PM me your paypal address.
If anyone has a smoother approach... I could still be willing to part with a little more cash - but not as much now (or ill go broke)!

N8 · #7 04-09-2005, 10:38 PM

I could set you up a very nice code where the mouse over box could have html, images above the text, you could change the size, etc.

The Geek · #8 04-09-2005, 10:38 PM

crap. They need to be able to go into the popup window too. the way it is now,its just a formatted tooltip. The window needs to have more info, formating and a link. When they mouseout of the link AND the popup - then it should disapear.

In a nutshell - I dont think the code is going to work for me. Sorry

Ill still PP you a tenner for the trouble if thats cool.

Quote:

Originally Posted by N8_115

I could set you up a very nice code where the mouse over box could have html, images above the text, you could change the size, etc.

n8 - if it works for the hack of the thread I just mentioned - Ill pay you the $50

Princeton · #9 04-09-2005, 11:01 PM

your making things a bit complicated ... the js code is already available for you...
use the vbcollapse code that comes with vb

if you are doing this for your autolinker ... I suggest that you rewrite the code or at least add a section where you can add a tooltip message ...

when you do this add a unique id to each instance that the script finds and converts text to url ... your preg_match / preg_replace should take care of this

I tried installing the beta but I just got to many errors installing ... so I just gave up

On a side note, I think your installer is a bit complicated ... the less choices people have the less problems will occur -- just a thought

If you really want to pay someone $50 I can gaurantee that I can get this accomplished for you.

Zachery · #10 04-09-2005, 11:09 PM

If you are offering money please start a service request.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06378 seconds Memory Usage 2,258KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (2)bbcode_code (1)bbcode_php (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!