Embed/Integrate Entire Forum Inside a div

[ganeycp]

I have attached 4 screenshots of a website that has the SMF version 1.1.5 "embedded" within the page using the layer system.

Everything seems to work fine and fit neatly inside my page except for a few of the boxes (i.e. the Post Message Box).

For example, help1.jpg is the Post Message Box you get after you click the Reply button on a post.  As you can see, the Post Message Box is outside of my page layout.  Then, in help2.jpg and help3.jpg everything seems to fit fine whenever viewing posts.  Lastly, I included help4.jpg to show you that it's not just the Post Message Window, but it also does it when you click on the "Members" tap link.  So, some pages fit within my div and some don't.

The strangest part is that the top and bottom parts of the SMF forum are fitting (in other words, they are within my div from my site), but the middle/main part isn't.

Why is this happening, any advice?  Why do posts fit, but the message box and some others aren't?

Thank you so much guys.

[ganeycp]

Could it be that the default template activates the "nowrap" or "overflow" values for specific divs or tables?

[Orstio]

Certain parts of the theme can't shrink past a certain width, because the sum of their contents is just that wide.

I'd suggest you try your site in both Firefox and IE, because you'll notice different symptoms of your width issue in each browser.

[ExcalibursZone]

Just as Oristio said, check your site in different browsers.

Since you have this all custom, you could always add "fixing" JavaScript in the onload event of the window that looks for the IDs of those particular items and resizes them to what you need.

Another alternative is to really look at your site and decide if you want it that thin...

[ganeycp]

First, thank you both for your response.

ExcalibursZone, I have considered widening my site to fit the minimum width of the Windows that exceed my current site's width.  But I would like to first try "fix" the JavaScript.  If I find it is too thin, I will widen my site.

Which files specifically contain the JavaScript for the "Post Message Box" (the box you get when you click reply, e.g. the one in help1.jpg)  Is it in Display.template or post.template within the default theme?

And if it isn't too much trouble, which section of the code in this file relates the message box?

Thanks again both of you for your quick reponse.

[ExcalibursZone]

You don't have to modify the SMF code at all, I don't think (heh). In the page that has your DIV that embeds your forum, all you have to do is put the JavaScript in there. You'll have to view the source to see if the id changes based on any factors such as which post you're replying to or whether it's a new post in a different forum.

Good and bad news on this front, there is no specific ID for the textarea in the post page that I could see (bad, bad form, SMF coders j/k). THOUGH, it's the only textarea there. So a simple getElementsByTagName() call *should* grab your post textarea. Using JavaScript from there should be cake to adjust the width to what you want.

Code Select Expand


var postText = document.getElementsByTagName('textarea');
postText[0].style.width = '200px';

I tested it out as a bookmarklet first so I knew it would work. Just post the following code into your addressbar while you have your "help1.jpg" screen showing in order to see if it'll work for you.

Code Select Expand


javascript: var postText = document.getElementsByTagName('textarea'); postText[0].style.width = '200px'; void(0);

Now, keep in mind that you will probably have to adjust the COLS attribute of the textarea if you want to avoid a horizontal scrollbar!

Any fixes to form elements you need to make should be taken care of in your page's window.onload event:

Code Select Expand


window.onload = function()
{
// Above code goes in here.
}

Which is, of course, wrapped in a <script> tag in the header of your custom pages. I would also make sure that you "namespace" your variables. Something like: smfInADIV_postText[0]. That will ensure there are no conflicts with SMF JavaScript.

And it looks like all you have to do is set that up for each of the things that break your width. You'll need to find the ID of each element that does this, or grab the element through another means like getElementsByTagName() or something.

HINT: I like how prototype wrapped the getElementByID with the $() function and I might suggest including wrapping functions like that for yours as well. $(id) is much easier to write than document.getElementById(id) and it works with XML documents in JavaScript as well. ($tn(id) = document.getElementsByTagName(id)).