View Full Version : Will pay $50 for a code snippet...
The Geek
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
<a href=http://www.bob.com (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:
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
<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
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 ....<a href="{link}" title="{message to be displayed when hovering over the link}">{text}</a>
Ya, he said he wanted a javascript box, not an alt tag = the complication!
KW802
04-09-2005, 10:22 PM
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
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)! ;)
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
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.
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
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
04-09-2005, 11:09 PM
If you are offering money please start a service request.
vBulletin® v3.8.12 by vBS, Copyright ©2000-2024, vBulletin Solutions Inc.