Tangent UBBC Tag

[Wormopolis]

Browser Tested: IE Chrome and FF
placement: board or global footer


This will let you put a floating "explanation" above any text or image that you stylize with CSS. it appears on hover of the content that is tagged, and disappears when mouse leaves content OR tangent box.

code:

<style type="text/css">
.tangentlink {color: 0033FF; border: #999999 1px solid;}
#tangentSpan {background-color: #000000; border: #FF0000 1px solid; width: auto;}
.tangentNote {color: #FFFF00; font-weight: bold}
</style>

<script type="text/javascript">
<!--
//  Tangent Tag UBBC v1.35
//  concept by Auburn
//  coding by Wormopolis - www.wormocodes.com
//  do not repost - keep header intact

var staticTags=new Array();
staticTags['SP']="superman is the greatest";
staticTags['UNLV']="University of Northern Las Vegas";
staticTags['WTF']="A general question of confusion";


var buttonImage="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/tangent.gif";

// No need to edit below

var tm_usr, tm_usr2=false;
var curleft = curtop = 0;
var ts=document.createElement('span'); ts.id='tangentSpan';  ts.style.display='none';
ts.onmouseout=function() {tangentUnloadSpan2(); };
document.body.appendChild(ts);

function tangentNewplace() {
tangentSpan.style.cssText = "position: absolute; top: "+ (curtop-20) +"px; left: "+curleft+"px;";
       tangentSpan.style.display='';
}        

function tangentLoadSpan2(obj) {
       var store=unescape(obj.firstChild.value);
       obj = obj.getElementsByTagName('img')[0] || obj;
       window.clearTimeout(tm_usr2);
var tangentSpan = document.getElementById('tangentSpan');
       tangentSpan.style.display='none';
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}

tangentSpan.innerHTML="<font class='tangentnote'>"+store+"</font>";
       tangentSpan.onmouseover=function() {window.clearTimeout(tm_usr2); tangentNewplace()};

       if (tangentSpan.keepit && tangentSpan.keepit!=obj) tangentSpan.style.display='none';
       tangentSpan.keepit=obj;

       tm_usr=window.setTimeout("tangentNewplace()",100);
}

function tangentUnloadSpan2() {
 tm_usr2=window.setTimeout("tangentSpan.style.display='none';", 2000);
}
for (tds=document.getElementsByTagName('td'), t=0; t<tds.length; t++) {
 if (tds[t].width=='80%' && tds[t].vAlign=='top' && tds[t].className.match(/windowbg/)) {
   var postCell = tds[t].getElementsByTagName('table')[0].rows[1].cells[0];
   if (postCell.innerHTML.match(/\[tangent=(.*?)\](.*?)\[\/tangent\]/i)) {
     postCell.innerHTML=postCell.innerHTML.replace(/(alt|title)="\[image\] "/ig,'').replace(/\[tangent=((.|\n)*?)\](.*?)\[\/tangent\]/gi,function (res, hid, ign, txt) {return '<font class="tangentlink" onmouseover="tangentLoadSpan2(this);" onmouseout="window.clearTimeout(tm_usr); tangentUnloadSpan2();"><input type="hidden" value="'+escape(hid)+'">'+txt+'</font>'; });
   }
   for (st in staticTags) {
     var rgx=new RegExp('(^|\\s|>)('+st+')($|\\s|<)','g');
     var abbexp=staticTags[st];
     if (postCell.innerHTML.match(rgx)) {
     postCell.innerHTML=postCell.innerHTML.replace(/(alt|title)="\[image\] "/ig,'').replace(rgx, function(res, res2 ,abb, res3) {return  res2 + '<font class="tangentlink" onmouseover="tangentLoadSpan2(this);" onmouseout="window.clearTimeout(tm_usr); tangentUnloadSpan2();"><input type="hidden" value="'+escape(abbexp)+'">'+abb+'</font>' + res3; });
     }    
   }
 }
}

if (document.postForm) {
 var tray=document.postForm.color.parentNode;
 var tmpadd='<a href="javascript: add(\'[tangent=tangent text here]\',\'[\/tangent]\');"><img src="'+buttonImage+'" border="0" alt="[tangent]" title="[tangent]"></a>';
  tray.innerHTML+=tmpadd;

}

// -->
</script>


testing thread: www.wormocodes.com/index.cgi?board=codereqs&action=display&thread=828

[wildgoosespeeder]

Very interesting tag. This is slightly different than a spoiler tag but not really sure if it is even in the same category as the spoiler tag.

[Wormopolis]

crap.. it is very similar...

crap...

[Auburn]

Well, it's similar in some ways, but definitely not redundant - because they both have different functions.

For instance, the tangent tag is precisely what the name implies, a tangent or side-thought which can be useful in adding background info or context to a writing without using an asterisk then adding the thought at the end of the post.

The spoiler tag has linebreaks that makes it very awkward (or pretty much impossible I suppose) to use mid-sentence since it breaks the line. Sometimes a thought is not so elaborate that it warrants a separate spoiler just for it. Something more subtle..

The spoiler tag is more apt for adding articles or more complete contributions to a post which can remain open and visible.

I think both are epic in their own way. ^^
I use both on my forum and they're both necessary for me. Here's a perfect example of a post where I use both, and how they serve different functions:

luvoxy.com/index.cgi?action=display&board=ym&thread=33&page=1#214

Also, the ability to use tangent tags within spoiler tags is just a beautiful combination. Reminds me of Inception (read: dream in a dream) ;P

[rocan]

Hey, I am having troubles with this code.
I'm not sure if it is conflicting with other codes and just need to place it somewhere else or if it is a coding issue.
Basically it pulls up the tangent behind my board instead of in front of it like it's supposed to.
I'm using a Tabbed Side Tables Code by Jawn, which might be causing the issue.

Any help you can offer would be great as I like this code and would love to use it.

Edit In: Also, side note, is there a way to make the tangent vanish sooner after moving the mouse off of the link? Right now it seems to take a 3-5 seconds for me. I'd prefer for it to be instant or faster than it is currently.

[NetMaster]

Edit this part of the code:

function tangentUnloadSpan2() {
tm_usr2=window.setTimeout("tangentSpan.style.display='none';", 2000);
}


Setting this to 1000 will make it so 1 second passes before it vanishes. Setting it lower than that will make it vanish almost instantly.

[Wormopolis]

<style type="text/css">
.tangentlink {color: 0033FF; border: #999999 1px solid;}
#tangentSpan {background-color: #000000; border: #FF0000 1px solid; width: auto; z-index:68;}
.tangentNote {color: #FFFF00; font-weight: bold}
</style>


add the red and see if it moves forward on the page

[rocan]

Wow thank you both those fixed both the problems I had! The code works great now and the message vanishes faster. Thank you both so much for your help.

[Wormopolis]

be well soon!

[NetMaster]

You're welcome.

[TANZ]

My favorite code lol. I've tried tinkering with it a bit but is it possible for the box to fade in and fade out on mouseover (and out)?

[Wormopolis]

hmmm...

jQuery would probably accomplish that really easily...

I would have to play with opacity to see if it was crossbrowser.

[TANZ]

I've seen lots of jQuery examples of it but it's a shame, I'm not yet well-versed with it 8);;

[Wormopolis]

version update 1.3: added in static tangent tags that can be defined automatically for all posts. the keyword is case inclusive, and must be by itself and not part of another word.

[TANZ]

Awesome stuff. Image can't be put in the static tangent? Yeah, ubbc doesn't work in them. Also doesn't work if there's a bracket inside the single quotes.

Found another stuff.

It works when put in separate lines.

wall of text wall of text wall of text STATIC wall of text wall of text

STATIC2 wall of text wall of text wall of text

But it doesn't work with the keywords alone.

STATIC

STATIC2

It works when put in one line though.

STATIC STATIC2