We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ ! ] QUOTE and CODE resizing; Invisionfree board - javascript code
Topic Started: Jan 21 2010, 12:37 AM (716 Views)
Rynen
Member
[ * ]
Board type: Invisionfree
Type of request: Code

Hi people!

I've scoured through these forums for invisionfree mods, but am unable to find something to stop or prevent the quote and code boxes from auto-resizing in an invisionfree board. I apologize in advance if it's already present and I've missed it.

In a nutshell, I want code and quote boxes not unlike those on these forums.

Since code and quote they are wrapped by <td id='QUOTE'> or <td id='CODE'> in a regular free invisionfree board, I've thrown something together with what little code knowledge I have. (Code at the bottom of this post)

What my code does is: after the page is loaded, it looks through all td elements and finds those that have either an id of QUOTE or CODE, and wraps them in a new div, called either quote_div or code_div. These divs have their max-width set by the user's browser's window size so that the forum tables don't explode into ugliness.

Yes, I want the board to stay flexible to fit the browser of the user, so i'm not making a wrapper around the whole board and setting that to a pre-determined width.

It's working perfectly in Mozilla Firefox 3.5, but does not work in IE 5, 6 or 8 (tables stay enlarged horizontally, possibly because IE loads the page differently) Am unable to check Netscape or Opera.

It would be greatly appreciated if someone could lend me a helping hand, either by improving the code or by sending me to a link where there is a working code.

Preview board with code installed (click here - ignore the skin, it's being experimented on)
Login: test
Password: test

Current code
In Header
Code:
 
<script type="text/javascript">
function getwindowwidth()
{
if (self.innerWidth) { return self.innerWidth }
else if (document.documentElement && document.documentElement.clientWidth) { return document.documentElement.clientWidth }
else if (document.body) { return document.body.clientWidth }
}

var bigwidth = getwindowwidth() - 300;

document.write("<style type='text/css'>");
document.write("#quote_div, #code_div {");
document.write("max-width:" + bigwidth + "px!important; }");
document.write("</style>");
</script>


In Footer
Code:
 
<script type="text/javascript">
thetd = document.getElementsByTagName("td");
i = 0;
tempsave = "default data";
while(thetd[i] != undefined)
{
switch(thetd[i].id)
{
case "QUOTE":
tempsave = thetd[i].innerHTML;
thetd[i].innerHTML="<div id='quote_div'>" + tempsave + "</div>";
break;
case "CODE":
tempsave = thetd[i].innerHTML;
thetd[i].innerHTML="<div id='code_div'>" + tempsave + "</div>";
break;
default:
break;
}
i++;
}
</script>


Thanks in advance.

P.S. i hope this is in the right section...
Edited by Rynen, Jan 21 2010, 12:40 AM.
Offline Profile Goto Top
 
SuperSleuth
Member Avatar
Member
[ *  * ]
max-width is not supported by any IE browser, as far as I know.
Edited by SuperSleuth, Jan 21 2010, 01:00 AM.
Offline Profile Goto Top
 
Rynen
Member
[ * ]
max-width seems to be working in IE 8, but not IE 5 or 6.... maybe I could make the divs a fixed length in those?
Edited by Rynen, Jan 21 2010, 01:02 AM.
Offline Profile Goto Top
 
Holysavior-ZNR
Member Avatar
Member
[ *  *  *  *  * ]
the CODE and Quote boxes are already fluid and will automatically adjust to your board size. if your board size is already fluid so will that be and no code is needed.
Offline Profile Goto Top
 
Rynen
Member
[ * ]
Well, it does auto-readjust to the size of the board, but if I placed a huge image in them (say, an image with a width of 2000px), the tables will be stretched longer than the user's screen - resulting in the need for horizontal scrolling.

What I wanted was for a way for the CODE and QUOTE tables to be automatically set to a certain width depending on the viewport of the user in such a way that long images would not distort the forum tables.

for example, if I placed a really long image in this:
Quote:
 
Posted Image


The table would be distorted horizontally. This won't happen for long words due to word wrapping, that I know.

I'm looking for a code that will set the maximum width (or width) of the QUOTE and CODE tables so that they will not distort the forums, while still allowing the QUOTE and CODE tables to auto-adjust to the screen size of the user. (Or an alternative method to solve this problem)

I hope this clears up my request.

Edit: fixed some expressions
Edited by Rynen, Jan 22 2010, 12:16 AM.
Offline Profile Goto Top
 
Holysavior-ZNR
Member Avatar
Member
[ *  *  *  *  * ]
gotcha basically you just need something to auto resize images in quotes.

for codes you cant use img tags or anything .
Offline Profile Goto Top
 
Holysavior-ZNR
Member Avatar
Member
[ *  *  *  *  * ]
do you still need this code or has this been done or no longer needed?

if needed have you tried using CSS to fix the problem?

.quote img {
width:50%;
}
Offline Profile Goto Top
 
Reid
Member Avatar
È una trappola!

Ticket Incomplete

Expired / no response

If you have any questions regarding this topic, feel free to PM me. :)

Have a nice day. ^_^
Edited by Reid, Feb 22 2010, 12:32 AM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic