[RD] Enhanced UBBC Table w/Scroll?

[OH SO COOPERNATURAL !]

is it possible to add a scroll[bar] in posts, using the "Enhanced UBBC Tables" code? i'd like to be able to put a certain amount of information, but not stretch or expand my table.

[Chris]

Technically this is not possible using the Enhanced Tables code because even if you use it to set a style of overflow-y:scroll on the cell it wouldn't work.

It can be done however by using the glow tag which works only in IE but still creates a DIV in other browsers just without the CSS filter that only IE understands. By wrapping whatever you want to scroll in the glow tag and using the enhanced code to give the table an id, you can then add CSS in the forum header that will specifically target that div within that table:


START TABLE CODE

---

[table]
[tr]
[td]
[atrb=id,postingtable,true]
[atrb=style,width:400px;height:200px;,true]
[glow=000000,0,enabled=0,400]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas enim non arcu posuere vitae viverra sem consectetur. Sed dignissim lorem at risus aliquet in cursus felis fermentum. Morbi at pellentesque eros. Proin a dui et lacus sollicitudin aliquet luctus ac arcu. Duis adipiscing hendrerit libero non tincidunt. Sed in quam vitae massa pharetra viverra quis et dui. Vestibulum at justo eu lorem imperdiet ultrices. Morbi pharetra consequat risus, at dignissim quam semper sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In consequat nunc non metus porta eu auctor felis pretium. Etiam congue lorem a quam dignissim in mollis arcu imperdiet. Fusce et tellus ligula, id lacinia mauris. In at nisi enim, sed semper nibh.

Etiam non nunc non leo imperdiet condimentum nec a orci. Donec tortor libero, suscipit ut tristique id, imperdiet ut metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean a ante sed eros fringilla hendrerit. Sed varius aliquam pretium. In quis mollis dolor. Etiam vehicula, ipsum quis porttitor dictum, lacus arcu vulputate nunc, eu elementum justo nisl et augue. Etiam ut ligula eros, id volutpat arcu. Praesent egestas hendrerit lorem in hendrerit. Cras consectetur nunc sit amet risus luctus eu iaculis nibh iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In auctor lectus vel turpis sollicitudin eu laoreet magna scelerisque. Etiam venenatis augue sed nibh consequat tempor. Etiam bibendum pellentesque urna, sed volutpat ante tempor a.
[/glow]
[/td]
[/tr]
[/table]

END TABLE CODE

---

That red part exploits a minor unchecked hole in PB's processing of that tag in order to disabled the glow effect for IE users so there's no guarantee it will work after the powers that be sees this. I'm however betting that it is so minor that they'll ignore it since the rumor is glow and shadow will be dropped in V5. The 400 after the red defines the width of the DIV and is applied as an inline style by Proboards.

The CSS that can then be place in the header may look something like this

<style type="text/css">
#postingtable div{height:200px;overflow-y:scroll;}
</style>

You could even expand on that by having ids such as postingtable200, postingtable300,postingtable400, etc to give the user a choice of how tall they want their scrollbars.

Note that it would have been better to use classes instead of ids (since each id should be unique) but that would not be cross-browser since IE requires the DOM name in setAttribute('className', 'postingtable') while all other browsers require the document context name setAttribute('class','postingtable'). Using an atrb tag for both would work but then you would get that asterisk error the Enhanced code puts up when it encounters an attribute the current browser doesn't understand

[Wormopolis]

I have a code that will put a scrolling div within a post, but I do not know if Eton's code will work inside it:



<script type="text/javascript">
<!--
// scrollerDiv UBBC in posts
// By Wormopolis - www.wormocodes.com

// use [scrolly:flags][/scrolly] in post around text
// flags are:
// h(n)      height, n=height in pix
// w(n)     width, n=width in pix
// sx         scroll x direction
// sy         scroll y direction
// c(hex)   color, hex=color in hex
// flags seperated by commas:   [scrolly:h(100),w(50),sy] blah blah blah [/scrolly]

for (tds=document.getElementsByTagName('td'), i=0; i<tds.length; i++) {

if (tds[i].width=="80%" && tds[i].className.match(/windowbg/) && tds[i].vAlign=="top" && tds[i].innerHTML.match(/\[scrolly:(.*?)\]([\s\S]*?)\[\/scrolly\]/i) && !tds[i].innerHTML.match(/\[norunubbc\]/)) {
flgs=RegExp.$1; lovetext=RegExp.$2;
tmp='<div class="postDiv" style="'+(flgs.match(/h\((\d+)\)/) ? 'height:'+RegExp.$1+';' : '')+(flgs.match(/w\((\d+)\)/) ? 'width:'+RegExp.$1+';' : '')+(flgs.match(/sx/) ? 'overflow-x:auto; white-space: nowrap;' : '')+(flgs.match(/sy/) ? 'overflow-y:auto;' : '')+(flgs.match(/c\((\w+)\)/) ? 'background-color:'+RegExp.$1+';' : '') +'" '+(flgs.match(/sx/) ? 'noWrap="nowrap" ' : '') + '>'+ lovetext + '</div>';


postCell=tds[i].getElementsByTagName('table')[0].rows[1].cells[0];
postCell.innerHTML=postCell.innerHTML.replace(/\[scrolly:(.*?)\]([\s\S]*?)\[\/scrolly\]/i,tmp);

i--;
}
}

-->
</script>



[OH SO COOPERNATURAL !]

eton, only a select few of people use IE on my board. we're mostly firefox/flock. is there anything else that can be done, and will wormopolis' code work within yours?

wormopolis, does that go into the header or footer? and does that cover the entire table, because it's only the text section in which i want to scroll... something to the effect of these canons

[Wormopolis]

scroll code would need to be in the footer in order to find data in posts. I got it to work with tables both inside the div, and the div inside a table, so that is why I think it nmight work with Eton's. I havent actually installed Eton;s code to know (was hoping you might be the one to test that actually).

[Chris]

Jul 5, 2010 6:26:27 GMT -8 OH SO COOPERNATURAL ! said:

eton, only a select few of people use IE on my board. we're mostly firefox/flock. is there anything else that can be done, and will wormopolis' code work within yours?

You don't need to be an IE user for what I proposed to work

Jul 4, 2010 23:15:28 GMT -8 Chris said:

It can be done however by using the glow tag which works only in IE but still creates a DIV in other browsers ...

It's the creation of the DIV using the glow tag that was the goal

With that said however, Wormo's code would be more user friendly and customizable than what I proposed. If I had known about that code I would have suggested it from the get-go.



As for interoperability between the two codes I don't see anything immediately jump out that would cause any problems but it should be easy to test, just install them and see

[OH SO COOPERNATURAL !]

thank you guys. i mis-read your post, sorry eton.

as far as testing the code goes, it works quite perfectly. i can't thank you guys enough. would you like a visual? live preview?

[Chris]

Your word is enough, thanks for the update