Tangent BBC tag?

[Wormopolis]

nevermind.. I got it to work.

[Auburn]

you're probably getting tired of my "yays" by now... ;D but.. I really really love this!

*comes back after some investigation*

..ah, so it'll even alert the admin of what's inside the tangents when they view a page, eh? a quick and easy way to moderate and not let anything escape them. ;p brilliant! you think so far ahead.

It took me a while to figure out what was causing that. *silly*

[Auburn]

okay.. so you're probably gonna hate me for this, but I just wanna test it a bit further?


[tangent=an italic text. an underlined text. an italic and underlined text.]test[/tangent]


[tangent=a link using the "link" tags. A link using the "url" tag.]test[/tangent]


[tangent=paragraph indents.

another.

another.

another.

and one that is centered.

and another regular one.]test[/tangent]


[tangent=an image ]test[/tangent]


[tangent= emoticons. ;D ]test[/tangent]

mm, okayz. so it seems the image and youtube video tags collide with it. umm, but you don't really have to fix those if you don't want. ^^ (though I obviously wouldn't mind if you wanted to!) I mainly wanted it for text to begin with and you've done plenty as it is. thankies wormy. <3<3

[Wormopolis]

yeah I doubt I will be spending a lot of time getting this to embed a youtube video. images SHOULD have worked, but if the point of this code was to get text descriptions/tangents then its doing what you wanted.

the admin alert thing was just me testing inner content. it wouldnt do that in the release version.

[Wormopolis]

newlines inside the tangent tags will break it. that is just how regexp works. you can try
tags, but im not sure what they will do either.


code:

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

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


// 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+12) +"px; left: "+curleft+"px;";
       tangentSpan.style.display='';
}        

function tangentLoadSpan2(obj) {
       var store=unescape(obj.firstChild.value);
       window.clearTimeout(tm_usr2);
var tangentSpan = document.getElementById('tangentSpan');
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>'; });
   }
 }
}

// -->
</script>


[Wormopolis]

ok.. I have multiple lines working now... the image thing I have to work on. PB puts the alt of "[image]" in there and it breaks the regexp string...

[Wormopolis]

fixed the image issue. Im not going to be able to make youtube videos appear in there.

new version posted.

[Auburn]

o,o! you truly didn't have to.. *hugs*

yus, it's totally fine that the youtube thing stays that way. ^^;
i'm really scatterbrained so this code is perfect for someone like me who always goes off on tangents. lol

you ish my hero wormy. *exalts* ;D

[Wormopolis]

I think it might have violated TOS if youtube videos were in there anyways due to the ads being moved.

[Auburn]

I'm just coming back here to say that, good news, I just found out the tangent code actually does work for image and youtube videos if the site is ad-free. ^^ I guess it's just the ads that complicate things.

(and also coming back to say I've been using it very much on my sites and it's been very useful)

[Wormopolis]

Im glad you like it! I should probably publish it at some point...

[Wormopolis]

it works in chrome.. but I want toi do some experimenting to see if I can get the width to be more dynamic.. and if its close to the right edge it doesnt cause the page to stretch and goes off to the right instead.

[Wormopolis]

testing with an image [tangent=text testing][/tangent] as the post part that gets hovered on.

[Wormopolis]

fixed the width issue.. simpler then I ever would have thought. code has been submitted

[Auburn]

saw the submission! ^^ sweet! yea, I was wondering about that issue with the width stretching.


A few things..
I'm not entirely sure this is true but the code doesn't seem to work on Poll threads.

Also, I know I originally suggested the the box above the link, but having seen the way you put it below, it actually felt like it made a lot more sense. =) Is there a way I can keep the box right below the link like v1.05?


ah okay, nvm. I see I can keep v1.05 and just switch the width from a specified px to "auto" and get the desired effect. :3 yay!

p.s. This has really become a staple tag on my site, lol. I wish other forums I attend had something like this.